"use client";

import React, { useCallback, useEffect, useState } from "react";
import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
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 { Pencil, Trash2 } from "lucide-react";

type PermRow = {
  _id: string;
  name: string;
  label: string;
  group: string;
};

export default function AdminPermissionsBlock() {
  const ready = useRequireSuperAdmin();
  const [rows, setRows] = useState<PermRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [open, setOpen] = useState(false);
  const [editing, setEditing] = useState<PermRow | null>(null);
  const [form, setForm] = useState({ name: "", label: "", group: "General" });

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

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

  const openCreate = () => {
    setEditing(null);
    setForm({ name: "", label: "", group: "General" });
    setOpen(true);
  };

  const openEdit = (p: PermRow) => {
    setEditing(p);
    setForm({ name: p.name, label: p.label || p.name, group: p.group || "General" });
    setOpen(true);
  };

  const save = async () => {
    try {
      if (editing) {
        await DataService.patch(`/admin/permissions/${editing._id}`, {
          label: form.label,
          group: form.group,
        });
        toast.success("Permission updated");
      } else {
        await DataService.post("/admin/permissions", {
          name: form.name.trim(),
          label: form.label.trim() || form.name.trim(),
          group: form.group.trim() || "General",
        });
        toast.success("Permission created");
      }
      setOpen(false);
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not save permission"));
    }
  };

  const remove = async (p: PermRow) => {
    if (!confirm(`Delete permission "${p.name}"? It will be removed from all roles.`)) return;
    try {
      await DataService.delete(`/admin/permissions/${p._id}`);
      toast.success("Permission deleted");
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not delete permission"));
    }
  };

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

  return (
    <div>
      <MainTitle title="Permissions (catalog)">
        <Button onClick={openCreate}>Add permission</Button>
      </MainTitle>

      <p className="mb-4 text-sm text-gray-600">
        Define permission keys here, then assign them to roles. Each user inherits permissions from
        their assigned role.
      </p>

      <div className="rounded-md border bg-white">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Key (name)</TableHead>
              <TableHead>Label</TableHead>
              <TableHead>Group</TableHead>
              <TableHead className="w-[100px]" />
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.length === 0 ? (
              <TableRow>
                <TableCell colSpan={4} className="text-center text-gray-400">
                  No permissions yet — add keys like <code className="rounded bg-gray-100 px-1">employees.read</code>
                </TableCell>
              </TableRow>
            ) : (
              rows.map((p) => (
                <TableRow key={p._id}>
                  <TableCell className="font-mono text-sm">{p.name}</TableCell>
                  <TableCell>{p.label}</TableCell>
                  <TableCell>{p.group}</TableCell>
                  <TableCell className="flex gap-2">
                    <Button variant="outline" size="icon" onClick={() => openEdit(p)}>
                      <Pencil className="size-4" />
                    </Button>
                    <Button variant="outline" size="icon" onClick={() => remove(p)}>
                      <Trash2 className="size-4 text-red-600" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-md">
          <DialogHeader>
            <DialogTitle>{editing ? "Edit permission" : "Add permission"}</DialogTitle>
          </DialogHeader>
          <div className="grid gap-3 py-2">
            {!editing && (
              <div className="grid gap-2">
                <Label htmlFor="pname">Key (unique)</Label>
                <Input
                  id="pname"
                  placeholder="e.g. employees.read"
                  value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                />
              </div>
            )}
            <div className="grid gap-2">
              <Label htmlFor="plabel">Label</Label>
              <Input
                id="plabel"
                value={form.label}
                onChange={(e) => setForm({ ...form, label: e.target.value })}
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="pgroup">Group</Label>
              <Input
                id="pgroup"
                value={form.group}
                onChange={(e) => setForm({ ...form, group: e.target.value })}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button onClick={save}>{editing ? "Save" : "Create"}</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}