"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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import DataService from "@/config/axios";
import { useRequireSuperAdmin } from "@/hooks/use-require-super-admin";
import { getApiErrorMessage } from "@/lib/api-error";
import { toast } from "sonner";

type BillRow = {
  _id: string;
  billNumber: string;
  invoiceNumber?: string;
  status: string;
  subtotal?: number;
  billDate?: string;
  supplier?: { _id: string; name?: string };
};

export default function SupplierBillsAdmin() {
  const ready = useRequireSuperAdmin();
  const params = useParams();
  const app = params.app as string;
  const [loading, setLoading] = useState(true);
  const [rows, setRows] = useState<BillRow[]>([]);
  const [status, setStatus] = useState("all");

  const load = useCallback(async () => {
    try {
      const q = status !== "all" ? `?status=${status}` : "";
      const res = await DataService.get(`/admin/supplier-bills${q}`);
      setRows(res.data?.data || []);
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Failed to load bills"));
    } finally {
      setLoading(false);
    }
  }, [status]);

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

  const receive = async (id: string) => {
    if (!confirm("Add this bill’s items into warehouse inventory?")) return;
    try {
      await DataService.post(`/admin/supplier-bills/${id}/receive`);
      toast.success("Bill added to inventory");
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not add bill to inventory"));
    }
  };

  const cancel = async (id: string) => {
    if (!confirm("Cancel this bill? Received stock will be reversed if possible.")) return;
    try {
      await DataService.post(`/admin/supplier-bills/${id}/cancel`);
      toast.success("Bill cancelled");
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not cancel bill"));
    }
  };

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

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <MainTitle title="Supplier bills" />
          <p className="text-sm text-gray-500">
            Create purchase bills as drafts, then add them to inventory with Receive (or from
            Inventory → Add from supplier bill).
          </p>
        </div>
        <div className="flex gap-2">
          <Button type="button" variant="outline" asChild>
            <Link href={`/${app}/admin/suppliers`}>Suppliers</Link>
          </Button>
          <Button type="button" asChild>
            <Link href={`/${app}/admin/suppliers/bills/new`}>New bill</Link>
          </Button>
        </div>
      </div>

      <div className="flex items-center gap-3">
        <span className="text-sm text-gray-500">Status</span>
        <Select value={status} onValueChange={setStatus}>
          <SelectTrigger className="w-40">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All</SelectItem>
            <SelectItem value="draft">Draft</SelectItem>
            <SelectItem value="received">Received</SelectItem>
            <SelectItem value="cancelled">Cancelled</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="rounded-md border bg-white">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Bill #</TableHead>
              <TableHead>Supplier</TableHead>
              <TableHead>Invoice #</TableHead>
              <TableHead>Date</TableHead>
              <TableHead>Subtotal</TableHead>
              <TableHead>Status</TableHead>
              <TableHead />
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center text-gray-400">
                  No bills yet.
                </TableCell>
              </TableRow>
            ) : (
              rows.map((r) => (
                <TableRow key={r._id}>
                  <TableCell className="font-mono font-medium">{r.billNumber}</TableCell>
                  <TableCell>{r.supplier?.name || "—"}</TableCell>
                  <TableCell>{r.invoiceNumber || "—"}</TableCell>
                  <TableCell>
                    {r.billDate ? new Date(r.billDate).toLocaleDateString() : "—"}
                  </TableCell>
                  <TableCell>{r.subtotal ?? 0}</TableCell>
                  <TableCell className="capitalize">{r.status}</TableCell>
                  <TableCell className="space-x-2 text-right">
                    <Button type="button" size="sm" variant="outline" asChild>
                      <Link href={`/${app}/admin/suppliers/bills/${r._id}`}>
                        {r.status === "cancelled" ? "View" : "Edit"}
                      </Link>
                    </Button>
                    {r.status === "draft" ? (
                      <Button type="button" size="sm" onClick={() => receive(r._id)}>
                        Add to inventory
                      </Button>
                    ) : null}
                    {r.status !== "cancelled" ? (
                      <Button type="button" size="sm" variant="outline" onClick={() => cancel(r._id)}>
                        Cancel
                      </Button>
                    ) : null}
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}