import {
  CheckIcon,
  ClockIcon,
  EllipsisVerticalIcon,
  MagnifyingGlassIcon,
} from '@heroicons/react/24/outline';
import { toQuery } from 'lodash-contrib';
import _ from 'lodash';
import { useRouter } from 'next/router';
import { useState } from 'react';
import useInvoices from '../../invoice/hooks/useInvoices';
import Spinner from '@/core/components/elements/Spinner/Spinner';
import Alert from '@/core/components/elements/Alert/Alert';
import Pagination from '@/core/components/elements/Pagination/Pagination';
import Link from '@/core/components/elements/Link/Link';
import currencyFormat from '@/core/utils/currencyFormat';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import {
  downloadInvoice,
  downloadTaxInvoice,
} from '../../invoice/utils/invoices';
import MobileView from '@/core/components/views/MobileView';
import DesktopView from '@/core/components/views/DesktopView';
import Menu from '@/lib/auth/components/Menu';

const Tempo = () => {
  const router = useRouter();
  const { q = '', page = 1 } = router.query;

  const limit = 15;

  const query = {
    name: q,
    offset: (page - 1) * limit,
    limit,
  };
  const { invoices } = useInvoices({ query });

  const [inputQuery, setInputQuery] = useState(q);
  const [toOthers, setToOthers] = useState(null);

  const pageCount = Math.ceil(invoices?.data?.invoiceTotal / limit);
  let pageQuery = _.omit(query, ['limit', 'offset']);
  pageQuery = _.pickBy(pageQuery, _.identity);
  pageQuery = toQuery(pageQuery);

  const handleSubmit = (e) => {
    e.preventDefault();
    router.push(`/my/invoices?q=${inputQuery}`);
  };

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

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

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

          {invoices.data?.invoices?.map((invoice, index) => (
            <div
              className='p-4 shadow border border-gray_r-3 rounded-md'
              key={index}
            >
              <div className='grid grid-cols-2'>
                <Link href={`${router.pathname}/${invoice.id}`}>
                  <span className='text-caption-2 text-gray_r-11'>
                    No. Invoice
                  </span>
                  <h2 className='text-danger-500 mt-1'>{invoice.name}</h2>
                </Link>
                <div className='flex gap-x-1 justify-end'>
                  {invoice.amountResidual > 0 ? (
                    <div className='badge-solid-red h-fit ml-auto'>
                      Belum Lunas
                    </div>
                  ) : (
                    <div className='badge-solid-green h-fit ml-auto'>Lunas</div>
                  )}
                  <EllipsisVerticalIcon
                    className='w-5 h-5'
                    onClick={() => setToOthers(invoice)}
                  />
                </div>
              </div>
              <Link href={`${router.pathname}/${invoice.id}`}>
                <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
                  <p>{invoice.invoiceDate}</p>
                  <p className='text-right'>{invoice.paymentTerm}</p>
                </div>
                <hr className='my-3' />
                <div className='grid grid-cols-2'>
                  <div>
                    <span className='text-caption-2 text-gray_r-11'>
                      No. Purchase Order
                    </span>
                    <p className='mt-1 font-medium text-gray_r-12'>
                      {invoice.purchaseOrderName || '-'}
                    </p>
                  </div>
                  <div className='text-right'>
                    <span className='text-caption-2 text-gray_r-11'>
                      Total Invoice
                    </span>
                    <p className='mt-1 font-medium text-gray_r-12'>
                      {currencyFormat(invoice.amountTotal)}
                    </p>
                  </div>
                </div>
              </Link>
              {invoice.efaktur ? (
                <div className='badge-green h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
                  <CheckIcon className='w-4 stroke-2' />
                  Faktur Pajak
                </div>
              ) : (
                <div className='badge-red h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
                  <ClockIcon className='w-4 stroke-2' />
                  Faktur Pajak
                </div>
              )}
            </div>
          ))}

          <Pagination
            pageCount={pageCount}
            currentPage={parseInt(page)}
            url={`/my/invoices${pageQuery}`}
            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'
                onClick={() => {
                  downloadInvoice(toOthers);
                  setToOthers(null);
                }}
              >
                Download Invoice
              </button>
              <button
                className='text-left disabled:opacity-60'
                disabled={!toOthers?.efaktur}
                onClick={() => {
                  downloadTaxInvoice(toOthers);
                  setToOthers(null);
                }}
              >
                Download Faktur Pajak
              </button>
            </div>
          </BottomPopup>
        </div>
      </MobileView>

      <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 flex-col mb-6 items-start justify-start'>
              <h1 className='text-title-sm font-semibold'>Pembayaran Tempo</h1>
              <p>
                Jenis Tempo Pembayaran Anda adalah :{' '}
                <span className='badge-solid-green px-2'>7 Hari</span>
              </p>
            </div>
            <div className='flex mb-6 items-center justify-between'>
              <form className='flex gap-x-2' onSubmit={handleSubmit}>
                <input
                  type='text'
                  className='form-input'
                  placeholder='Cari Invoice...'
                  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>

            <table className='table-data'>
              <thead>
                <tr>
                  <th>No. Invoice</th>
                  <th>No. PO</th>
                  <th>Tanggal</th>
                  <th className='!text-left'>Salesperson</th>
                  <th>Status</th>
                  <th className='!text-left'>Total</th>
                </tr>
              </thead>
              <tbody>
                {invoices.isLoading && (
                  <tr>
                    <td colSpan={6}>
                      <div className='flex justify-center my-2'>
                        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
                      </div>
                    </td>
                  </tr>
                )}
                {!invoices.isLoading &&
                  (!invoices?.data?.invoices ||
                    invoices?.data?.invoices?.length == 0) && (
                    <tr>
                      <td colSpan={6}>Tidak ada invoice</td>
                    </tr>
                  )}
                {invoices.data?.invoices?.map((invoice) => (
                  <tr key={invoice.id}>
                    <td>
                      <Link href={`${router.pathname}/${invoice.id}`}>
                        {invoice.name}
                      </Link>
                    </td>
                    <td>{invoice.purchaseOrderName || '-'}</td>
                    <td>{invoice.invoiceDate}</td>
                    <td className='!text-left'>{invoice.sales}</td>
                    <td>
                      {invoice.amountResidual > 0 ? (
                        <div className='badge-solid-red h-fit mx-auto'>
                          Belum Lunas
                        </div>
                      ) : (
                        <div className='badge-solid-green h-fit mx-auto'>
                          Lunas
                        </div>
                      )}
                    </td>
                    <td className='!text-left'>
                      {currencyFormat(invoice.amountTotal)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>

            <Pagination
              pageCount={pageCount}
              currentPage={parseInt(page)}
              url={`/my/invoices${pageQuery}`}
              className='mt-2 mb-2'
            />
          </div>
        </div>
      </DesktopView>
    </>
  );
};

export default Tempo;