"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import ProductThumb from "@/components/app/product-thumb";
import DataService from "@/config/axios";
import { useRequireSuperAdmin } from "@/hooks/use-require-super-admin";
import { getApiErrorMessage } from "@/lib/api-error";
import { toast } from "sonner";
import InventoryAdjustDialog from "./inventory-adjust-dialog";
import InventoryReceiveBillDialog from "./inventory-receive-bill-dialog";

type DashboardData = {
  warehouseCount: number;
  totalQty: number;
  skuCount: number;
  lowStockCount: number;
  draftBills: number;
  threshold: number;
  lowStock: {
    product?: { _id: string; title?: string; status?: string; images?: string[] };
    variantKey: string;
    quantity: number;
  }[];
  recentMovements: {
    _id: string;
    type: string;
    direction: string;
    quantity: number;
    createdAt: string;
    product?: { title?: string; images?: string[] };
    warehouse?: { name?: string; code?: string };
  }[];
  byWarehouse: {
    warehouse?: { _id: string; name?: string; code?: string; isDefault?: boolean };
    totalQty: number;
    skuCount: number;
  }[];
};

export default function InventoryDashboardAdmin() {
  const ready = useRequireSuperAdmin();
  const params = useParams();
  const app = params.app as string;
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<DashboardData | null>(null);
  const [adjustOpen, setAdjustOpen] = useState(false);
  const [receiveBillOpen, setReceiveBillOpen] = useState(false);

  const load = useCallback(async () => {
    try {
      const res = await DataService.get("/admin/inventory/dashboard");
      setData(res.data?.data || null);
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Failed to load inventory dashboard"));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (ready) load();
  }, [ready, load]);

  if (!ready || loading) {
    return <div className="rounded-md border bg-white p-8 text-center text-gray-500">Loading…</div>;
  }

  const d = data;

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <MainTitle title="Inventory" />
          <p className="text-sm text-gray-500">
            Stock overview across warehouses. Use “Add from supplier bill” to post draft purchase
            bills into inventory.
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button type="button" onClick={() => setReceiveBillOpen(true)}>
            Add from supplier bill
          </Button>
          <Button type="button" variant="outline" onClick={() => setAdjustOpen(true)}>
            Adjust stock
          </Button>
          <Button type="button" variant="outline" asChild>
            <Link href={`/${app}/admin/warehouses`}>Warehouses</Link>
          </Button>
          <Button type="button" variant="outline" asChild>
            <Link href={`/${app}/admin/suppliers`}>Suppliers & bills</Link>
          </Button>
          <Button type="button" variant="outline" asChild>
            <Link href={`/${app}/admin/inventory-history`}>History</Link>
          </Button>
        </div>
      </div>

      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
        {[
          { label: "Warehouses", value: d?.warehouseCount ?? 0 },
          { label: "Total qty", value: d?.totalQty ?? 0 },
          { label: "Stock rows", value: d?.skuCount ?? 0 },
          { label: `Low stock (≤${d?.threshold ?? 5})`, value: d?.lowStockCount ?? 0 },
          { label: "Draft bills", value: d?.draftBills ?? 0 },
        ].map((card) => (
          <div key={card.label} className="rounded-md border bg-white p-4">
            <div className="text-xs uppercase tracking-wide text-gray-500">{card.label}</div>
            <div className="mt-1 text-2xl font-semibold">{card.value}</div>
          </div>
        ))}
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        <div className="rounded-md border bg-white">
          <div className="border-b px-4 py-3 font-medium">By warehouse</div>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Warehouse</TableHead>
                <TableHead>Qty</TableHead>
                <TableHead>Rows</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {(d?.byWarehouse || []).length === 0 ? (
                <TableRow>
                  <TableCell colSpan={3} className="text-center text-gray-400">
                    No warehouse stock yet. Create a warehouse to migrate existing product stock.
                  </TableCell>
                </TableRow>
              ) : (
                (d?.byWarehouse || []).map((row, i) => (
                  <TableRow key={row.warehouse?._id || i}>
                    <TableCell>
                      {row.warehouse?.name || "—"}
                      {row.warehouse?.isDefault ? (
                        <span className="ml-2 text-xs text-emerald-600">default</span>
                      ) : null}
                    </TableCell>
                    <TableCell>{row.totalQty}</TableCell>
                    <TableCell>{row.skuCount}</TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>

        <div className="rounded-md border bg-white">
          <div className="border-b px-4 py-3 font-medium">Low stock</div>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Product</TableHead>
                <TableHead>Slot</TableHead>
                <TableHead>Qty</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {(d?.lowStock || []).length === 0 ? (
                <TableRow>
                  <TableCell colSpan={3} className="text-center text-gray-400">
                    No low-stock items.
                  </TableCell>
                </TableRow>
              ) : (
                (d?.lowStock || []).map((row, i) => (
                  <TableRow key={`${row.product?._id}-${row.variantKey}-${i}`}>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <ProductThumb src={row.product?.images?.[0]} alt={row.product?.title} />
                        <span>
                          {row.product?.title || "—"}
                          {row.product?.status === "draft" ? (
                            <span className="ml-2 text-xs text-amber-600">draft</span>
                          ) : null}
                        </span>
                      </div>
                    </TableCell>
                    <TableCell className="font-mono text-xs">{row.variantKey || "main"}</TableCell>
                    <TableCell>{row.quantity}</TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </div>

      <div className="rounded-md border bg-white">
        <div className="border-b px-4 py-3 font-medium">Recent movements</div>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>When</TableHead>
              <TableHead>Product</TableHead>
              <TableHead>Warehouse</TableHead>
              <TableHead>Type</TableHead>
              <TableHead>Qty</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {(d?.recentMovements || []).length === 0 ? (
              <TableRow>
                <TableCell colSpan={5} className="text-center text-gray-400">
                  No movements yet.
                </TableCell>
              </TableRow>
            ) : (
              (d?.recentMovements || []).map((m) => (
                <TableRow key={m._id}>
                  <TableCell className="whitespace-nowrap text-sm">
                    {m.createdAt ? new Date(m.createdAt).toLocaleString() : "—"}
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <ProductThumb src={m.product?.images?.[0]} alt={m.product?.title} />
                      <span>{m.product?.title || "—"}</span>
                    </div>
                  </TableCell>
                  <TableCell>{m.warehouse?.name || m.warehouse?.code || "—"}</TableCell>
                  <TableCell>
                    {m.type} ({m.direction})
                  </TableCell>
                  <TableCell>{m.quantity}</TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      <InventoryAdjustDialog
        open={adjustOpen}
        onOpenChange={setAdjustOpen}
        onDone={() => {
          setLoading(true);
          load();
        }}
      />
      <InventoryReceiveBillDialog
        open={receiveBillOpen}
        onOpenChange={setReceiveBillOpen}
        onDone={() => {
          setLoading(true);
          load();
        }}
      />
    </div>
  );
}