"use client";

import { useCallback, useEffect, useState } from "react";
import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
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";
import InventoryAdjustDialog from "./inventory-adjust-dialog";

type Warehouse = {
  _id: string;
  name: string;
  code: string;
  address?: string;
  active?: boolean;
  isDefault?: boolean;
};

export default function WarehousesAdmin() {
  const ready = useRequireSuperAdmin();
  const [loading, setLoading] = useState(true);
  const [rows, setRows] = useState<Warehouse[]>([]);
  const [busy, setBusy] = useState(false);
  const [adjustOpen, setAdjustOpen] = useState(false);
  const [adjustWh, setAdjustWh] = useState<string | undefined>();
  const [form, setForm] = useState({
    name: "",
    code: "",
    address: "",
    isDefault: false,
  });

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

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

  const create = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    try {
      await DataService.post("/admin/warehouses", {
        name: form.name.trim(),
        code: form.code.trim(),
        address: form.address.trim(),
        isDefault: form.isDefault || rows.length === 0,
        active: true,
      });
      toast.success("Warehouse created");
      setForm({ name: "", code: "", address: "", isDefault: false });
      load();
    } catch (err: unknown) {
      toast.error(getApiErrorMessage(err, "Could not create warehouse"));
    } finally {
      setBusy(false);
    }
  };

  const setDefault = async (id: string) => {
    try {
      await DataService.post(`/admin/warehouses/${id}/set-default`);
      toast.success("Default warehouse updated");
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not set default"));
    }
  };

  const toggleActive = async (row: Warehouse) => {
    try {
      await DataService.patch(`/admin/warehouses/${row._id}`, { active: !row.active });
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not update"));
    }
  };

  const remove = async (row: Warehouse) => {
    if (!confirm(`Delete warehouse ${row.name}?`)) return;
    try {
      await DataService.delete(`/admin/warehouses/${row._id}`);
      toast.success("Deleted");
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not delete"));
    }
  };

  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="Warehouses" />
          <p className="text-sm text-gray-500">
            Sales deduct from the default warehouse. Creating the first warehouse migrates existing
            product stock into it.
          </p>
        </div>
        <Button
          type="button"
          onClick={() => {
            setAdjustWh(undefined);
            setAdjustOpen(true);
          }}
        >
          Adjust stock
        </Button>
      </div>

      <form onSubmit={create} className="grid gap-3 rounded-md border bg-white p-4 md:grid-cols-2">
        <div className="grid gap-2">
          <Label htmlFor="wh-name">Name</Label>
          <Input
            id="wh-name"
            value={form.name}
            onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
            required
          />
        </div>
        <div className="grid gap-2">
          <Label htmlFor="wh-code">Code</Label>
          <Input
            id="wh-code"
            value={form.code}
            onChange={(e) => setForm((f) => ({ ...f, code: e.target.value }))}
            required
          />
        </div>
        <div className="grid gap-2 md:col-span-2">
          <Label htmlFor="wh-address">Address</Label>
          <Input
            id="wh-address"
            value={form.address}
            onChange={(e) => setForm((f) => ({ ...f, address: e.target.value }))}
          />
        </div>
        <label className="flex items-center gap-2 text-sm md:col-span-2">
          <input
            type="checkbox"
            checked={form.isDefault || rows.length === 0}
            onChange={(e) => setForm((f) => ({ ...f, isDefault: e.target.checked }))}
            disabled={rows.length === 0}
          />
          Set as default (sales warehouse)
        </label>
        <div className="md:col-span-2">
          <Button type="submit" disabled={busy}>
            {busy ? "Creating…" : "Create warehouse"}
          </Button>
        </div>
      </form>

      <div className="rounded-md border bg-white">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Name</TableHead>
              <TableHead>Code</TableHead>
              <TableHead>Address</TableHead>
              <TableHead>Status</TableHead>
              <TableHead />
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.length === 0 ? (
              <TableRow>
                <TableCell colSpan={5} className="text-center text-gray-400">
                  No warehouses yet.
                </TableCell>
              </TableRow>
            ) : (
              rows.map((r) => (
                <TableRow key={r._id}>
                  <TableCell>
                    {r.name}
                    {r.isDefault ? (
                      <span className="ml-2 text-xs font-medium text-emerald-600">default</span>
                    ) : null}
                  </TableCell>
                  <TableCell className="font-mono">{r.code}</TableCell>
                  <TableCell className="max-w-[220px] truncate text-sm text-gray-600">
                    {r.address || "—"}
                  </TableCell>
                  <TableCell>{r.active === false ? "Inactive" : "Active"}</TableCell>
                  <TableCell className="space-x-2 text-right">
                    {!r.isDefault ? (
                      <Button type="button" size="sm" variant="outline" onClick={() => setDefault(r._id)}>
                        Set default
                      </Button>
                    ) : null}
                    <Button
                      type="button"
                      size="sm"
                      variant="outline"
                      onClick={() => {
                        setAdjustWh(r._id);
                        setAdjustOpen(true);
                      }}
                    >
                      Adjust
                    </Button>
                    <Button type="button" size="sm" variant="outline" onClick={() => toggleActive(r)}>
                      {r.active === false ? "Activate" : "Deactivate"}
                    </Button>
                    <Button type="button" size="sm" variant="outline" onClick={() => remove(r)}>
                      Delete
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      <InventoryAdjustDialog
        open={adjustOpen}
        onOpenChange={setAdjustOpen}
        defaultWarehouseId={adjustWh}
        onDone={load}
      />
    </div>
  );
}