"use client";

import { useState } from "react";
import Link from "next/link";
import { CheckCircle2, UserPlus, Mail } from "lucide-react";
import { RoleGuard } from "@/components/RoleGuard";
import { ROLES } from "@/lib/roles";
import { auth } from "@/lib/firebase/config";
import { usePendingAccountRequests } from "@/hooks/usePendingAccountRequests";

function AccountRequestsQueueInner() {
  const { requests, loading } = usePendingAccountRequests();
  const [busyId, setBusyId] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [doneIds, setDoneIds] = useState<Set<string>>(new Set());

  async function handleApprove(requestId: string) {
    if (!auth?.currentUser) return;
    setBusyId(requestId);
    setError(null);
    try {
      const idToken = await auth.currentUser.getIdToken();
      const res = await fetch("/api/accounts/approve", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${idToken}`,
        },
        body: JSON.stringify({ requestId }),
      });
      const json = await res.json();
      if (!res.ok) {
        setError(json.error || "Gagal menyetujui akun");
        return;
      }
      setDoneIds((prev) => new Set(prev).add(requestId));
    } catch {
      setError("Gagal menyetujui akun. Coba lagi.");
    } finally {
      setBusyId(null);
    }
  }

  return (
    <div className="min-h-screen bg-background">
      <header className="border-b border-border bg-surface px-4 py-5 sm:px-8">
        <div className="mx-auto flex max-w-4xl items-center justify-between gap-3">
          <div className="flex min-w-0 items-center gap-3">
            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/15 text-primary">
              <UserPlus size={18} />
            </div>
            <div className="min-w-0">
              <h1 className="truncate text-base font-bold text-ink sm:text-lg">
                Permintaan Akun
              </h1>
              <p className="text-xs text-ink-soft sm:text-sm">
                Setujui permintaan member baru atau konversi non-member
              </p>
            </div>
          </div>
          <Link href="/super-admin" className="shrink-0 text-sm text-ink-soft hover:text-ink">
            Kembali
          </Link>
        </div>
      </header>

      <main className="mx-auto max-w-4xl px-4 py-6 sm:px-8">
        {error && (
          <div className="mb-4 rounded-xl border border-danger/30 bg-danger-soft px-4 py-3 text-sm text-danger">
            {error}
          </div>
        )}

        {loading ? (
          <p className="text-sm text-ink-soft">Memuat...</p>
        ) : requests.length === 0 ? (
          <div className="rounded-2xl border border-border bg-surface p-8 text-center">
            <p className="text-sm text-ink-soft">Tidak ada permintaan akun yang menunggu.</p>
          </div>
        ) : (
          <div className="space-y-3">
            {requests.map((req) => {
              const isDone = doneIds.has(req.id);
              return (
                <div
                  key={req.id}
                  className="flex flex-col gap-3 rounded-2xl border border-border bg-surface p-4 sm:flex-row sm:items-center sm:justify-between"
                >
                  <div className="min-w-0">
                    <p className="font-semibold text-ink">{req.name}</p>
                    <p className="flex items-center gap-1.5 text-sm text-ink-soft">
                      <Mail className="h-3.5 w-3.5" /> {req.email}
                    </p>
                    <p className="mt-1 text-xs text-ink-soft">
                      {req.requestedRole === "member" ? "Member Berbayar (baru)" : "Konversi dari Non-Member"}
                    </p>
                    {req.note && <p className="mt-1 text-xs italic text-ink-soft">&ldquo;{req.note}&rdquo;</p>}
                  </div>

                  {isDone ? (
                    <span className="inline-flex items-center gap-1.5 rounded-full bg-success-soft px-3 py-1.5 text-xs font-medium text-success">
                      <CheckCircle2 className="h-3.5 w-3.5" /> Disetujui, email terkirim
                    </span>
                  ) : (
                    <button
                      onClick={() => handleApprove(req.id)}
                      disabled={busyId === req.id}
                      className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary-soft disabled:opacity-60"
                    >
                      {busyId === req.id ? "Memproses..." : "Setujui & Buat Akun"}
                    </button>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </main>
    </div>
  );
}

export default function AccountRequestsQueuePage() {
  return (
    <RoleGuard allowedRoles={[ROLES.SUPER_ADMIN]}>
      <AccountRequestsQueueInner />
    </RoleGuard>
  );
}