"use client";
import { useResultStore } from "@/common/stores/useResultStore";
import { StockOpnameRes } from "@/common/types/stockOpname";
import { Button, Pagination, Skeleton, Spacer, Spinner } from "@nextui-org/react"
import { useQuery } from "@tanstack/react-query";
import { useSearchParams } from "next/navigation";
import { useRouter } from "next/navigation";
import styles from "./table.module.css"
import clsxm from "@/common/libs/clsxm";
import DetailRow from "./DetailRow";
import { useDebounce } from "usehooks-ts";
import getClientCredential from "@/common/libs/getClientCredential";
import { SHOWING_SELECTIONS } from "@/common/constants/result";
import Link from "next/link";
import { useState } from "react";
import moment from "moment";

const Table = () => {
  const credential = getClientCredential()

  const params = useSearchParams()
  const router = useRouter()
  const page = params.get('page') ?? '1'

  const { filter: { company, search, show } } = useResultStore()
  const debouncedSearch = useDebounce(search, 500)

  const stockOpnames = useQuery({
    queryKey: ['stockOpnames', company, debouncedSearch, page, show],
    queryFn: async () => {
      const searchParams = new URLSearchParams()
      if (!company) return null
      searchParams.set('companyId', company)

      const showValue = SHOWING_SELECTIONS.find((item) => item.key === show)?.value || ''
      searchParams.set('show', showValue);

      if (debouncedSearch) searchParams.set('search', debouncedSearch)

      searchParams.set('page', page);

      return await fetch(`/api/stock-opname?${searchParams}`)
        .then(res => res.json())
    },
  })

  const { filter } = useResultStore()

  const [exportLoad, setExportLoad] = useState<boolean>(false)

  const exportResult = async () => {
    setExportLoad(true)
    const response = await fetch(`/api/stock-opname/export?companyId=${filter.company}`)
    const buffer = await response.arrayBuffer()
    console.log({ type: response.headers.get('type') });

    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `export_${moment().format('MM_DD_HH_ss')}.xlsx`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    setExportLoad(false)
  }

  return (
    <>
      <div className="flex">
        <Button type="button" onPress={exportResult} disabled={exportLoad} variant="flat" className="ml-auto mb-4">
          {exportLoad ? <><Spinner size="sm" />Exporting...</> : 'Export'}
        </Button>
      </div>

      <div className="w-full overflow-auto pb-4">
        <table className="w-full">
          <thead className={styles.thead}>
            <th className={styles.th}>STATUS</th>
            <th className={clsxm(styles.th, '!text-left')}>NAMA PRODUK</th>
            <th className={styles.th}>TIM HITUNG 1</th>
            <th className={styles.th}>TIM HITUNG 2</th>
            <th className={styles.th}>TIM HITUNG 3</th>
            <th className={styles.th}>TIM VERIFIKASI</th>
            <th className={styles.th}>ON-HAND QTY</th>
            <th className={styles.th}>GUDANG SELISIH</th>
          </thead>
          <tbody className={styles.tbody}>
            {stockOpnames.data?.result.map((stockOpname: StockOpnameRes['result']) => (
              <>
                <tr key={stockOpname.id} className={clsxm("border-t border-neutral-200", {
                  "text-danger-600": stockOpname.isDifferent,
                  "text-success-600": !stockOpname.isDifferent
                })}
                >
                  <td className={styles.td}>
                    <div className={clsxm("w-full rounded-lg mr-1 p-1 text-xs text-white whitespace-nowrap", {
                      "bg-danger-600": stockOpname.isDifferent,
                      "bg-success-600": !stockOpname.isDifferent,
                    })}>
                      {stockOpname.isDifferent ? 'Selisih' : 'Aman'}
                    </div>
                  </td>
                  <td className={clsxm(styles.td, '!text-left flex min-w-[250px]')}>
                    {stockOpname.itemCode ? `[${stockOpname.itemCode}] ` : ''}
                    {stockOpname.name}
                    {stockOpname.barcode ? ` [${stockOpname.barcode}]` : ''}
                  </td>
                  <td className={styles.td}>
                    {credential?.team == 'VERIFICATION' && typeof stockOpname.quantity.COUNT1 === 'number' ? stockOpname.quantity.COUNT1 : '-'}
                  </td>
                  <td className={styles.td}>
                    {credential?.team == 'VERIFICATION' && typeof stockOpname.quantity.COUNT2 === 'number' ? stockOpname.quantity.COUNT2 : '-'}
                  </td>
                  <td className={styles.td}>
                    {credential?.team == 'VERIFICATION' && typeof stockOpname.quantity.COUNT3 === 'number' ? stockOpname.quantity.COUNT3 : '-'}
                  </td>
                  <td className={styles.td}>
                    {credential?.team == 'VERIFICATION' && typeof stockOpname.quantity.VERIFICATION === 'number' ? stockOpname.quantity.VERIFICATION : '-'}
                  </td>
                  <td className={styles.td}>
                    {credential?.team == 'VERIFICATION' ? stockOpname.onhandQty : '-'}
                  </td>
                  <td className={styles.td}>
                    {credential?.team == 'VERIFICATION' ? stockOpname.differenceQty : '-'}
                  </td>
                </tr>

                <DetailRow productId={stockOpname.id} />
              </>
            ))}

            {stockOpnames.data?.result.length === 0 && (
              <tr>
                <td colSpan={8} className="text-center text-neutral-600 py-4">Belum ada data untuk ditampilkan</td>
              </tr>
            )}

            {stockOpnames.isLoading && (
              <tr>
                <td colSpan={8}>
                  <div className="flex flex-col gap-y-2">
                    {Array.from({ length: 6 }, (_, i) => (
                      <Skeleton className="h-8" key={i} />
                    ))}
                  </div>
                </td>
              </tr>
            )}
          </tbody>
        </table>

        <Spacer y={4} />
        <Pagination
          isCompact
          page={stockOpnames.data?.page || 1}
          total={stockOpnames.data?.totalPage || 1}
          onChange={(page) => router.push(`?page=${page}`)}
        />
      </div>
    </>
  )
}

export default Table