"use client";

import { useEffect, useMemo, useState } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { formatNumber } from "@/app/components/formatNumber";
import StockOpnameCompareTable from "./StockOpnameCompareTable";

export default function StockOpnameComparePage() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const ids = useMemo(() => {
    const raw = searchParams.get("ids");
    return raw ? raw.split(",").map(Number) : [];
  }, [searchParams]);

    async function handleExportExcel() {
        const XLSX = await import("xlsx");
        const { saveAs } = await import("file-saver");

        const items = data.items || [];
        const locations = data.locations || [];

        const totalSystemQty = items.reduce(
            (a: number, b: any) => a + Number(b.system_qty || 0),
            0
        );

        const totalOpnameQty = items.reduce(
            (a: number, b: any) => a + Number(b.opname_qty || 0),
            0
        );

        const totalVariance = items.reduce(
            (a: number, b: any) => a + Number(b.variance || 0),
            0
        );

        const locationName = locations.length
            ? locations.map((x: any) => x.name).join(", ")
            : "Unknown Location";

        const warehouseSlug = locations.length
            ? locations
                .map((x: any) =>
                x.name
                    .toLowerCase()
                    .replace(/\s+/g, "-")
                    .replace(/[^\w-]/g, "")
                )
                .join("_")
            : "unknown-location";

        const rows = items.map((i: any, idx: number) => ({
            NO: idx + 1,
            SKU: i.sku || "-",
            NAMA_ITEM: i.name || "-",
            SYSTEM_QTY: Number(i.system_qty || 0),
            OPNAME_QTY: Number(i.opname_qty || 0),
            VARIANCE: Number(i.variance || 0),
        }));

        const worksheet = XLSX.utils.json_to_sheet([]);

        XLSX.utils.sheet_add_aoa(
            worksheet,
            [
            ["COMPARE STOCK OPNAME REPORT"],
            [],
            ["", "", "GUDANG"],
            ...locations.map((loc: any, idx: number) => ["", "", 
                `${idx + 1}. ${loc.name}`,
            ]),
            [],
            ["", "", "Di Export Tanggal", new Date().toLocaleString("id-ID")],
            ["", "", "Jumlah Gudang", locations.length],
            [],
            ["", "", "SUMMARY"],
            ["", "", "Total Items", formatNumber(data.total_items)],
            ["", "", "System Items", formatNumber(data.total_system_items)],
            ["", "", "Opname Items", formatNumber(data.total_opname_items)],
            ["", "", "Mismatch Items", formatNumber(data.missingInSystem)],
            ["", "", "Total Qty System", formatNumber(totalSystemQty)],
            ["", "", "Total Qty Opname", formatNumber(totalOpnameQty)],
            ["", "", "Total Variance", formatNumber(totalVariance)],
            [],
            ],
            {
            origin: "A1",
            }
        );

        const tableStartRow = locations.length + 20;

        XLSX.utils.sheet_add_json(worksheet, rows, {
            origin: `A${tableStartRow}`,
            skipHeader: false,
        });

        worksheet["!cols"] = [
            { wch: 8 },
            { wch: 24 },
            { wch: 65 },
            { wch: 18 },
            { wch: 18 },
            { wch: 18 },
        ];


        worksheet["!rows"] = [
            { hpt: 34 },
        ];

        worksheet["!merges"] = [
            {
            s: { r: 0, c: 0 },
            e: { r: 0, c: 5 },
            },
        ];

        const workbook = XLSX.utils.book_new();

        XLSX.utils.book_append_sheet(
            workbook,
            worksheet,
            "Compare Stock Opname"
        );

        const excelBuffer = XLSX.write(workbook, {
            bookType: "xlsx",
            type: "array",
        });

        const blob = new Blob([excelBuffer], {
            type: "application/octet-stream",
        });

        const date = new Date().toISOString().split("T")[0];

        saveAs(
            blob,
            `compare-stock-opname-${warehouseSlug}-${date}.xlsx`
        );
    }


  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<any>(null);

  async function fetchData() {
    try {
      setLoading(true);

      const res = await fetch(`/api/stock-opname/compare`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ ids }),
      });

      const json = await res.json();
      console.log("JSonnya: ", json);
      setData(json.data);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    if (ids.length) fetchData();
  }, [ids]);

  if (loading) {
    return <div className="p-6 font-bold">Loading compare...</div>;
  }

  return (
    <div className="p-6 space-y-4">

<div className="flex justify-between items-center flex-wrap gap-3">

        <button
            onClick={() => router.back()}
            className="px-4 py-2 bg-white shadow-md rounded-xl border hover:shadow-lg transition"
        >
            ← Back
        </button>

        <button
            onClick={handleExportExcel}
            className="px-4 py-2 bg-emerald-600 text-white rounded-xl shadow-lg hover:shadow-2xl hover:-translate-y-1 transition"
        >
            Export Excel
        </button>

        </div>
      <h1 className="text-2xl font-bold">
        Compare Multi Stock Opname
      </h1>


     <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">

            {/* TOTAL ITEMS */}
            <div className="bg-white rounded-2xl p-4 shadow-md border border-slate-100 hover:shadow-xl transition transform hover:-translate-y-1">
                <div className="text-xs text-slate-500">Total Items (Compare)</div>
                <div className="text-2xl font-bold text-slate-800">
                {formatNumber(data.total_items)}
                </div>
            </div>

            {/* SYSTEM ITEMS */}
            <div className="bg-white rounded-2xl p-4 shadow-md border border-sky-100 hover:shadow-xl transition transform hover:-translate-y-1">
                <div className="text-xs text-slate-500">System Items</div>
                <div className="text-2xl font-bold text-sky-700">
                {formatNumber(data.total_system_items)}
                </div>
            </div>

            {/* OPNAME ITEMS */}
            <div className="bg-white rounded-2xl p-4 shadow-md border border-amber-100 hover:shadow-xl transition transform hover:-translate-y-1">
                <div className="text-xs text-slate-500">Opname Items</div>
                <div className="text-2xl font-bold text-amber-700">
                {formatNumber(data.total_opname_items)}
                </div>
            </div>

            {/* MISSING */}
            <div className="bg-white rounded-2xl p-4 shadow-md border border-red-100 hover:shadow-xl transition transform hover:-translate-y-1">
                <div className="text-xs text-slate-500">Mismatch Items</div>

                <div className="flex flex-col gap-1 mt-1 text-sm">
                {/* <div className="text-red-600">
                    System → Opname: {formatNumber(data.missingInOpname)}
                </div> */}
                <div className="text-sky-600">
                    Opname → System: {formatNumber(data.missingInSystem)}
                </div>
                </div>
            </div>

    </div>
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">

    <div className="bg-linear-to-br from-sky-50 to-white rounded-2xl p-4 shadow-md border border-sky-100">
        <div className="text-xs text-slate-500">Total Qty System</div>
        <div className="text-xl font-bold text-sky-700">
        {formatNumber(
            data.items.reduce((a: number, b: any) => a + Number(b.system_qty || 0), 0)
        )}
        </div>
    </div>

    <div className="bg-linear-to-br from-amber-50 to-white rounded-2xl p-4 shadow-md border border-amber-100">
        <div className="text-xs text-slate-500">Total Qty Opname</div>
        <div className="text-xl font-bold text-amber-700">
        {formatNumber(
            data.items.reduce((a: number, b: any) => a + Number(b.opname_qty || 0), 0)
        )}
        </div>
    </div>

    <div className="bg-linear-to-br from-red-50 to-white rounded-2xl p-4 shadow-md border border-red-100">
        <div className="text-xs text-slate-500">Total Selisih</div>
        <div className="text-xl font-bold text-red-600">
        {formatNumber(
            data.items.reduce((a: number, b: any) => a + Number(b.variance || 0), 0)
        )}
        </div>
    </div>

    </div>

      <StockOpnameCompareTable items={data.items} />
    </div>
  );
}