import Alert from '@/core/components/elements/Alert/Alert';
import Divider from '@/core/components/elements/Divider/Divider';
import Link from '@/core/components/elements/Link/Link';
import useAuth from '@/core/hooks/useAuth';
import CartApi from '@/lib/cart/api/CartApi';
import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
import { useEffect, useRef, useState } from 'react';
import _ from 'lodash';
import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart';
import currencyFormat from '@/core/utils/currencyFormat';
import { toast } from 'react-hot-toast';
import { useProductCartContext } from '@/contexts/ProductCartContext';
import { useRouter } from 'next/router';
import VariantGroupCard from '@/lib/variant/components/VariantGroupCard';
import MobileView from '@/core/components/views/MobileView';
import DesktopView from '@/core/components/views/DesktopView';
import Image from '@/core/components/elements/Image/Image';
import { useQuery } from 'react-query';
import CardProdcuctsList from '@/core/components/elements/Product/cartProductsList';
import { Skeleton } from '@chakra-ui/react';
import { useAddress } from '@/lib/checkout/stores/useAdress';
import { useCheckout } from '@/lib/checkout/stores/stateCheckout';
import {
  PickupAddress,
  SectionAddress,
  SectionValidation,
  calculateEstimatedArrival,
  splitDuration,
} from '../../checkout/components/CheckoutSection';
import addressesApi from '@/lib/address/api/addressesApi';
import { getItemAddress } from '@/core/utils/address';
import ExpedisiList from '../../checkout/api/ExpedisiList';
import SectionQuotationExpedition from '@/lib/checkout/components/SectionQuotationExpedition';
import { useQuotation } from '@/lib/checkout/stores/stateQuotation';

const { checkoutApi } = require('@/lib/checkout/api/checkoutApi');
const { getProductsCheckout } = require('@/lib/checkout/api/checkoutApi');

