"use client";

import { useParams, useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { ListExportActions } from "@/components/export/ListExportActions";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
import { Field, Select } from "@/components/ui/Field";
import { SearchableSelect } from "@/components/ui/SearchableSelect";
import { ApiError, apiDelete, apiGet, apiPost, BranchItem } from "@/lib/api";
import { isHoldingAdmin } from "@/lib/permissions";
import { getActiveBranchId } from "@/lib/session-context";

interface RoleItem {
  id: number;
  name: string;
  label_fa: string;
}

interface AssignmentRow {
  id: number;
  role_name?: string;
  role_label: string;
  branch_name: string | null;
  can_revoke?: boolean;
}

export default function UserRolesPage() {
  const params = useParams<{ id: string }>();
  const router = useRouter();
  const userId = Number(params.id);
  const isSuperAdmin = isHoldingAdmin();
  const [userName, setUserName] = useState("");
  const [assignments, setAssignments] = useState<AssignmentRow[]>([]);
  const [roles, setRoles] = useState<RoleItem[]>([]);
  const [branches, setBranches] = useState<BranchItem[]>([]);
  const [form, setForm] = useState({
    role_id: "",
    branch_id: isSuperAdmin ? "" : String(getActiveBranchId() ?? ""),
  });
  const [error, setError] = useState<string | null>(null);
  const [deleteId, setDeleteId] = useState<number | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [listLoading, setListLoading] = useState(true);

  const load = useCallback(async () => {
    setListLoading(true);
    try {
      const assigns = await apiGet<AssignmentRow[]>(`/users/${userId}/role-assignments`);
      const roleList = await apiGet<RoleItem[]>("/roles?assignable=1");
      const branchList = await apiGet<BranchItem[]>("/branches");
      const user = await apiGet<{ name?: string; first_name?: string; last_name?: string }>(
        `/users/${userId}`,
      );
      setAssignments(assigns);
      setRoles(roleList);
      setBranches(branchList);
      setUserName(
        [user.first_name, user.last_name].filter(Boolean).join(" ") || user.name || "کاربر",
      );
      if (!isSuperAdmin && branchList.length === 1) {
        setForm((prev) => (prev.branch_id ? prev : { ...prev, branch_id: String(branchList[0].id) }));
      }
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setListLoading(false);
    }
  }, [userId, isSuperAdmin]);

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

  const assign = async () => {
    setError(null);
    try {
      await apiPost(`/users/${userId}/role-assignments`, {
        role_id: Number(form.role_id),
        branch_id: form.branch_id ? Number(form.branch_id) : null,
      });
      setForm((prev) => ({ role_id: "", branch_id: prev.branch_id }));
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در تخصیص نقش");
    }
  };

  const confirmDelete = async () => {
    if (deleteId == null) return;
    setDeleting(true);
    try {
      await apiDelete(`/users/${userId}/role-assignments/${deleteId}`);
      setDeleteId(null);
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در حذف");
    } finally {
      setDeleting(false);
    }
  };

  return (
    <AppShell title="تخصیص نقش" subtitle={userName} breadcrumbLabels={{ staff: userName }} showBack>
      {error ? <Alert tone="error">{error}</Alert> : null}
      <div className="grid gap-4 lg:grid-cols-2">
        <div className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
          <h3 className="mb-4 font-bold">افزودن نقش — {userName}</h3>
          <Field label="نقش">
            <Select value={form.role_id} onChange={(e) => setForm({ ...form, role_id: e.target.value })}>
              <option value="">انتخاب کنید</option>
              {roles.map((r) => (
                <option key={r.id} value={r.id}>{r.label_fa}</option>
              ))}
            </Select>
          </Field>
          <div className="mt-3">
            <Field label="مدرسه">
              <SearchableSelect
                value={form.branch_id}
                onChange={(branch_id) => setForm({ ...form, branch_id })}
                emptyLabel={isSuperAdmin ? "کل هلدینگ / بدون مدرسه" : "انتخاب کنید"}
                placeholder="جستجوی نام یا کد مدرسه…"
                options={branches.map((b) => ({
                  value: String(b.id),
                  label: `${b.code} — ${b.name}`,
                  keywords: `${b.name} ${b.code} ${b.id}`,
                }))}
              />
            </Field>
          </div>
          <div className="mt-4 flex gap-2">
            <Button onClick={assign} disabled={!form.role_id || (!isSuperAdmin && !form.branch_id)}>ثبت</Button>
            <Button variant="secondary" onClick={() => router.push("/staff")}>بازگشت</Button>
          </div>
        </div>

        <div className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
          <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
            <h3 className="font-bold">فهرست نقش‌های کاربر</h3>
            <ListExportActions
              exportPath={`/users/${userId}/role-assignments/export`}
              filters={{}}
              filenameBase="role-assignments-export"
              onError={setError}
            />
          </div>
          <DataTable
            loading={listLoading}
            columns={[{ key: "i", label: "#" }, { key: "role", label: "نقش" }, { key: "branch", label: "مدرسه" }, { key: "ops", label: "عملیات" }]}
          >
            {assignments.length === 0 ? (
              <DataTableEmpty colSpan={4} message="اطلاعاتی وجود ندارد!" />
            ) : (
              assignments.map((a, i) => (
                <tr key={a.id}>
                  <td className="px-3 py-2">{i + 1}</td>
                  <td className="px-3 py-2">{a.role_label}</td>
                  <td className="px-3 py-2">{a.branch_name ?? "—"}</td>
                  <td className="px-3 py-2">
                    {a.can_revoke === false ? (
                      <span className="text-xs text-[var(--muted)]">—</span>
                    ) : (
                      <button
                        type="button"
                        className="text-xs text-red-600"
                        onClick={() => setDeleteId(a.id)}
                      >
                        حذف
                      </button>
                    )}
                  </td>
                </tr>
              ))
            )}
          </DataTable>
        </div>
      </div>

      <ConfirmDialog
        open={deleteId != null}
        title="حذف نقش"
        message="آیا از حذف این نقش برای کاربر مطمئن هستید؟"
        loading={deleting}
        onCancel={() => setDeleteId(null)}
        onConfirm={confirmDelete}
      />
    </AppShell>
  );
}