"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { CheckCircle2, XCircle, Crown, ImageOff } from "lucide-react";
import { RoleGuard } from "@/components/RoleGuard";
import { ROLES } from "@/lib/roles";
import { useAuthContext } from "@/components/FirebaseProvider";
import { usePendingMembershipRequests } from "@/hooks/usePendingMembershipRequests";
import { approveMembershipRequest, rejectMembershipRequest, type MembershipRequest } from "@/lib/firestore/membership";

function MembershipQueueInner() {
  const { user } = useAuthContext();
  const { requests, loading } = usePendingMembershipRequests();
  const [busyId, setBusyId] = useState<string | null>(null);
  const [rejectingId, setRejectingId] = useState<string | null>(null);
  const [reason, setReason] = useState("");

  async function handleApprove(req: MembershipRequest) {
    if (!user) return;
    setBusyId(req.id);
    try {
      await approveMembershipRequest(req, user.uid);
    } finally {
      setBusyId(null);
    }
  }

  async function handleReject(req: MembershipRequest) {
    if (!user) return;
    setBusyId(req.id);
    try {
      await rejectMembershipRequest(req, user.uid, reason);
      setRejectingId(null);
      setReason("");
    } 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-accent/15 text-accent">
              <Crown size={18} />
            </div>
            <div className="min-w-0">
              <p className="truncate text-xs font-medium uppercase tracking-wide text-ink-soft">Super Admin</p>
              <h1 className="truncate font-display text-xl font-semibold text-ink">Verifikasi Membership</h1>
            </div>
          </div>
          <Link href="/super-admin" className="shrink-0 text-sm font-medium text-ink-soft hover:text-ink">
            &larr; Kembali
          </Link>
        </div>
      </header>

      <main className="mx-auto max-w-4xl space-y-4 px-4 py-10 sm:px-8">
        {loading ? (
          <p className="text-sm text-ink-soft">Memuat...</p>
        ) : requests.length === 0 ? (
          <p className="text-sm text-ink-soft">Tidak ada pengajuan upgrade yang menunggu verifikasi.</p>
        ) : (
          requests.map((req) => (
            <div key={req.id} className="rounded-2xl border border-border bg-surface p-6">
              <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                <div className="min-w-0">
                  <p className="font-medium text-ink">{req.employeeName}</p>
                  <p className="text-sm text-ink-soft">{req.company || "Perusahaan tidak diketahui"}</p>
                  {req.note && <p className="mt-2 text-sm text-ink">&quot;{req.note}&quot;</p>}
                </div>
                {req.proofImageUrl ? (
                  <a href={req.proofImageUrl} target="_blank" rel="noopener noreferrer" className="shrink-0">
                    <Image
                      src={req.proofImageUrl}
                      alt="Bukti transfer"
                      width={140}
                      height={140}
                      className="rounded-lg border border-border object-cover"
                      unoptimized
                    />
                  </a>
                ) : (
                  <div className="flex h-24 w-24 shrink-0 items-center justify-center rounded-lg border border-dashed border-border text-ink-soft">
                    <ImageOff size={20} />
                  </div>
                )}
              </div>

              {rejectingId === req.id ? (
                <div className="mt-4 space-y-2">
                  <input
                    value={reason}
                    onChange={(e) => setReason(e.target.value)}
                    placeholder="Alasan penolakan (opsional, dikirim ke karyawan)"
                    className="w-full rounded-lg border border-border bg-background px-3.5 py-2 text-sm text-ink outline-none focus:border-primary"
                  />
                  <div className="flex gap-2">
                    <button
                      onClick={() => handleReject(req)}
                      disabled={busyId === req.id}
                      className="rounded-lg bg-danger px-4 py-2 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-50"
                    >
                      Konfirmasi Tolak
                    </button>
                    <button onClick={() => setRejectingId(null)} className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-ink hover:bg-surface-sunk">
                      Batal
                    </button>
                  </div>
                </div>
              ) : (
                <div className="mt-4 flex gap-2">
                  <button
                    onClick={() => handleApprove(req)}
                    disabled={busyId === req.id}
                    className="flex items-center gap-1.5 rounded-lg bg-success px-4 py-2 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-50"
                  >
                    <CheckCircle2 size={15} /> Setujui
                  </button>
                  <button
                    onClick={() => setRejectingId(req.id)}
                    disabled={busyId === req.id}
                    className="flex items-center gap-1.5 rounded-lg border border-danger/30 px-4 py-2 text-sm font-medium text-danger hover:bg-danger/10 disabled:opacity-50"
                  >
                    <XCircle size={15} /> Tolak
                  </button>
                </div>
              )}
            </div>
          ))
        )}
      </main>
    </div>
  );
}

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