const Quotation = () => {
  const PPN = process.env.NEXT_PUBLIC_PPN ? parseFloat(process.env.NEXT_PUBLIC_PPN) : 0;
  const router = useRouter();
  const auth = useAuth();
  const query = router.query.source ?? null;

  const { data: cartCheckout } = useQuery('cartCheckout', () =>
    getProductsCheckout({
      source: query,
    })
  );

  const { setRefreshCart } = useProductCartContext();
  const SELF_PICKUP_ID = 32;

   const [totalAmount, setTotalAmount] = useState(0);
  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0);
  const [isApproval, setIsApproval] = useState(false);
  const [note_websiteText, setselectedNote_websiteText] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [etdFix, setEtdFix] = useState(null);

  const {
    selectedAddress,
    setSelectedAddress,
    addresses,
    setAddresses,
    setAddressMaps,
    setCoordinate,
    setPostalCode,
  } = useAddress();

  const {
    products,
    setProducts,
    checkWeigth,
    setCheckWeight,
    checkoutValidation,
    setCheckoutValidation,
    biayaKirim,
    etd,
    unit,
    selectedCourier,
    selectedCourierId,
    selectedService,
    listExpedisi,
    setExpedisi,
    productSla,
    setProductSla,
    setBiayaKirim,
    setUnit,
    setEtd,
    setSelectedCourier,
    setSelectedService,
    setSelectedCourierId
  } = useQuotation();
  

  useEffect(() => {
    if (!auth) return;

    const getAddresses = async () => {
      const dataAddresses = await addressesApi();
      setAddresses(dataAddresses);
    };

    getAddresses();
    setIsApproval(auth?.feature?.soApproval);
  }, [auth]);

  useEffect(() => {
    if (!addresses) return;

    const matchAddress = (key) => {
      if (key === 'invoicing') {
        key = 'invoice';
      }
      const addressToMatch = getItemAddress(key);
      const foundAddress = addresses.filter(
        (address) => address.id == addressToMatch
      );
      if (foundAddress.length > 0) {
        return foundAddress[0];
      }
      return addresses[0];
    };

    let ship = matchAddress('shipping');

    setSelectedAddress({
      shipping: matchAddress('shipping'),
      invoicing: matchAddress('invoicing'),
    });
    setPostalCode(ship?.zip);
    if (ship?.addressMap) {
      setAddressMaps(ship?.addressMap);
      setCoordinate({
        destination_latitude: ship?.latitude,
        destination_longitude: ship?.longtitude,
      });
    }
  }, [addresses]);

  useEffect(() => {
    const loadExpedisi = async () => {
      let dataExpedisi = await ExpedisiList();
      dataExpedisi = dataExpedisi.map((expedisi) => ({
        value: expedisi.id,
        label: expedisi.name,
        carrierId: expedisi.deliveryCarrierId,
        logo: expedisi.image,
      }));
      setExpedisi(dataExpedisi);
    };
    
    loadExpedisi();

    const handlePopState = () => {
      router.push('/shop/cart');
    };

    window.onpopstate = handlePopState;

    return () => {
      window.onpopstate = null;
    };
  }, []);

  useEffect(() => {
    if (isApproval) {
      setSelectedCourierId(1);
      setSelectedCourier('indoteknik');
    }
  }, [isApproval]);

  useEffect(() => {
    if (cartCheckout) {
      setProducts(cartCheckout?.products);
      setCheckWeight(cartCheckout?.hasProductWithoutWeight);
    }
  }, [cartCheckout]);

  useEffect(() => {
    if (products) {
      const calculateTotals = () => {
        let calculateTotalAmount = 0;
        let calculateTotalDiscountAmount = 0;
        
        products.forEach((product) => {
          calculateTotalAmount += product.price.price * product.quantity;
          calculateTotalDiscountAmount +=
            (product.price.price - product.price.priceDiscount) * product.quantity;
        });

        setTotalAmount(calculateTotalAmount);
        setTotalDiscountAmount(calculateTotalDiscountAmount);
      };

      calculateTotals();
    }
  }, [products]);

  useEffect(() => {
    if (etd) {
      setEtdFix(calculateEstimatedArrival(etd));
    }
  }, [etd]);

  const checkout = async () => {
    // Validation
    if (!selectedCourierId && !isApproval) {
      setCheckoutValidation(true);
      toast.error('Silahkan pilih ekspedisi');
      return;
    }

    if (selectedCourierId !== SELF_PICKUP_ID && biayaKirim === 0 && !isApproval) {
      toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
      return;
    }

    if (!products || products.length === 0) return;

    if (isApproval && note_websiteText === '') {
      toast.error('Maaf, Note wajib dimasukkan.');
      return;
    }

    setIsLoading(true);
    try {
      const productOrder = products.map((product) => ({
        product_id: product.id,
        quantity: product.quantity,
      }));

      const data = {
        partner_shipping_id: selectedAddress.shipping.id,
        partner_invoice_id: selectedAddress.invoicing.id,
        user_id: auth.id,
        order_line: JSON.stringify(productOrder),
        delivery_amount: biayaKirim,
        carrier_id: selectedCourierId,
        estimated_arrival_days: splitDuration(etd),
        delivery_service_type: selectedService?.service_type || selectedCourier,
        note_website: note_websiteText,
      };

      const isSuccess = await checkoutApi({ data });
      
      if (isSuccess?.id) {
        for (const product of products) {
          deleteItemCart({ productId: product.id });
        }
        router.push(`/shop/quotation/finish?id=${isSuccess.id}`);
        setRefreshCart(true);
      } else {
        toast.error('Gagal melakukan transaksi, terjadi kesalahan internal');
      }
    } catch (error) {
      toast.error('Terjadi kesalahan saat memproses quotation');
    } finally {
      setIsLoading(false);
    }
  };


  const taxTotal = (totalAmount - totalDiscountAmount) * (PPN - 1);

  return (
    <>
      <MobileView>
        <div className='p-4'>
          <Alert type='info' className='text-caption-2 flex gap-x-3'>
            <div>
              <ExclamationCircleIcon className='w-7 text-blue-700' />
            </div>
            <span className='leading-5'>
              Jika mengalami kesulitan dalam melakukan pembelian di website
              Indoteknik. Hubungi kami disini
            </span>
          </Alert>
        </div>

        <Divider />

        {selectedCourierId == SELF_PICKUP_ID && (
          <div className='p-4'>
            <div
              className='flex items-center p-4 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50'
              role='alert'
            >
              <svg
                className='flex-shrink-0 inline w-4 h-4 mr-3'
                aria-hidden='true'
                fill='currentColor'
                viewBox='0 0 20 20'
              >
                <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
              </svg>
              <span className='sr-only'>Info</span>
              <div className='text-justify'>
                Fitur Self Pickup, hanya berlaku untuk customer di area jakarta.
                Apa bila memilih fitur ini, anda akan dihubungi setelah barang
                siap diambil.
              </div>
            </div>
          </div>
        )}

        {selectedCourierId == SELF_PICKUP_ID && (
          <PickupAddress label='Alamat Pickup' />
        )}
        {selectedCourierId != SELF_PICKUP_ID && (
          <Skeleton
            isLoaded={!!selectedAddress.invoicing && !!selectedAddress.shipping}
            minHeight={320}
          >
            <SectionAddress
              address={selectedAddress.shipping}
              label='Alamat Pengiriman'
              url='/my/address?select=shipping'
            />
            <Divider />
            <SectionAddress
              address={selectedAddress.invoicing}
              label='Alamat Penagihan'
              url='/my/address?select=invoice'
            />
          </Skeleton>
        )}
        <Divider />
        <SectionValidation address={selectedAddress.invoicing} />
       
        <div className='p-4 flex flex-col gap-y-4'>
          {products && (
            <VariantGroupCard openOnClick={false} variants={products} />
          )}
        </div>

        <SectionQuotationExpedition products={products} />
        <Divider />

        <div className='p-4'>
          <div className='flex justify-between items-center'>
            <div className='font-medium'>Ringkasan Penawaran</div>
            <div className='text-gray_r-11 text-caption-1'>
              {products?.length} Barang
            </div>
          </div>
          <hr className='my-4 border-gray_r-6' />
          <div className='flex flex-col gap-y-4'>
            <div className='flex gap-x-2 justify-between'>
              <div className='text-gray_r-11'>Total Belanja</div>
              <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
            </div>
            <div className='flex gap-x-2 justify-between'>
              <div className='text-gray_r-11'>Diskon Produk</div>
              <div className='text-danger-500'>
                - {currencyFormat(cartCheckout?.totalDiscount)}
              </div>
            </div>
            <div className='flex gap-x-2 justify-between'>
              <div className='text-gray_r-11'>Subtotal</div>
              <div>{currencyFormat(cartCheckout?.subtotal)}</div>
            </div>
            <div className='flex gap-x-2 justify-between'>
              <div className='text-gray_r-11'>PPN {((PPN - 1) * 100).toFixed(0)}%</div>
              <div>{currencyFormat(cartCheckout?.tax)}</div>
            </div>
            <div className='flex gap-x-2 justify-between'>
              <div className='text-gray_r-11'>
                Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p>
              </div>
              <div>
                {currencyFormat(
                  Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                )}
              </div>
            </div>
          </div>
          <hr className='my-4 border-gray_r-6' />
          <div className='flex gap-x-2 justify-between mb-4'>
            <div>Grand Total</div>
            <div className='font-semibold text-gray_r-12'>
              {currencyFormat(
                cartCheckout?.grandTotal +
                  Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
              )}
            </div>
          </div>
          <p className='text-caption-2 text-gray_r-10 mb-2'>
            *) Belum termasuk biaya pengiriman
          </p>
          <p className='text-caption-2 text-gray_r-10 leading-5'>
            Dengan melakukan pembelian melalui website Indoteknik, saya
            menyetujui{' '}
            <Link href='/syarat-ketentuan' className='inline font-normal'>
              Syarat & Ketentuan
            </Link>{' '}
            yang berlaku
          </p>
          <hr className='my-4 border-gray_r-6' />

          <div className='flex gap-x-2 justify-start mb-4'>
            <div className=''>Note</div>
            {isApproval && (
              <div className='text-caption-1 text-red-500 items-center flex'>
                *harus diisi
              </div>
            )}
          </div>
          <div className='text-caption-2 text-gray_r-11'>
            <textarea
              rows='4'
              cols='50'
              className={`w-full p-1 rounded border  border-gray_r-6`}
              onChange={(e) => setselectedNote_websiteText(e.target.value)}
            />
          </div>
        </div>

        <Divider />

        <div className='flex gap-x-3 p-4'>
          <button
            className='flex-1 btn-yellow'
            onClick={checkout}
            disabled={isLoading}
          >
            {isLoading ? 'Loading...' : 'Quotation'}
          </button>
        </div>
      </MobileView>

      <DesktopView>
        <div className='container mx-auto py-10 flex'>
          <div className='w-3/4 border border-gray_r-6 rounded bg-white p-4'>
            {selectedCourierId == SELF_PICKUP_ID && (
              <PickupAddress label='Alamat Pickup' />
            )}
            {selectedCourierId != SELF_PICKUP_ID && (
              <Skeleton
                isLoaded={
                  !!selectedAddress.invoicing && !!selectedAddress.shipping
                }
                minHeight={290}
              >
                <SectionAddress
                  address={selectedAddress.shipping}
                  label='Alamat Pengiriman'
                  url='/my/address?select=shipping'
                />
                <Divider />
                <SectionAddress
                  address={selectedAddress.invoicing}
                  label='Alamat Penagihan'
                  url='/my/address?select=invoice'
                />
              </Skeleton>
            )}
            <Divider />
            <SectionValidation address={selectedAddress.invoicing} />
            
            <SectionQuotationExpedition products={products} />
            <Divider />
            
            <div className='font-medium mb-6'>Detail Barang</div>
            <CardProdcuctsList
              isLoading={isLoading}
              products={products}
              source='checkout'
            />
          </div>

          <div className='w-1/4 pl-4'>
            <div className='sticky top-48 border border-gray_r-6 bg-white rounded p-4'>
              <div className='flex justify-between items-center'>
                <div className='font-medium'>Ringkasan Pesanan</div>
                <div className='text-gray_r-11 text-caption-1'>
                  {products?.length} Barang
                </div>
              </div>

              <hr className='my-4 border-gray_r-6' />
              <div className='flex flex-col gap-y-4'>
                <div className='flex gap-x-2 justify-between'>
                  <div className='text-gray_r-11'>Total Belanja</div>
                  <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
                </div>
                <div className='flex gap-x-2 justify-between'>
                  <div className='text-gray_r-11'>Diskon Produk</div>
                  <div className='text-danger-500'>
                    - {currencyFormat(cartCheckout?.totalDiscount)}
                  </div>
                </div>
                <div className='flex gap-x-2 justify-between'>
                  <div className='text-gray_r-11'>Subtotal</div>
                  <div>{currencyFormat(cartCheckout?.subtotal)}</div>
                </div>
                <div className='flex gap-x-2 justify-between'>
                  <div className='text-gray_r-11'>PPN {((PPN - 1) * 100).toFixed(0)}%</div>
                  <div>{currencyFormat(cartCheckout?.tax)}</div>
                </div>
                <div className='flex gap-x-2 justify-between'>
                  <div className='text-gray_r-11'>
                    Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p>
                  </div>
                  <div>
                    {currencyFormat(
                      Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                    )}
                  </div>
                </div>
              </div>

              <hr className='my-4 border-gray_r-6' />

              <div className='flex gap-x-2 justify-between mb-4'>
                <div>Grand Total</div>
                <div className='font-semibold text-gray_r-12'>
                  {currencyFormat(
                    cartCheckout?.grandTotal +
                      Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                  )}
                </div>
              </div>
              <p className='text-caption-2 text-gray_r-11 leading-5'>
                Dengan melakukan pembelian melalui website Indoteknik, saya
                menyetujui{' '}
                <Link href='/syarat-ketentuan' className='inline font-normal'>
                  Syarat & Ketentuan
                </Link>{' '}
                yang berlaku
              </p>

              <div>
                <hr className='my-4 border-gray_r-6' />

                <div className='flex gap-x-1 flex-col mb-4'>
                  <div className='flex flex-row gap-x-1'>
                    <div className=''>Note</div>
                    {isApproval && (
                      <div className='text-caption-1 text-red-500 items-center flex'>
                        *harus diisi
                      </div>
                    )}
                  </div>
                  <div className='text-caption-2 text-gray_r-11'>
                    <textarea
                      rows='4'
                      cols='50'
                      className={`w-full p-1 rounded border  border-gray_r-6`}
                      onChange={(e) =>
                        setselectedNote_websiteText(e.target.value)
                      }
                    />
                  </div>
                </div>
              </div>

              <hr className='my-4 border-gray_r-6' />

              <button
                className='w-full btn-yellow mt-4'
                onClick={checkout}
                disabled={isLoading || !products || products?.length == 0}
              >
                {isLoading ? 'Loading...' : 'Buat Quotation'}
              </button>
            </div>
          </div>
        </div>
      </DesktopView>
    </>
  );
};

export default Quotation;