"use client";

/** مدیریت اعضای تیم و دسترسی هر نفر به بخش‌های پنل (فقط مدیر عامل) */
import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { ADMIN_SECTIONS, ROLE_LABELS } from "@/lib/admin-sections";
import { removeMemberAction, saveMemberAction } from "@/server/admin/team";

export interface Member {
  id: string;
  phone: string;
  name: string | null;
  role: "OWNER" | "ADMIN" | "STAFF";
  permissions: string[];
  lastLoginAt: string | null;
  locked: boolean;
  hasPassword: boolean;
}

const PRESETS: Record<string, string[]> = {
  "همه بخش‌ها": ADMIN_SECTIONS.map((s) => s.key),
  "انبار و سفارش": ["dashboard", "orders", "inventory"],
  "محتوا و مجله": ["magazine", "banners", "seo"],
  "محصولات": ["products", "inventory", "catalog", "reviews"],
};

function MemberForm({ member, onDone }: { member?: Member; onDone: () => void }) {
  const router = useRouter();
  const [pending, start] = useTransition();
  const [error, setError] = useState("");
  const [perms, setPerms] = useState<string[]>(member?.permissions ?? ["dashboard", "orders"]);
  const toggle = (k: string) => setPerms((p) => (p.includes(k) ? p.filter((x) => x !== k) : [...p, k]));

  function submit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    setError("");
    start(async () => {
      const res = await saveMemberAction({
        id: member?.id,
        phone: String(fd.get("phone")),
        name: String(fd.get("name")),
        role: fd.get("role") as "ADMIN" | "STAFF",
        permissions: perms,
        password: String(fd.get("password") || "") || undefined,
      });
      if (!res.ok) return setError(res.error);
      router.refresh();
      onDone();
    });
  }

  return (
    <form onSubmit={submit} className="space-y-4">
      <div className="grid gap-3 sm:grid-cols-3">
        <label className="block"><span className="label">نام</span><input name="name" className="field h-10" defaultValue={member?.name ?? ""} maxLength={60} required /></label>
        <label className="block"><span className="label">شماره موبایل</span><input name="phone" className="field h-10" dir="ltr" inputMode="tel" defaultValue={member?.phone ?? ""} maxLength={14} required /></label>
        <label className="block">
          <span className="label">عنوان</span>
          <select name="role" className="field h-10" defaultValue={member?.role === "ADMIN" ? "ADMIN" : "STAFF"}>
            <option value="ADMIN">مدیر</option>
            <option value="STAFF">کارمند</option>
          </select>
        </label>
      </div>
      <fieldset>
        <legend className="label">دسترسی به بخش‌ها</legend>
        <div className="mb-2 flex flex-wrap gap-2">
          {Object.entries(PRESETS).map(([label, keys]) => (
            <button key={label} type="button" className="chip h-8 text-xs" onClick={() => setPerms(keys)}>{label}</button>
          ))}
          <button type="button" className="chip h-8 text-xs" onClick={() => setPerms([])}>هیچ‌کدام</button>
        </div>
        <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
          {ADMIN_SECTIONS.map((s) => (
            <label key={s.key} className={`flex cursor-pointer items-center gap-2 rounded-xl border px-3 py-2 text-sm ${perms.includes(s.key) ? "border-ink" : "border-line"}`}>
              <input type="checkbox" className="accent-ink" checked={perms.includes(s.key)} onChange={() => toggle(s.key)} />
              {s.label}
            </label>
          ))}
        </div>
      </fieldset>
      <label className="block max-w-sm">
        <span className="label">{member?.hasPassword ? "رمز جدید (خالی = بدون تغییر)" : "رمز اولیه"}</span>
        <input name="password" type="text" className="field h-10" dir="ltr" autoComplete="new-password" maxLength={128} placeholder="حداقل ۸ کاراکتر، حرف و عدد" />
        <span className="mt-1 block text-[11px] leading-5 text-muted">رمز را به خود عضو بدهید؛ او بعد از ورود می‌تواند از «تغییر رمز» عوضش کند.</span>
      </label>
      {error && <p role="alert" className="rounded-xl bg-mist px-4 py-2 text-sm">⚠ {error}</p>}
      <div className="flex gap-2">
        <button className="btn-primary h-10 px-6" disabled={pending}>{pending ? "در حال ذخیره…" : member ? "ذخیره دسترسی‌ها" : "افزودن عضو"}</button>
        <button type="button" className="btn-outline h-10 px-4" onClick={onDone}>انصراف</button>
      </div>
    </form>
  );
}

export function TeamManager({ members, meId }: { members: Member[]; meId: string }) {
  const router = useRouter();
  const [editing, setEditing] = useState<string | null>(null);
  const [, start] = useTransition();
  const label = (k: string) => ADMIN_SECTIONS.find((s) => s.key === k)?.label ?? k;

  return (
    <div className="space-y-4">
      {editing === "new" ? (
        <section className="rounded-2xl bg-paper p-5"><h2 className="mb-4 text-sm font-bold">عضو جدید</h2><MemberForm onDone={() => setEditing(null)} /></section>
      ) : (
        <button type="button" className="btn-primary h-10 px-5" onClick={() => setEditing("new")}>+ افزودن عضو تیم</button>
      )}
      {members.map((m) => (
        <section key={m.id} className="rounded-2xl bg-paper p-5">
          <div className="flex flex-wrap items-start justify-between gap-3">
            <div>
              <p className="text-sm font-bold">{m.name || "بدون نام"} <span className="ms-2 rounded-full bg-mist px-2 py-0.5 text-[11px] font-normal">{ROLE_LABELS[m.role]}</span>{m.locked && <span className="ms-2 rounded-full bg-ink px-2 py-0.5 text-[11px] font-normal text-paper">قفل موقت</span>}</p>
              <bdi className="text-xs text-muted">{m.phone}</bdi>
              <p className="mt-1 text-[11px] text-muted">{m.lastLoginAt ? `آخرین ورود: ${new Intl.DateTimeFormat("fa-IR-u-ca-persian", { dateStyle: "medium", timeStyle: "short", timeZone: "Asia/Tehran" }).format(new Date(m.lastLoginAt))}` : "هنوز وارد نشده"}{!m.hasPassword && " · رمز تعریف نشده"}</p>
            </div>
            {m.role !== "OWNER" && m.id !== meId && editing !== m.id && (
              <div className="flex gap-3 text-xs">
                <button type="button" className="underline" onClick={() => setEditing(m.id)}>ویرایش دسترسی / رمز</button>
                <button
                  type="button"
                  className="text-muted underline"
                  onClick={() =>
                    confirm(`دسترسی ${m.name || m.phone} به پنل حذف شود؟`) &&
                    start(async () => {
                      const res = await removeMemberAction(m.id);
                      if (!res.ok) alert(res.error);
                      router.refresh();
                    })
                  }
                >
                  حذف دسترسی
                </button>
              </div>
            )}
          </div>
          {editing === m.id ? (
            <div className="mt-4 border-t border-line pt-4"><MemberForm member={m} onDone={() => setEditing(null)} /></div>
          ) : (
            <div className="mt-3 flex flex-wrap gap-1.5">
              {m.role === "OWNER" ? <span className="chip h-7 text-[11px]">همه بخش‌ها + تیم و دسترسی‌ها</span> : m.permissions.length ? m.permissions.map((p) => <span key={p} className="chip h-7 text-[11px]">{label(p)}</span>) : <span className="text-xs text-muted">بدون دسترسی</span>}
            </div>
          )}
        </section>
      ))}
    </div>
  );
}