import { useRouter } from 'next/router';
import { useEffect, useState, useRef } from 'react';
import { toast } from 'react-hot-toast';
import {
  EllipsisVerticalIcon,
  MagnifyingGlassIcon,
  ChevronDownIcon,
} from '@heroicons/react/24/outline';
import useAuth from '@/core/hooks/useAuth';
import {
  downloadPurchaseOrder,
  downloadQuotation,
} from '../utils/transactions';
import useTransactions from '../hooks/useTransactions';
import currencyFormat from '@/core/utils/currencyFormat';
import cancelTransactionApi from '../api/cancelTransactionApi';
import TransactionStatusBadge from './TransactionStatusBadge';
import Spinner from '@/core/components/elements/Spinner/Spinner';
import Link from '@/core/components/elements/Link/Link';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import Pagination from '@/core/components/elements/Pagination/Pagination';
import { toQuery } from 'lodash-contrib';
import _ from 'lodash';
import Alert from '@/core/components/elements/Alert/Alert';
import MobileView from '@/core/components/views/MobileView';
import DesktopView from '@/core/components/views/DesktopView';
import Menu from '@/lib/auth/components/Menu';
import * as XLSX from 'xlsx';
import getSite from '../api/listSiteApi';
import transactionsApi from '../api/transactionsApi';
import { motion } from 'framer-motion';
import Image from '@/core/components/elements/Image/Image';
import { upsertUserCart } from '~/services/cart';
import { useProductCartContext } from '@/contexts/ProductCartContext';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import { Calendar } from 'lucide-react';
import { DateRangePicker } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';


