"use client";

import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import Loading from "../components/Loading";

export default function StagingInventoryPage() {
  const [data, setData] = useState<any[]>([]);
  const [page, setPage] = useState(1);
  const [limit] = useState(20);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);

  const { data: session, status } = useSession();
  const router = useRouter();
  const currentUser = session?.user as any;

  const fetchData = async () => {
    setLoading(true);

    const res = await fetch(
      `/api/accurate?page=${page}&limit=${limit}`,
      { cache: "no-store" }
    );

    const json = await res.json();

    setData(json.data);
    setTotal(json.total);

    setLoading(false);
  };

  useEffect(() => {
    // 1. tunggu session selesai load
    if (status === "loading") return;

    // 2. kalau belum login
    if (status === "unauthenticated") {
      router.replace("/login");
      return;
    }

    const allowedRoles = ["ADMIN", "OPERATOR", "SUPERVISOR"];

    if (!allowedRoles.includes(currentUser?.role)) {
      router.replace("/satuan");
      return;
    }

    fetchData();
  }, [page, status, router]);

  const totalPages = Math.ceil(total / limit);

    // optional safety (biar tidak flash UI)
  if (!session) return null;
  
  return (
    <div className="p-6">
      {/* HEADER */}
      <div className="mb-4">
        <h1 className="text-xl font-bold text-gray-800">
          📦 Staging Inventory Raw (Accurate)
        </h1>
        <p className="text-sm text-gray-500">
          Data mentah import dari Accurate
        </p>
      </div>

      {/* TABLE WRAPPER */}
      <div className="rounded-2xl border bg-white shadow overflow-hidden">
        
        {/* SCROLL HORIZONTAL */}
        <div className="overflow-x-auto">
          <table className="min-w-750 text-xs">
            
            <thead className="bg-gray-100 text-gray-600">
              <tr>
                {[
                  "ID","No","Kategori","Kode","Nama","Jenis",
                  "Satuan","S2","R2","S3","R3","S4","R4","S5","R5",
                  "Cabang","Barcode",
                  "P","L","T","Berat",
                  "Substitusi","Catatan",
                  "Diskon",
                  "H1","H2","H3","H4","H5",
                  "Pemasok","Merek",
                  "Satuan Beli","Kontrol","Harga Beli",
                  "Min Beli","Min Stok",
                  "PPN","PPNBM","Dasar PPN",
                  "Cabang Saldo","Gudang",
                  "Qty","Satuan Saldo","Nilai",
                  "Per Tanggal",
                  "No Seri","Tipe","Exp",
                  "Persediaan","COGS","Barang Terkirim",
                  "Belum Tagih","Penjualan","Diskon","Retur Jual","Retur Beli",
                  "Grosir",
                  "K1","K2","K3","K4","K5","K6","K7","K8","K9","K10",
                  "A1","A2","A3","A4","A5","A6","A7","A8","A9","A10",
                  "T1","T2",
                  "Non Aktif","Edit Grup"
                ].map((h, i) => (
                  <th key={i} className="p-2 border whitespace-nowrap">
                    {h}
                  </th>
                ))}
              </tr>
            </thead>

            <tbody>
              {loading ? (
                <tr>
                  <td colSpan={80} className="p-6 text-center">
                    Loading...
                  </td>
                </tr>
              ) : (
                data.map((row, i) => (
                  <motion.tr
                    key={row.id}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    className="border-t hover:bg-gray-50"
                  >
                    {Object.values(row).map((val: any, idx) => (
                      <td
                        key={idx}
                        className="p-2 whitespace-nowrap border"
                      >
                        {val ?? "-"}
                      </td>
                    ))}
                  </motion.tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* PAGINATION */}
      <div className="flex justify-between items-center mt-4 text-sm">
        <button
          disabled={page <= 1}
          onClick={() => setPage(page - 1)}
          className="px-3 py-1 border rounded disabled:opacity-50"
        >
          Prev
        </button>

        <div>
          Page {page} / {totalPages}
        </div>

        <button
          disabled={page >= totalPages}
          onClick={() => setPage(page + 1)}
          className="px-3 py-1 border rounded disabled:opacity-50"
        >
          Next
        </button>
      </div>
    </div>
  );
}