"use client";
import { useResultStore } from "@/common/stores/useResultStore";
import { StockOpnameRes } from "@/common/types/stockOpname";
import { Badge, Pagination, Spacer } 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";

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

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

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

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

  return (
    <>
      <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 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="border-t border-neutral-200">
                  <td className={styles.td}>
                    <div className={clsxm("w-full rounded-lg mr-1 mt-1.5 p-1 text-xs text-white whitespace-nowrap", {
                      "bg-danger-600": stockOpname.isDifferent,
                      "bg-success-600": !stockOpname.isDifferent,
                    })}>
                      {stockOpname.isDifferent ? 'Tidak Sesuai' : 'Sesuai'}
                    </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}>
                    {stockOpname.quantity.COUNT1 || '-'}
                  </td>
                  <td className={styles.td}>
                    {stockOpname.quantity.COUNT2 || '-'}
                  </td>
                  <td className={styles.td}>
                    {stockOpname.quantity.VERIFICATION || '-'}
                  </td>
                  <td className={styles.td}>
                    {stockOpname.onhandQty}
                  </td>
                  <td className={styles.td}>
                    {stockOpname.differenceQty}
                  </td>
                </tr>

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

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