"use client";

import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { Button } from "@/components/ui/Button";
import { apiGet, apiPut } from "@/lib/api";

interface PermGroup {
  key: string;
  label: string;
  permissions: Array<{ id: number; name: string; label: string }>;
}

interface RoleDetail {
  id: number;
  label_fa: string;
  permissions: string[];
}

export default function RolePermissionsPage() {
  const params = useParams<{ id: string }>();
  const router = useRouter();
  const [role, setRole] = useState<RoleDetail | null>(null);
  const [groups, setGroups] = useState<PermGroup[]>([]);
  const [selected, setSelected] = useState<Set<string>>(new Set());

  useEffect(() => {
    Promise.all([
      apiGet<RoleDetail>(`/roles/${params.id}`),
      apiGet<PermGroup[]>("/permissions"),
    ]).then(([r, g]) => {
      setRole(r);
      setGroups(g);
      setSelected(new Set(r.permissions));
    });
  }, [params.id]);

  const toggle = (name: string) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(name)) next.delete(name);
      else next.add(name);
      return next;
    });
  };

  const save = async () => {
    await apiPut(`/roles/${params.id}/permissions`, { permissions: Array.from(selected) });
    router.push("/roles");
  };

  if (!role) return null;

  return (
    <AppShell title="دسترسی‌های نقش" subtitle={role.label_fa} breadcrumbLabels={{ role: role.label_fa }}>
      <div className="space-y-4">
        {groups.map((g) => (
          <section key={g.key} className="rounded-2xl border bg-white p-4 shadow-card">
            <h3 className="mb-3 font-bold text-primary">{g.label}</h3>
            <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
              {g.permissions.map((p) => (
                <label key={p.name} className="flex items-center gap-2 text-sm">
                  <input type="checkbox" checked={selected.has(p.name)} onChange={() => toggle(p.name)} />
                  {p.label} ({p.name})
                </label>
              ))}
            </div>
          </section>
        ))}
      </div>
      <div className="mt-4 flex gap-2">
        <Button onClick={save}>ثبت</Button>
        <Button variant="secondary" onClick={() => router.push("/roles")}>بازگشت</Button>
      </div>
    </AppShell>
  );
}