import { useRouter } from 'next/router'
import { useState } from 'react'
import { toast } from 'react-hot-toast'
import { EllipsisVerticalIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline'

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'

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

  const limit = 10

  const query = {
    name: q,
    offset: (page - 1) * limit,
    limit
  }
  const { transactions } = useTransactions({ query })

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

  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 / limit)
  let pageQuery = _.omit(query, ['limit', 'offset'])
  pageQuery = _.pickBy(pageQuery, _.identity)
  pageQuery = toQuery(pageQuery)

  const handleSubmit = (e) => {
    e.preventDefault()
    router.push(`/my/transactions?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 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>

          {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 data transaksi
            </Alert>
          )}

          {transactions.data?.saleOrders?.map((saleOrder, index) => (
            <div className='p-4 shadow border border-gray_r-3 rounded-md' key={index}>
              <div className='grid grid-cols-2'>
                <Link href={`/my/transaction/${saleOrder.id}`}>
                  <span className='text-caption-2 text-gray_r-11'>No. Transaksi</span>
                  <h2 className='text-red_r-11 mt-1'>{saleOrder.name}</h2>
                </Link>
                <div className='flex gap-x-1 justify-end'>
                  <TransactionStatusBadge status={saleOrder.status} />
                  <EllipsisVerticalIcon
                    className='w-5 h-5'
                    onClick={() => setToOthers(saleOrder)}
                  />
                </div>
              </div>
              <Link href={`/my/transaction/${saleOrder.id}`}>
                <div className='grid grid-cols-2 mt-3'>
                  <div>
                    <span className='text-caption-2 text-gray_r-11'>No. Purchase Order</span>
                    <p className='mt-1 font-medium text-gray_r-12'>
                      {saleOrder.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'>
                      {saleOrder.invoiceCount} Invoice
                    </p>
                  </div>
                </div>
                <div className='grid grid-cols-2 mt-3'>
                  <div>
                    <span className='text-caption-2 text-gray_r-11'>Sales</span>
                    <p className='mt-1 font-medium text-gray_r-12'>{saleOrder.sales}</p>
                  </div>
                  <div className='text-right'>
                    <span className='text-caption-2 text-gray_r-11'>Total Harga</span>
                    <p className='mt-1 font-medium text-gray_r-12'>
                      {currencyFormat(saleOrder.amountTotal)}
                    </p>
                  </div>
                </div>
              </Link>
            </div>
          ))}

          <Pagination
            pageCount={pageCount}
            currentPage={parseInt(page)}
            url={`/my/transactions${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'
                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>

      <DesktopView>
        <div className='container mx-auto flex py-10'>
          <div className='w-3/12'></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</h1>
              <form className='flex gap-x-2' 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>
            <table className='table-data w-full'>
              <thead>
                <tr>
                  <th>No. Transaksi</th>
                  <th>Tanggal</th>
                  <th className='!text-left'>Sales Person</th>
                  <th className='!text-left'>Total</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {transactions.data?.saleOrders?.map((saleOrder) => (
                  <tr key={saleOrder.id}>
                    <td>
                      <Link href={`/my/transaction/${saleOrder.id}`}>{saleOrder.name}</Link>
                    </td>
                    <td>-</td>
                    <td className='!text-left'>{saleOrder.sales}</td>
                    <td className='!text-left'>{currencyFormat(saleOrder.amountTotal)}</td>
                    <td>
                      <div className='flex justify-center'>
                        <TransactionStatusBadge status={saleOrder.status} />
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>

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

export default Transactions