const Transactions = ({ context = '' }) => {
  const auth = useAuth();
  const router = useRouter();
  const {
    q = '',
    page = 1,
    site = null,
    limit = 15,
    status = 'all',
    sort = 'none',
    startDate = null,
    endDate = new Date(),
  } = router.query;
  const { setRefreshCart } = useProductCartContext();

  const [cachedAllData, setCachedAllData] = useState(null); // Simpan data "All"
  const [currentData, setCurrentData] = useState([]); 
  const [inputQuery, setInputQuery] = useState(q);
  const [toOthers, setToOthers] = useState(null);
  const [toCancel, setToCancel] = useState(null);
  const [listSites, setListSites] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const [siteFilter, setSiteFilter] = useState(site);
  const [pageNew, setPageNew] = useState(page);
  const [limitNew, setLimitNew] = useState(limit);
  const [statusNew, setStatusNew] = useState(status);
  const [sortNew, setSortNew] = useState(sort);
  const [contextNew, setcontextNew] = useState(router.query.context || context);
  const [isOpenCalender, setIsOpenCalender] = useState(false);
  const calendarRef = useRef(null);
  const isUnpaid = (s) =>
    ['belum_bayar'].includes(String(s || '').toLowerCase());

  // loading id utk tombol lanjutkan transaksi
  const [contLoadingId, setContLoadingId] = useState(null);

  const parseDate = (date) => {
    if (!date || date === 'null') return null;
    if (date instanceof Date) return date;
    const [day, month, year] = date.split('/').map(Number);
    return new Date(year, month - 1, day);
  };

  const [state, setState] = useState([
    {
      startDate: startDate != null || 'null' ? parseDate(startDate) : null,
      endDate: startDate == null ? endDate : parseDate(endDate),
      key: 'selection',
    },
  ]);

  const query = {
    name: q,
    offset: (pageNew - 1) * limitNew,
    context: contextNew,
    limit: limitNew,
    status: statusNew,
    sort: sortNew,
    startDate: state[0].startDate
      ? state[0].startDate.toLocaleDateString('id-ID')
      : null,
    endDate: state[0]?.endDate?.toLocaleDateString('id-ID'),
    site:
      siteFilter || (auth?.webRole === null && auth?.site ? auth.site : null),
  };

  const statuses = [
    { id: 'all', label: 'Semua' },
    { id: 'quotation', label: 'Pending Quotation' },
    { id: 'belum_bayar', label: 'Belum Bayar' },
    { id: 'diproses', label: 'Pesanan Diproses' },
    { id: 'dikemas', label: 'Pesanan Dikemas' },
    { id: 'partial', label: 'Dikirim Sebagian' },
    { id: 'dikirim', label: 'Pesanan Dikirim' },
    { id: 'selesai', label: 'Pesanan Selesai' },
    { id: 'cancel', label: 'Pesanan Dibatalkan' },
  ];

  const contextLabelMap = {
    draft: 'Pending Quotation',
    waiting: 'Pesanan Diproses',
    sale: 'Pesanan Dikemas',
    partial_shipping: 'Dikirim Sebagian',
    shipping: 'Pesanan Dikirim',
    done: 'Pesanan Selesai',
    cancel: 'Pesanan Dibatalkan',
    belum_bayar: 'Belum Bayar',
  };

  const sortes = [
    { id: 'none', label: 'Urutkan' },
    { id: 'asc', label: 'dari yang terkecil' },
    { id: 'desc', label: 'dari yang terbesar' },
  ];

  const { transactions } = useTransactions({ query });

  const fetchSite = async () => {
    const site = await getSite();
    setListSites(site.sites);
  };

  const submitCancelTransaction = async () => {
    const isCancelled = await cancelTransactionApi({ transaction: toCancel });
    if (isCancelled) {
      toast.success('Berhasil batalkan transaksi');
      transactions.refetch();
    }
    setToCancel(null);
  };

  const pageCount = Math.ceil(
    (transactions?.data?.saleOrderTotal || 0) / (limitNew || 1)
  );

  const handleSubmit = (e) => {
    e.preventDefault();
    const queryParams = {};
    if (inputQuery) queryParams.q = inputQuery;
    if (siteFilter) queryParams.site = siteFilter;
    router.push({ pathname: router.pathname, query: queryParams });
  };

  const handleSiteFilterChange = (e) => {
    setSiteFilter(e.target.value);
    const queryParams = {};
    if (inputQuery) queryParams.q = inputQuery;
    if (e.target.value) queryParams.site = e.target.value;
    router.push({ pathname: router.pathname, query: queryParams });
  };

  const exportToExcel = (data, siteFilter) => {
    const fieldsToExport = [
      'No. Transaksi',
      'No. PO',
      'Tanggal',
      'Created By',
      'Salesperson',
      'Total',
      'Status',
    ];
    const rowsToExport = [];

    (data || []).forEach((saleOrder) => {
      const row = {
        'No. Transaksi': saleOrder.name,
        'No. PO': saleOrder.purchaseOrderName || '-',
        Tanggal: saleOrder.dateOrder || '-',
        'Created By': saleOrder.address?.customer?.name || '-',
        Salesperson: saleOrder.sales,
        Total: currencyFormat(saleOrder.amountTotal),
        Status: contextLabelMap[saleOrder.status] || saleOrder.status,
      };
      if (siteFilter) row['Site'] = siteFilter;
      rowsToExport.push(row);
    });

    const worksheet = XLSX.utils.json_to_sheet(rowsToExport, {
      header: fieldsToExport,
    });

    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    XLSX.writeFile(workbook, 'transactions.xlsx');
  };

  const getAllData = async () => {
    const qobj = {
      name: q,
      offset: (pageNew - 1) * limitNew,
      limit: limitNew,
      context: contextNew[statusNew] || 'all',
      sort: sortNew,
      startDate: state[0]?.startDate
        ? state[0].startDate.toLocaleDateString('id-ID')
        : null,
      endDate: state[0]?.endDate
        ? state[0].endDate.toLocaleDateString('id-ID')
        : null,
      site:
        siteFilter || (auth?.webRole === null && auth?.site ? auth.site : null),
    };
    const queryString = toQuery(qobj);
    const data = await transactionsApi({ query: queryString });
    return data;
  };

  const handleExportCSV = async () => {
    const dataToExport = await getAllData();

    const fieldsToExport = [
      'No. Transaksi',
      'No. PO',
      'Tanggal',
      'Created By',
      'Salesperson',
      'Total',
      'Status',
    ];
    const rowsToExport =
      dataToExport?.saleOrders?.map((saleOrder) => {
        const row = [
          saleOrder.name,
          saleOrder.purchaseOrderName || '-',
          saleOrder.dateOrder || '-',
          saleOrder.address?.customer?.name || '-',
          saleOrder.sales,
          currencyFormat(saleOrder.amountTotal),
          (contextLabelMap[saleOrder.status] || saleOrder.status || '').replace(
            /,/g,
            ' '
          ),
        ];
        if (siteFilter) row.push((siteFilter || '').replace(/,/g, ' '));
        return row.join(',');
      }) || [];

    const csvContent =
      'data:text/csv;charset=utf-8,' +
      [fieldsToExport.join(','), ...rowsToExport].join('\n');

    const encodedUri = encodeURI(csvContent);
    const link = document.createElement('a');
    link.setAttribute('href', encodedUri);
    link.setAttribute('download', 'transactions.csv');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const handleExportExcel = async () => {
    const dataToExport = await getAllData();
    exportToExcel(dataToExport?.saleOrders, siteFilter);
  };

  const handleDownload = (format) => {
    if (format === 'csv') handleExportCSV();
    else if (format === 'xlsx') handleExportExcel();
    setIsOpen(false);
  };

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (calendarRef.current && !calendarRef.current.contains(event.target)) {
        setIsOpenCalender(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const startItem = 1 + (pageNew - 1) * limitNew;
  const endItem = Math.min(
    limitNew * pageNew,
    transactions?.data?.saleOrderTotal || 0
  );

  useEffect(() => {
    fetchSite();
  }, []);

  const handleBuyBack = async (products) => {
    try {
      const results = await Promise.all(
        (products || []).map((product) =>
          upsertUserCart({
            userId: auth.id,
            type: 'product',
            id: product.id,
            qty: product.quantity,
            selected: true,
            source: 'add_to_cart',
            qtyAppend: true,
          }).catch((error) => ({ error, product }))
        )
      );

      const failed = results.filter((r) => r && r.error);
      if (failed.length > 0) {
        toast.error(`${failed.length} produk gagal ditambahkan ke keranjang`);
        if (failed.length < (products || []).length) {
          toast.success(
            `${
              (products || []).length - failed.length
            } produk berhasil ditambahkan`
          );
          setRefreshCart(true);
          router.push('/shop/cart');
        }
        return;
      }
      setRefreshCart(true);
      toast.success('Semua produk berhasil ditambahkan ke keranjang');
      router.push('/shop/cart');
    } catch {
      toast.error('Terjadi kesalahan saat menambahkan produk ke keranjang');
    }
  };

  const handleStatusChange = async (status) => {
    setStatusNew(status);
    setPageNew(1);

    if (status === 'all' && cachedAllData) {
      setCurrentData(cachedAllData);
      return;
    }
    const data = await fetchSite(status, 1);

    if (status === 'all') {
      setCachedAllData(data);
    }

    setCurrentData(data);
  };

  useEffect(() => {
    setCachedAllData([]);
  }, []);

  useEffect(() => {
    // bersihkan cache lama jika perlu (saat first mount)
    // (sengaja kosong; tidak pakai cached data di versi ini)
  }, []);

  const handleReset = () => {
    setState([{ startDate: null, endDate: new Date(), key: 'selection' }]);
    setIsOpenCalender(false);
    router.push(`${router.pathname}`);
  };

  const formatDate = (dateString) => {
    const months = [
      'Januari',
      'Februari',
      'Maret',
      'April',
      'Mei',
      'Juni',
      'Juli',
      'Agustus',
      'September',
      'Oktober',
      'November',
      'Desember',
    ];
    const [day, month, year] = (dateString || '').split('/');
    if (!day || !month || !year) return dateString || '-';
    return `${day} ${months[parseInt(month, 10) - 1]} ${year}`;
  };

  const handleContinuePayment = async (saleOrder) => {
    try {
      setContLoadingId(saleOrder.id);

      // (0) Minta backend pastikan/generate link terbaru
      let ensuredUrl = '';
      try {
        const { data } = await axios.post(
          `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/so-payment-link?soId=${saleOrder.id}`
        );
        ensuredUrl = data?.redirectUrl || '';
      } catch (e) {
      }

      const existingUrl =
        ensuredUrl ||
        saleOrder?.paymentSummary?.redirectUrl ||
        saleOrder?.paymentLinkMidtrans ||
        '';

      if (existingUrl) {
        window.open(existingUrl, '_blank', 'noopener,noreferrer');
        toast.success('Membuka halaman pembayaran…');
        return;
      }

      // (2) Fallback: refetch list (kalau backend auto-generate saat list)
      await transactions.refetch();
      const updated =
        transactions?.data?.saleOrders?.find((s) => s.id === saleOrder.id) ||
        null;
      const updatedUrl =
        ensuredUrl || // kalau step (0) akhirnya sukses
        updated?.paymentSummary?.redirectUrl ||
        updated?.paymentLinkMidtrans ||
        '';

      if (updatedUrl) {
        window.open(updatedUrl, '_blank', 'noopener,noreferrer');
        toast.success('Membuka halaman pembayaran…');
      } else {
        toast.error('Link pembayaran belum tersedia.');
      }
    } catch (e) {
      const msg =
        e?.response?.data?.description ||
        e?.message ||
        'Gagal melanjutkan transaksi';
      toast.error(msg);
    } finally {
      setContLoadingId(null);
    }
  };

  return (
    <>
      {/* ===== MOBILE ===== */}
      <MobileView>
        <div className=' flex flex-col gap-y-4'>
          <div className='grid grid-cols-[40%_40%_15%] justify-between items-center gap-2 w-full '>
            <select
              value={statusNew}
              onChange={(e) => handleStatusChange(e.target.value)}
              className='border border-gray-300 rounded-lg px-2 py-2 text-xs bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500'
            >
              {statuses.map((status) => (
                <option key={status.id} value={status.id}>
                  {status.label}
                </option>
              ))}
            </select>
            <select
              value={sortNew}
              onChange={(e) => setSortNew(e.target.value)}
              className='border border-gray-300 rounded-lg px-2 py-2 text-xs bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500'
            >
              {sortes.map((status) => (
                <option key={status.id} value={status.id}>
                  {status.label}
                </option>
              ))}
            </select>
            <div ref={calendarRef} className='relative inline-block'>
              <button
                type='button'
                className='p-1 w-full h-auto cursor-pointer border hover:bg-gray-100 rounded transition duration-150 ease-in-out flex items-center justify-center'
                onClick={() => setIsOpenCalender((prev) => !prev)}
              >
                <span className='text-nowrap px-1 truncate flex items-center gap-1'>
                  {state[0]?.startDate ? (
                    `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}`
                  ) : (
                    <Calendar size={20} className='text-gray-500' />
                  )}
                </span>
              </button>
              {isOpenCalender && (
                <div className='absolute right-1 mt-2 bg-white p-4 rounded shadow-lg z-50'>
                  <button
                    onClick={() => setIsOpenCalender(false)}
                    className='absolute top-2 right-2 text-gray-600 hover:text-black text-xl font-bold'
                  >
                    &times;
                  </button>
                  <DateRangePicker
                    onChange={(item) => setState([item.selection])}
                    showSelectionPreview={false}
                    maxDate={new Date()}
                    moveRangeOnFirstSelection={false}
                    months={1}
                    ranges={state}
                    className='w-full'
                  />
                  <style>{`
                    .rdrCalendarWrapper{display:flex;flex-direction:column;}
                    .rdrDateRangePickerWrapper{display:flex;flex-direction:column;}
                    .rdrDefinedRangesWrapper{order:-1;width:fit-content;}
                    .rdrStaticRanges{flex-direction:row;margin-right:2px;}
                    .rdrInputRanges{display:none !important;}
                    .rdrStaticRangeLabel{padding:10px 10px;}
                    .rdrMonth{width:-moz-available;}
                  `}</style>
                  <div className='flex flex-row justify-end gap-3 mt-2'>
                    <button
                      className='px-4 py-1 bg-red-500 text-white rounded'
                      onClick={handleReset}
                    >
                      Reset
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>

          {transactions.isLoading && (
            <div className='flex justify-center my-4'>
              <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
            </div>
          )}

          {!transactions.isLoading &&
            transactions.data?.saleOrders?.length === 0 && (
              <Alert type='info' className='text-center'>
                Tidak ada transaksi
              </Alert>
            )}

          {transactions.data?.saleOrders?.map((saleOrder, index) => (
            <div
              className='p-4 shadow border border-gray_r-3 text-xs rounded-md flex flex-col gap-2'
              key={index}
            >
              <div className='flex flex-row justify-between items-start'>
                <Link href={`${router.pathname}/${saleOrder.id}`}>
                  <h2 className='text-danger-500 text-base'>
                    {saleOrder.name}
                  </h2>
                  <span className='font-medium text-black opacity-75'>
                    {formatDate(saleOrder.dateOrder.split(' ')[0]) || '-'}
                  </span>
                </Link>
                <div className='flex gap-x-1 justify-end'>
                  <TransactionStatusBadge status={saleOrder.status} />
                  <EllipsisVerticalIcon
                    className='w-5 h-5'
                    onClick={() => setToOthers(saleOrder)}
                  />
                </div>
              </div>
              <div className='col-span-2 h-[1px] w-full bg-gray-300'></div>
              <Link
                href={`${router.pathname}/${saleOrder.id}`}
                className='flex flex-col gap-2'
              >
                <div className='flex flex-row gap-2'>
                  <div className='flex w-1/5'>
                    <Image
                      src={saleOrder.products[0]?.parent?.image}
                      alt={saleOrder.products[0]?.name}
                      className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
                    />
                  </div>
                  <div className='flex w-4/5 flex-col gap-2 justify-start'>
                    <p className='flex flex-row gap-2'>
                      <span className=' text-black text-sm'>Nomor PO:</span>
                      <span className=' text-red-500 font-semibold text-sm'>
                        {saleOrder.purchaseOrderName || '-'}
                      </span>
                    </p>
                    <p className='line-clamp-2 leading-6 tracking-wide opacity-90 !text-gray_r-12 font-semibold truncate text-sm'>
                      {saleOrder.products[0]?.parent?.name}
                    </p>
                    <p className='opacity-85 !text-gray_r-12'>
                      {saleOrder.products[0]?.quantity} x{' '}
                      {currencyFormat(
                        saleOrder.products[0]?.price?.priceDiscount
                      )}
                    </p>
                    <div className='flex flex-row justify-start items-center'>
                      {saleOrder.products?.length > 1 && (
                        <div className='flex flex-row gap-1 justify-start items-center'>
                          {saleOrder.products
                            .slice(1, 4)
                            .map((product, idx) => (
                              <Image
                                key={idx}
                                src={product?.parent?.image}
                                alt={product?.name}
                                className='object-contain object-center border border-gray_r-6 h-8 w-8 rounded-md'
                              />
                            ))}
                          {saleOrder.products.length > 4 ? (
                            <Link
                              href={`${router.pathname}/${saleOrder?.id}`}
                              className='text-red-500 text-nowrap'
                            >
                              +{saleOrder.products.length - 4} lihat semua
                              produk
                            </Link>
                          ) : (
                            <Link
                              href={`${router.pathname}/${saleOrder?.id}`}
                              className='text-red-500 text-nowrap'
                            >
                              Lihat semua produk
                            </Link>
                          )}
                        </div>
                      )}
                    </div>
                    <div className='flex flex-row w-full text-nowrap gap-2 text-black'>
                      <span className=''>Pesanan dibuat oleh:</span>
                      <p className=' font-semibold truncate'>
                        {saleOrder.address.customer?.name || '-'}
                      </p>
                    </div>
                  </div>
                </div>
                <div className='col-span-2 h-[1px] w-full bg-gray-300'></div>

                <div className='flex flex-col gap-3 text-sm'>
                  <div className='flex flex-col text-black'>
                    <p className='font-extralight'>Total Harga</p>
                    <p className='font-semibold text-lg'>
                      {currencyFormat(saleOrder.amountTotal)}
                    </p>
                  </div>

                  <div className='flex flex-col gap-2 w-full'>
                    {/* Beli Lagi hanya muncul jika status bukan unpaid */}
                    {!isUnpaid(saleOrder.status) && (
                      <button
                        type='button'
                        onClick={(e) => {
                          e.preventDefault();
                          e.stopPropagation();
                          handleBuyBack(saleOrder.products);
                        }}
                        className='w-full py-2 btn-solid-red text-center rounded-md'
                      >
                        Beli Lagi
                      </button>
                    )}

                    {/* Bayar Sekarang hanya kalau eligible */}
                    {saleOrder?.eligibleContinue && (
                      <button
                        type='button'
                        disabled={contLoadingId === saleOrder.id}
                        onClick={(e) => {
                          e.preventDefault();
                          e.stopPropagation();
                          handleContinuePayment(saleOrder);
                        }}
                        className='w-full py-2 text-center rounded-md border border-red-300 text-red-500 bg-white disabled:opacity-60'
                      >
                        {contLoadingId === saleOrder.id
                          ? 'Memproses…'
                          : 'Bayar Sekarang'}
                      </button>
                    )}
                  </div>
                </div>
              </Link>
            </div>
          ))}

          <Pagination
            pageCount={pageCount}
            currentPage={parseInt(pageNew)}
            url={`${router.pathname}?${toQuery(_.omit(query, ['page']))}`}
            className='mt-2 mb-2'
          />

          <BottomPopup
            title='Lainnya'
            active={toOthers}
            close={() => setToOthers(null)}
          >
            <div className='flex flex-col gap-y-4 mt-2'>
              <button
                className='text-left disabled:opacity-60'
                disabled={!toOthers?.purchaseOrderFile}
                onClick={() => {
                  downloadPurchaseOrder(toOthers);
                  setToOthers(null);
                }}
              >
                Download PO
              </button>
              <button
                className='text-left disabled:opacity-60'
                disabled={toOthers?.status != 'draft'}
                onClick={() => {
                  downloadQuotation(toOthers);
                  setToOthers(null);
                }}
              >
                Download Quotation
              </button>
              <button
                className='text-left disabled:opacity-60'
                disabled={toOthers?.status != 'waiting'}
                onClick={() => {
                  setToCancel(toOthers);
                  setToOthers(null);
                }}
              >
                Batalkan Transaksi
              </button>
            </div>
          </BottomPopup>

          <BottomPopup
            active={toCancel}
            close={() => setToCancel(null)}
            title='Batalkan Transaksi'
          >
            <div className='leading-7 text-gray_r-12/80'>
              Apakah anda yakin membatalkan transaksi{' '}
              <span className='underline'>{toCancel?.name}</span>?
            </div>
            <div className='flex mt-6 gap-x-4'>
              <button
                className='btn-solid-red flex-1'
                type='button'
                onClick={submitCancelTransaction}
              >
                Ya, Batalkan
              </button>
              <button
                className='btn-light flex-1'
                type='button'
                onClick={() => setToCancel(null)}
              >
                Batal
              </button>
            </div>
          </BottomPopup>
        </div>
      </MobileView>

      {/* ===== DESKTOP ===== */}
      <DesktopView>
        <div className='container mx-auto flex py-10'>
          <div className='w-3/12 pr-4'>
            <Menu />
          </div>
          <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
            <div className='flex mb-6 items-center justify-between '>
              <h1 className='text-title-sm font-semibold'>
                Daftar Transaksi{' '}
                {transactions?.data?.saleOrders
                  ? `(${transactions?.data?.saleOrderTotal})`
                  : ''}
              </h1>
              <div className='relative inline-block text-left'>
                <button
                  onClick={() => setIsOpen(!isOpen)}
                  type='button'
                  className='btn-light bg-slate-50 mt-3 w-full gap-2 items-center flex flex-row !text-gray_r-11 px-4 py-3 mb-2'
                >
                  <p>Export</p>
                  <motion.div
                    animate={{ rotate: isOpen ? 180 : 0 }}
                    transition={{ duration: 0.2, ease: 'easeInOut' }}
                  >
                    <ChevronDownIcon className='w-5' />
                  </motion.div>
                </button>

                {isOpen && (
                  <motion.div
                    initial={{ opacity: 0, y: -10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -10 }}
                    transition={{ duration: 0.2, ease: 'easeInOut' }}
                    className='absolute mt-2 w-fit py-1 bg-white border border-gray-300 rounded-md shadow-lg'
                  >
                    <button
                      onClick={() => handleDownload('csv')}
                      className='block w-full px-4 py-2 text-left hover:bg-gray-200 text-nowrap'
                    >
                      Download CSV
                    </button>
                    <button
                      onClick={() => handleDownload('xlsx')}
                      className='block w-full px-4 py-2 text-left hover:bg-gray-200 text-nowrap'
                    >
                      Download XLSX
                    </button>
                  </motion.div>
                )}
              </div>
            </div>

            <div className='flex flex-col gap-y-2  border rounded-lg mb-2 w-full'>
              <div className='p-2'>
                <div className='flex items-center space-x-3'>
                  <span className='text-base font-semibold text-gray-600'>
                    Status
                  </span>
                  <div className='relative w-full overflow-hidden'>
                    <div className='flex items-center space-x-2'>
                      <button className='custom-prev w-8 h-8 flex-shrink-0 flex items-center justify-center bg-white border rounded-full shadow z-1'>
                        <svg
                          className='w-4 h-4 text-gray-500'
                          fill='none'
                          stroke='currentColor'
                          viewBox='0 0 24 24'
                        >
                          <path
                            strokeLinecap='round'
                            strokeLinejoin='round'
                            strokeWidth={2}
                            d='M15 19l-7-7 7-7'
                          />
                        </svg>
                      </button>

                      <div className='w-full overflow-hidden'>
                        <Swiper
                          spaceBetween={10}
                          slidesPerView='auto'
                          className='status-swiper'
                          modules={[Navigation]}
                          navigation={{
                            nextEl: '.custom-next',
                            prevEl: '.custom-prev',
                          }}
                        >
                          {statuses.map((status) => (
                            <SwiperSlide key={status.id} className='!w-auto'>
                              <button
                                className={`px-4 py-1 text-sm font-medium border rounded-lg transition whitespace-nowrap
                                  ${
                                    statusNew === status.id
                                      ? 'border-red-500 text-red-500 bg-white'
                                      : 'border-gray-300 text-gray-400 bg-gray-100 hover:bg-gray-200'
                                  }`}
                                onClick={() => handleStatusChange(status.id)}
                              >
                                {status.label}
                              </button>
                            </SwiperSlide>
                          ))}
                        </Swiper>
                      </div>

                      <button className='custom-next w-8 h-8 flex-shrink-0 flex items-center justify-center bg-white border rounded-full shadow z-10'>
                        <svg
                          className='w-4 h-4 text-gray-500'
                          fill='none'
                          stroke='currentColor'
                          viewBox='0 0 24 24'
                        >
                          <path
                            strokeLinecap='round'
                            strokeLinejoin='round'
                            strokeWidth={2}
                            d='M9 5l7 7-7 7'
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div className='flex flex-row items-center justify-between mb-2 p-2'>
                <div className='flex flex-col gap-2 pb-2'>
                  {listSites?.length > 0 ? (
                    <select
                      value={siteFilter}
                      onChange={handleSiteFilterChange}
                      className='form-input'
                    >
                      <option value=''>Pilih Site</option>
                      {listSites.map((site) => (
                        <option value={site} key={site}>
                          {site}
                        </option>
                      ))}
                    </select>
                  ) : (
                    <div></div>
                  )}

                  <form className='flex gap-x-1' onSubmit={handleSubmit}>
                    <input
                      type='text'
                      className='form-input'
                      placeholder='Cari Transaksi...'
                      value={inputQuery}
                      onChange={(e) => setInputQuery(e.target.value)}
                    />
                    <button
                      className='btn-light bg-transparent px-3'
                      type='submit'
                    >
                      <MagnifyingGlassIcon className='w-6' />
                    </button>
                  </form>
                </div>

                <div className='flex flex-row gap-4 items-center justify-center'>
                  <p>
                    Menampilkan {startItem}-
                    {endItem
                      ? endItem
                      : transactions?.data?.saleOrderTotal
                      ? transactions?.data?.saleOrderTotal
                      : limitNew * pageNew}{' '}
                    dari{' '}
                    {transactions?.data?.saleOrderTotal
                      ? transactions?.data?.saleOrderTotal
                      : limitNew * pageNew}
                  </p>
                  <select
                    id='limitSelect'
                    value={limitNew}
                    onChange={(e) => {
                      setLimitNew(Number(e.target.value));
                      setPageNew(1);
                    }}
                    className='border p-2'
                  >
                    <option value={10}>10</option>
                    <option value={15}>15</option>
                    <option value={20}>20</option>
                    <option value={transactions?.data?.saleOrderTotal}>
                      Semua
                    </option>
                  </select>

                  <div ref={calendarRef} className='relative inline-block'>
                    <button
                      type='button'
                      className='p-2 w-auto h-auto cursor-pointer border hover:bg-gray-100 rounded transition duration-150 ease-in-out flex items-center justify-center'
                      onClick={() => setIsOpenCalender((prev) => !prev)}
                    >
                      <span className='text-nowrap px-1 truncate flex items-center gap-1'>
                        {state[0]?.startDate ? (
                          `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}`
                        ) : (
                          <Calendar size={16} className='text-gray-500' />
                        )}
                      </span>
                    </button>
                    {isOpenCalender && (
                      <div className='absolute right-10 mt-2 bg-white p-4 rounded shadow-lg z-50'>
                        <button
                          onClick={() => setIsOpenCalender(false)}
                          className='absolute top-2 right-2 text-gray-600 hover:text-black text-xl font-bold'
                        >
                          &times;
                        </button>
                        <DateRangePicker
                          onChange={(item) => setState([item.selection])}
                          showSelectionPreview={false}
                          maxDate={new Date()}
                          moveRangeOnFirstSelection={false}
                          months={1}
                          ranges={state}
                          className='w-full'
                        />
                        <style>{`
                          .rdrCalendarWrapper{display:flex;flex-direction:column;}
                          .rdrDateRangePickerWrapper{display:flex;flex-direction:column;}
                          .rdrDefinedRangesWrapper{order:-1;width:fit-content;}
                          .rdrStaticRanges{flex-direction:row;margin-right:2px;}
                          .rdrInputRanges{display:none !important;}
                          .rdrStaticRangeLabel{padding:10px 10px;}
                          .rdrMonth{width:-moz-available;}
                        `}</style>
                        <div className='flex flex-row justify-end gap-3 mt-2'>
                          <button
                            className='px-4 py-1 bg-red-500 text-white rounded'
                            onClick={handleReset}
                          >
                            Reset
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>

            <div className='flex justify-center items-center'>
              {!transactions.isLoading &&
                transactions?.data?.saleOrders?.length == 0 && (
                  <div className='justify-center p-4'>
                    <p className='text-gray-500 text-center '>
                      Tidak Ada Transaksi
                    </p>
                  </div>
                )}

              {transactions.isLoading && (
                <div className='flex justify-center items-center my-2'>
                  <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
                </div>
              )}

              {!transactions.isLoading &&
                transactions &&
                transactions.data?.saleOrders?.length > 0 && (
                  <div className='flex flex-col gap-4 w-full'>
                    {transactions.data.saleOrders.map((saleOrder, index) => (
                      <div
                        key={index}
                        className='border py-2 px-4 hover:border-red-500 w-full rounded-lg data-item'
                      >
                        <Link
                          href={`${router.pathname}/${saleOrder?.id}`}
                          className='hover:border-red-500 block w-full'
                        >
                          <div className='flex flex-row justify-between items-center py-2'>
                            <div className='flex justify-center gap-3'>
                              <TransactionStatusBadge
                                status={saleOrder.status}
                              />
                              <p className='text-red-500'>{saleOrder.name}</p>
                              <p className='text-black'>
                                Salesperson:{' '}
                                <span className='font-semibold'>
                                  {saleOrder.sales}
                                </span>
                              </p>
                            </div>
                            <div className='text-black'>
                              Tanggal Pesanan:{' '}
                              <span className='font-semibold'>
                                {formatDate(
                                  saleOrder.dateOrder.split(' ')[0]
                                ) || '-'}
                              </span>
                            </div>
                          </div>

                          <hr className='mt-3 mb-3 border border-gray-100' />

                          <div className='flex flex-row gap-2 justify-between items-center '>
                            <div className='flex justify-start w-3/4 flex-col gap-2'>
                              <div className='flex gap-2'>
                                <div className='min-w-36 max-w-36'>
                                  <Image
                                    src={saleOrder.products[0]?.parent?.image}
                                    alt={saleOrder.products[0]?.name}
                                    className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
                                  />
                                </div>
                                <div className='flex flex-col gap-3 justify-start truncate w-full'>
                                  <p className='flex flex-row gap-2'>
                                    <span className='text-sm text-black'>
                                      Nomor PO:
                                    </span>
                                    <span className='text-sm text-red-500 font-semibold'>
                                      {saleOrder.purchaseOrderName || '-'}
                                    </span>
                                  </p>
                                  <p className='line-clamp-2 leading-6 tracking-wide opacity-90 !text-gray_r-12 font-semibold text-nowrap '>
                                    {saleOrder.products[0]?.parent?.name}
                                  </p>
                                  <p className='opacity-85 !text-gray_r-12'>
                                    {saleOrder.products[0]?.quantity} x{' '}
                                    {currencyFormat(
                                      saleOrder.products[0]?.price
                                        ?.priceDiscount
                                    )}
                                  </p>
                                  <div className='flex flex-row justify-start items-center'>
                                    {saleOrder.products?.length > 1 && (
                                      <div className='flex flex-row gap-1 justify-start items-center'>
                                        {saleOrder.products
                                          .slice(1, 4)
                                          .map((product, idx) => (
                                            <Image
                                              key={idx}
                                              src={product?.parent?.image}
                                              alt={product?.name}
                                              className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
                                            />
                                          ))}
                                        {saleOrder.products.length > 4 ? (
                                          <Link
                                            href={`${router.pathname}/${saleOrder?.id}`}
                                            className='text-red-500 text-nowrap'
                                          >
                                            +{saleOrder.products.length - 4}{' '}
                                            lihat semua produk
                                          </Link>
                                        ) : (
                                          <Link
                                            href={`${router.pathname}/${saleOrder?.id}`}
                                            className='text-red-500 text-nowrap'
                                          >
                                            Lihat semua produk
                                          </Link>
                                        )}
                                      </div>
                                    )}
                                  </div>
                                </div>
                              </div>
                              <div className='flex flex-row w-full text-nowrap gap-2 text-black'>
                                <span className='text-sm'>
                                  Pesanan dibuat oleh:
                                </span>
                                <p className='text-sm font-semibold'>
                                  {saleOrder.address.customer?.name || '-'}
                                </p>
                              </div>
                            </div>

                            <div className='w-[1px] h-24 bg-gray-300'></div>

                            <div className='w-1/4 flex flex-col gap-2 items-center justify-center text-center pl-5'>
                              <div className='flex flex-col text-black'>
                                <p className='text-sm'>Total Harga</p>
                                <p className='font-bold text-lg'>
                                  {currencyFormat(saleOrder.amountTotal)}
                                </p>
                              </div>

                              {!isUnpaid(saleOrder.status) && (
                                <button
                                  type='button'
                                  onClick={(e) => {
                                    e.preventDefault();
                                    e.stopPropagation();
                                    handleBuyBack(saleOrder.products);
                                  }}
                                  className='w-full py-2 btn-solid-red text-nowrap rounded-md'
                                >
                                  Beli Lagi
                                </button>
                              )}

                              {/* Bayar Sekarang: hanya kalau eligible */}
                              {saleOrder?.eligibleContinue && (
                                <button
                                  type='button'
                                  disabled={contLoadingId === saleOrder.id}
                                  onClick={(e) => {
                                    e.preventDefault();
                                    e.stopPropagation();
                                    handleContinuePayment(saleOrder);
                                  }}
                                  className='w-full py-2 text-nowrap border border-red-500 text-red-500 rounded-md disabled:opacity-60'
                                >
                                  {contLoadingId === saleOrder.id
                                    ? 'Memproses…'
                                    : 'Bayar Sekarang'}
                                </button>
                              )}
                            </div>
                          </div>
                        </Link>
                      </div>
                    ))}
                  </div>
                )}
            </div>

            <Pagination
              pageCount={pageCount}
              currentPage={parseInt(pageNew)}
              url={`${router.pathname}?${toQuery(_.omit(query, ['page']))}`}
              className='mt-2 mb-2'
            />
          </div>
        </div>
      </DesktopView>
    </>
  );
};

export default Transactions;