import { useState, useMemo, ReactNode, Fragment } from "react";
import { Head } from '@inertiajs/react';
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import AdminLayout from '@/layouts/AdminLayout';
import { useRolePreview } from "@/contexts/RolePreviewContext";
import { useAuth } from "@/hooks/useAuth";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { toast } from "sonner";
import { format, differenceInDays } from "date-fns";
import { Award, Search, Download, Plus, Trash2, ChevronRight, ChevronDown, UserPlus, Users, Upload } from "lucide-react";
import { exportToCSV } from "@/lib/csv-export";

const csrfToken = () =>
  (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';

/* ──────── RAG helpers ──────── */
type RagStatus = "green" | "amber" | "red" | "expired" | "none";

const ragFromCerts = (certs: { expires_at: string | null }[]): RagStatus => {
  if (certs.length === 0) return "none";
  let hasExpired = false;
  let hasRed = false;
  let hasAmber = false;
  for (const c of certs) {
    if (!c.expires_at) continue;
    const days = differenceInDays(new Date(c.expires_at), new Date());
    if (days < 0) hasExpired = true;
    else if (days < 30) hasRed = true;
    else if (days < 90) hasAmber = true;
  }
  if (hasExpired) return "expired";
  if (hasRed) return "red";
  if (hasAmber) return "amber";
  return "green";
};

const RagBadge = ({ status }: { status: RagStatus }) => {
  switch (status) {
    case "expired":
      return <span className="text-xs font-bold text-red-600">EXPIRED</span>;
    case "red":
      return <Badge className="bg-red-500 text-white text-[10px] px-1.5 py-0 h-5">Critical</Badge>;
    case "amber":
      return <Badge className="bg-amber-500 text-white text-[10px] px-1.5 py-0 h-5">Warning</Badge>;
    case "green":
      return <Badge className="bg-green-600 text-white text-[10px] px-1.5 py-0 h-5">Valid</Badge>;
    default:
      return <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-5">No Certs</Badge>;
  }
};

/* ──────── Types ──────── */
type PersonRow = {
  key: string;
  firstName: string;
  lastName: string;
  email: string;
  companyName: string;
  companyId: string | null;
  certCount: number;
  rag: RagStatus;
  source: "team_member" | "delegate" | "booking";
  sourceId?: string;
};

/* ──────── Component ──────── */
const Certificates = () => {
  const { preview } = useRolePreview();
  const { hasRole, isSysLevel, user, companyId } = useAuth();
  const isRealDelegate = hasRole("delegate") && !isSysLevel() && !preview.active;
  const delegateEmail = preview.active && preview.role === "delegate"
    ? preview.previewEmail
    : isRealDelegate
      ? user?.email ?? null
      : null;
  const isCompanyManagerView = hasRole("company_manager") && !!companyId && !delegateEmail && !isSysLevel();
  const queryClient = useQueryClient();

  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [expandedEmail, setExpandedEmail] = useState<string | null>(null);

  // Add team member dialog
  const [showAddMember, setShowAddMember] = useState(false);
  const [newMember, setNewMember] = useState({ first_name: "", last_name: "", email: "", phone: "", notes: "" });

  // Add certificate dialog
  const [showAddCert, setShowAddCert] = useState(false);
  const [addCertEmail, setAddCertEmail] = useState("");
  const [addCertCompanyId, setAddCertCompanyId] = useState<string | null>(null);
  const [newCert, setNewCert] = useState({ qualification_name: "", certificate_number: "", expires_at: "", notes: "" });
  const [certFile, setCertFile] = useState<File | null>(null);

  /* ──────── Queries ──────── */
  const { data: certificates } = useQuery({
    queryKey: ["admin-certificates", delegateEmail, companyId, isCompanyManagerView],
    queryFn: async () => {
      const params = new URLSearchParams();
      if (delegateEmail) params.set('delegate_email', delegateEmail);
      else if (isCompanyManagerView && companyId) params.set('company_id', companyId);
      const res = await fetch(`/api/admin/certificates?${params.toString()}`);
      if (!res.ok) return [];
      return res.json();
    },
  });

  const { data: teamMembers } = useQuery({
    queryKey: ["team-members", companyId, isCompanyManagerView, delegateEmail],
    queryFn: async () => {
      if (delegateEmail) return [];
      const params = new URLSearchParams();
      if (isCompanyManagerView && companyId) params.set('company_id', companyId);
      const res = await fetch(`/api/admin/team-members?${params.toString()}`);
      if (!res.ok) return [];
      return res.json();
    },
  });

  const { data: delegates } = useQuery({
    queryKey: ["all-delegates", companyId, isCompanyManagerView, delegateEmail],
    queryFn: async () => {
      if (delegateEmail) return [];
      const params = new URLSearchParams();
      if (isCompanyManagerView && companyId) params.set('company_id', companyId);
      const res = await fetch(`/api/admin/delegates?${params.toString()}`);
      if (!res.ok) return [];
      return res.json();
    },
  });

  const { data: bookingDelegates } = useQuery({
    queryKey: ["all-booking-delegates", companyId, isCompanyManagerView, delegateEmail],
    queryFn: async () => {
      if (delegateEmail) return [];
      const params = new URLSearchParams();
      if (isCompanyManagerView && companyId) params.set('company_id', companyId);
      const res = await fetch(`/api/admin/booking-delegates?${params.toString()}`);
      if (!res.ok) return [];
      return res.json();
    },
  });


  /* ──────── Unified people list ──────── */
  const people = useMemo(() => {
    const map = new Map<string, PersonRow>();

    // Group certificates by email. Certs whose delegate has no email get
    // their own bucket below (keyed on cert id) so they still show up.
    const certsByEmail = new Map<string, any[]>();
    const certsWithoutEmail: any[] = [];
    certificates?.forEach((c: any) => {
      const email = (c.delegate_email || "").toLowerCase();
      if (!email) {
        certsWithoutEmail.push(c);
        return;
      }
      if (!certsByEmail.has(email)) certsByEmail.set(email, []);
      certsByEmail.get(email)!.push(c);
    });

    // Add team members
    teamMembers?.forEach((tm: any) => {
      const email = (tm.email || "").toLowerCase();
      const key = email || `tm-${tm.id}`;
      const certs = email ? certsByEmail.get(email) || [] : [];
      map.set(key, {
        key,
        firstName: tm.first_name,
        lastName: tm.last_name,
        email: tm.email || "",
        companyName: (tm as any).training_companies?.name || "",
        companyId: tm.company_id,
        certCount: certs.length,
        rag: ragFromCerts(certs),
        source: "team_member",
        sourceId: tm.id,
      });
    });

    // Add delegates
    delegates?.forEach((d: any) => {
      const email = (d.email || "").toLowerCase();
      if (!email || map.has(email)) return;
      const certs = certsByEmail.get(email) || [];
      map.set(email, {
        key: email,
        firstName: d.first_name,
        lastName: d.last_name,
        email: d.email || "",
        companyName: (d as any).training_companies?.name || "",
        companyId: d.company_id,
        certCount: certs.length,
        rag: ragFromCerts(certs),
        source: "delegate",
        sourceId: d.id,
      });
    });

    // Add booking delegates
    bookingDelegates?.forEach((bd: any) => {
      const email = (bd.email || "").toLowerCase();
      if (!email || map.has(email)) return;
      const certs = certsByEmail.get(email) || [];
      const co = bd as any;
      map.set(email, {
        key: email,
        firstName: bd.first_name,
        lastName: bd.last_name,
        email: bd.email || "",
        companyName: co.course_orders?.training_companies?.name || "",
        companyId: co.course_orders?.company_id || null,
        certCount: certs.length,
        rag: ragFromCerts(certs),
        source: "booking",
      });
    });

    // Add any cert-only emails not yet covered
    certsByEmail.forEach((certs, email) => {
      if (map.has(email)) return;
      const first = certs[0];
      map.set(email, {
        key: email,
        firstName: email.split("@")[0],
        lastName: "",
        email,
        companyName: (first as any).training_companies?.name || "",
        companyId: first.company_id,
        certCount: certs.length,
        rag: ragFromCerts(certs),
        source: "booking",
      });
    });

    // Walk-in delegates with no email — each cert gets its own row so admins
    // can still find them and upload the PDF.
    certsWithoutEmail.forEach((c: any) => {
      const key = `nocert-${c.id}`;
      const name = (c.delegate_name || "Unknown delegate").trim();
      const parts = name.split(/\s+/);
      map.set(key, {
        key,
        firstName: parts[0] || "Unknown",
        lastName: parts.slice(1).join(" "),
        email: "",
        companyName: (c as any).company?.name || "",
        companyId: c.company_id,
        certCount: 1,
        rag: ragFromCerts([c]),
        source: "booking",
      });
    });

    return Array.from(map.values());
  }, [certificates, teamMembers, delegates, bookingDelegates]);

  /* ──────── Filtering ──────── */
  const filtered = useMemo(() => {
    return people.filter((p) => {
      if (statusFilter !== "all" && p.rag !== statusFilter) return false;
      if (search) {
        const s = search.toLowerCase();
        return (
          p.firstName.toLowerCase().includes(s) ||
          p.lastName.toLowerCase().includes(s) ||
          p.email.toLowerCase().includes(s) ||
          p.companyName.toLowerCase().includes(s)
        );
      }
      return true;
    });
  }, [people, search, statusFilter]);

  /* ──────── Mutations ──────── */
  const addMemberMutation = useMutation({
    mutationFn: async () => {
      const res = await fetch('/api/admin/team-members', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken() },
        body: JSON.stringify({
          first_name: newMember.first_name,
          last_name: newMember.last_name,
          email: newMember.email || null,
          phone: newMember.phone || null,
          notes: newMember.notes || null,
          company_id: companyId ?? null,
        }),
      });
      if (!res.ok) throw new Error('Failed to add team member');
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["team-members"] });
      toast.success("Team member added");
      setShowAddMember(false);
      setNewMember({ first_name: "", last_name: "", email: "", phone: "", notes: "" });
    },
    onError: (e: Error) => toast.error(e.message),
  });

  const addCertMutation = useMutation({
    mutationFn: async () => {
      const formData = new FormData();
      formData.append('delegate_email', addCertEmail);
      formData.append('qualification_name', newCert.qualification_name || '');
      formData.append('certificate_number', newCert.certificate_number || '');
      formData.append('expires_at', newCert.expires_at || '');
      formData.append('notes', newCert.notes || '');
      formData.append('company_id', addCertCompanyId ?? companyId ?? '');
      formData.append('status', 'active');
      formData.append('is_external', '1');
      if (certFile) formData.append('certificate_file', certFile);

      const res = await fetch('/api/admin/certificates', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': csrfToken() },
        body: formData,
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({ error: 'Failed' }));
        throw new Error(err.error || 'Failed to add certificate');
      }
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["admin-certificates"] });
      toast.success("Certificate added");
      setShowAddCert(false);
      setAddCertCompanyId(null);
      setNewCert({ qualification_name: "", certificate_number: "", expires_at: "", notes: "" });
      setCertFile(null);
    },
    onError: (e: Error) => toast.error(e.message),
  });

  const deleteCertMutation = useMutation({
    mutationFn: async (id: string) => {
      const res = await fetch(`/api/admin/certificates/${id}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken() },
        body: JSON.stringify({ _method: 'DELETE' }),
      });
      if (!res.ok) throw new Error('Failed to delete certificate');
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["admin-certificates"] });
      toast.success("Certificate deleted");
    },
    onError: (e: Error) => toast.error(e.message),
  });

  // Attach a PDF/image to a pending certificate row (or replace an existing one).
  const uploadFileMutation = useMutation({
    mutationFn: async ({ id, file }: { id: string; file: File }) => {
      const fd = new FormData();
      fd.append("certificate_file", file);
      const res = await fetch(`/api/admin/certificates/${id}/upload`, {
        method: "POST",
        headers: {
          "Accept": "application/json",
          "X-Requested-With": "XMLHttpRequest",
          "X-CSRF-TOKEN": csrfToken(),
        },
        body: fd,
      });
      if (!res.ok) {
        const d = await res.json().catch(() => null);
        throw new Error(d?.error || d?.message || "Upload failed");
      }
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["admin-certificates"] });
      toast.success("Certificate uploaded");
    },
    onError: (e: Error) => toast.error(e.message),
  });

  /* ──────── Stats ──────── */
  const expiredCount = people.filter((p) => p.rag === "expired").length;
  const redCount = people.filter((p) => p.rag === "red").length;
  const amberCount = people.filter((p) => p.rag === "amber").length;

  /* ──────── Export ──────── */
  const handleExport = () => {
    if (!filtered.length) return;
    exportToCSV(
      filtered.map((p) => ({
        Name: `${p.firstName} ${p.lastName}`,
        Email: p.email,
        Company: p.companyName,
        Certificates: p.certCount,
        Status: p.rag,
      })),
      "cert-manager-export"
    );
  };

  /* ──────── Expanded row certs ──────── */
  // expandedEmail holds either the email of an expanded row OR a `nocert-<id>`
  // synthetic key for a walk-in delegate without an email address.
  const expandedCerts = (() => {
    if (!expandedEmail) return [];
    if (expandedEmail.startsWith("nocert-")) {
      const certId = expandedEmail.slice("nocert-".length);
      return certificates?.filter((c: any) => c.id === certId) || [];
    }
    return certificates?.filter(
      (c: any) => (c.delegate_email || "").toLowerCase() === expandedEmail.toLowerCase(),
    ) || [];
  })();

  return (
    <>
      <Head title="Cert Manager" />
      <div>
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
            <Award className="h-6 w-6 text-primary" />
            <h1 className="text-2xl font-bold text-foreground">Cert Manager</h1>
            <div className="flex gap-2 flex-wrap">
              <Badge
                variant="outline"
                className={`cursor-pointer transition-opacity ${statusFilter === "all" ? "ring-2 ring-primary" : "opacity-70 hover:opacity-100"}`}
                onClick={() => setStatusFilter(statusFilter === "all" ? "all" : "all")}
              >
                {people.length} people
              </Badge>
              {expiredCount > 0 && (
                <Badge
                  variant="destructive"
                  className={`cursor-pointer transition-opacity ${statusFilter === "expired" ? "ring-2 ring-primary" : "opacity-70 hover:opacity-100"}`}
                  onClick={() => setStatusFilter(statusFilter === "expired" ? "all" : "expired")}
                >
                  {expiredCount} expired
                </Badge>
              )}
              {redCount > 0 && (
                <Badge
                  className={`bg-red-500 text-white cursor-pointer transition-opacity ${statusFilter === "red" ? "ring-2 ring-primary" : "opacity-70 hover:opacity-100"}`}
                  onClick={() => setStatusFilter(statusFilter === "red" ? "all" : "red")}
                >
                  {redCount} critical
                </Badge>
              )}
              {amberCount > 0 && (
                <Badge
                  className={`bg-amber-500 text-white cursor-pointer transition-opacity ${statusFilter === "amber" ? "ring-2 ring-primary" : "opacity-70 hover:opacity-100"}`}
                  onClick={() => setStatusFilter(statusFilter === "amber" ? "all" : "amber")}
                >
                  {amberCount} warning
                </Badge>
              )}
            </div>
          </div>
          <div className="flex gap-2">
            <Button variant="outline" size="sm" onClick={handleExport}>
              <Download className="h-4 w-4 mr-1" /> Export
            </Button>
            {!delegateEmail && (
              <Button size="sm" onClick={() => setShowAddMember(true)}>
                <UserPlus className="h-4 w-4 mr-1" /> Add Team Member
              </Button>
            )}
          </div>
        </div>

        {/* Filters */}
        <div className="flex gap-3 mb-6">
          <div className="relative flex-1 max-w-sm">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input placeholder="Search name, email or company..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-10" />
          </div>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-[180px]"><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Statuses</SelectItem>
              <SelectItem value="green">Valid (Green)</SelectItem>
              <SelectItem value="amber">Warning (Amber)</SelectItem>
              <SelectItem value="red">Critical (Red)</SelectItem>
              <SelectItem value="expired">Expired</SelectItem>
              <SelectItem value="none">No Certs</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* People Table */}
        <div className="bg-card border border-border rounded-xl overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-8 py-2 px-2"></TableHead>
                <TableHead className="text-[11px] font-semibold uppercase tracking-wider py-2 px-3">Name</TableHead>
                <TableHead className="text-[11px] font-semibold uppercase tracking-wider py-2 px-3">Email</TableHead>
                <TableHead className="text-[11px] font-semibold uppercase tracking-wider py-2 px-3">Company</TableHead>
                <TableHead className="text-[11px] font-semibold uppercase tracking-wider py-2 px-3 text-center">Certs</TableHead>
                <TableHead className="text-[11px] font-semibold uppercase tracking-wider py-2 px-3">Status</TableHead>
                <TableHead className="w-[80px] py-2 px-2"></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filtered.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={7} className="text-center text-xs text-muted-foreground py-8">
                    <Users className="h-8 w-8 mx-auto mb-2 text-muted-foreground/40" />
                    No team members found.
                  </TableCell>
                </TableRow>
              ) : (
                filtered.map((p) => {
                  // Walk-in rows have key `nocert-<certId>`; emailed rows use the email itself.
                  const rowKey = p.email || p.key;
                  const isExpanded = expandedEmail === rowKey;
                  return (
                    <Fragment key={p.key}>
                      <TableRow
                        className={`hover:bg-muted/50 cursor-pointer ${isExpanded ? "bg-muted/30" : ""}`}
                        onClick={() => setExpandedEmail(isExpanded ? null : rowKey)}
                      >
                        <TableCell className="py-2 px-2">
                          {isExpanded ? <ChevronDown className="h-4 w-4 text-muted-foreground" /> : <ChevronRight className="h-4 w-4 text-muted-foreground" />}
                        </TableCell>
                        <TableCell className="text-xs font-medium py-2 px-3">{p.firstName} {p.lastName}</TableCell>
                        <TableCell className="text-xs py-2 px-3 text-muted-foreground">{p.email || <span className="italic">no email</span>}</TableCell>
                        <TableCell className="text-xs py-2 px-3 text-muted-foreground">{p.companyName || "—"}</TableCell>
                        <TableCell className="text-xs py-2 px-3 text-center font-semibold">{p.certCount}</TableCell>
                        <TableCell className="py-2 px-3"><RagBadge status={p.rag} /></TableCell>
                        <TableCell className="py-2 px-2">
                          {!delegateEmail && p.email && (
                            <Button
                              variant="outline"
                              size="sm"
                              className="h-6 text-[10px] px-2"
                              onClick={(e) => {
                                e.stopPropagation();
                                setAddCertEmail(p.email);
                                setAddCertCompanyId(p.companyId);
                                setShowAddCert(true);
                              }}
                            >
                              <Plus className="h-3 w-3 mr-0.5" /> Cert
                            </Button>
                          )}
                        </TableCell>
                      </TableRow>
                      {/* Expanded certificate detail */}
                      {isExpanded && (
                        <TableRow className="bg-muted/20">
                          <TableCell colSpan={7} className="py-3 px-6">
                            {expandedCerts.length === 0 ? (
                              <p className="text-xs text-muted-foreground italic">No certificates on record for this person.</p>
                            ) : (
                              <div className="space-y-2">
                                <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2">Certificates</p>
                                {expandedCerts.map((c: any) => {
                                  const days = c.expires_at ? differenceInDays(new Date(c.expires_at), new Date()) : null;
                                  let expiryLabel = "No expiry";
                                  let expiryClass = "text-muted-foreground";
                                  if (days !== null) {
                                    if (days < 0) { expiryLabel = "EXPIRED"; expiryClass = "text-red-600 font-bold"; }
                                    else if (days < 30) { expiryLabel = `${days}d left`; expiryClass = "text-red-500 font-medium"; }
                                    else if (days < 90) { expiryLabel = `${days}d left`; expiryClass = "text-amber-500 font-medium"; }
                                    else { expiryLabel = `${days}d left`; expiryClass = "text-green-600"; }
                                  }

                                  return (
                                    <div key={c.id} className="flex items-center justify-between bg-background rounded-lg border border-border px-3 py-2">
                                      <div className="flex-1 min-w-0">
                                        <div className="flex items-center gap-2">
                                          <span className="text-xs font-medium truncate">
                                            {c.qualification_name || (c as any).courses?.title || "Certificate"}
                                          </span>
                                          {c.certificate_number && (
                                            <span className="text-[10px] font-mono text-muted-foreground">#{c.certificate_number}</span>
                                          )}
                                        </div>
                                        <div className="flex items-center gap-3 mt-0.5">
                                          <span className="text-[10px] text-muted-foreground">
                                            Issued {format(new Date(c.issued_at), "dd/MM/yyyy")}
                                          </span>
                                          <span className={`text-[10px] ${expiryClass}`}>
                                            {c.expires_at ? `Expires ${format(new Date(c.expires_at), "dd/MM/yyyy")} (${expiryLabel})` : expiryLabel}
                                          </span>
                                          {c.certificate_url ? (
                                            <a
                                              href={c.certificate_url}
                                              target="_blank"
                                              rel="noopener noreferrer"
                                              className="inline-flex items-center gap-1 text-[10px] font-medium text-primary hover:underline"
                                              onClick={(e) => e.stopPropagation()}
                                            >
                                              <Download className="w-3 h-3" /> Download
                                            </a>
                                          ) : (
                                            <span className="text-[10px] text-amber-600 italic">Pending — no file uploaded</span>
                                          )}
                                          <label
                                            className="inline-flex items-center gap-1 text-[10px] font-medium text-primary hover:underline cursor-pointer"
                                            onClick={(e) => e.stopPropagation()}
                                          >
                                            <Upload className="w-3 h-3" />
                                            {c.certificate_url ? "Replace PDF" : "Upload PDF"}
                                            <input
                                              type="file"
                                              accept=".pdf,image/png,image/jpeg,image/webp"
                                              className="hidden"
                                              disabled={uploadFileMutation.isPending}
                                              onChange={(e) => {
                                                const file = e.target.files?.[0];
                                                if (file) uploadFileMutation.mutate({ id: c.id, file });
                                                e.target.value = "";
                                              }}
                                            />
                                          </label>
                                        </div>
                                      </div>
                                      {!delegateEmail && (
                                        <Button
                                          variant="ghost"
                                          size="icon"
                                          className="h-6 w-6 shrink-0"
                                          onClick={(e) => {
                                            e.stopPropagation();
                                            deleteCertMutation.mutate(c.id);
                                          }}
                                        >
                                          <Trash2 className="h-3 w-3 text-destructive" />
                                        </Button>
                                      )}
                                    </div>
                                  );
                                })}
                              </div>
                            )}
                          </TableCell>
                        </TableRow>
                      )}
                    </Fragment>
                  );
                })
              )}
            </TableBody>
          </Table>
        </div>

        {/* Add Team Member Dialog */}
        <Dialog open={showAddMember} onOpenChange={setShowAddMember}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Add Team Member</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <Label>First Name *</Label>
                  <Input value={newMember.first_name} onChange={(e) => setNewMember({ ...newMember, first_name: e.target.value })} />
                </div>
                <div>
                  <Label>Last Name *</Label>
                  <Input value={newMember.last_name} onChange={(e) => setNewMember({ ...newMember, last_name: e.target.value })} />
                </div>
              </div>
              <div>
                <Label>Email</Label>
                <Input type="email" value={newMember.email} onChange={(e) => setNewMember({ ...newMember, email: e.target.value })} />
              </div>
              <div>
                <Label>Phone</Label>
                <Input value={newMember.phone} onChange={(e) => setNewMember({ ...newMember, phone: e.target.value })} />
              </div>
              <div>
                <Label>Notes</Label>
                <Textarea value={newMember.notes} onChange={(e) => setNewMember({ ...newMember, notes: e.target.value })} rows={2} />
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowAddMember(false)}>Cancel</Button>
              <Button onClick={() => addMemberMutation.mutate()} disabled={!newMember.first_name || !newMember.last_name || addMemberMutation.isPending}>
                {addMemberMutation.isPending ? "Adding..." : "Add Team Member"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* Add Certificate Dialog */}
        <Dialog open={showAddCert} onOpenChange={setShowAddCert}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Add Certificate — {addCertEmail}</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div>
                <Label>Qualification / Course Name</Label>
                <Input value={newCert.qualification_name} onChange={(e) => setNewCert({ ...newCert, qualification_name: e.target.value })} placeholder="e.g. NRSWA Operative" />
              </div>
              <div>
                <Label>Certificate Number</Label>
                <Input value={newCert.certificate_number} onChange={(e) => setNewCert({ ...newCert, certificate_number: e.target.value })} placeholder="e.g. CERT-2026-001" />
              </div>
              <div>
                <Label>Expiry Date</Label>
                <Input type="date" value={newCert.expires_at} onChange={(e) => setNewCert({ ...newCert, expires_at: e.target.value })} />
              </div>
              <div>
                <Label>Certificate File (PDF/Image)</Label>
                <Input type="file" accept=".pdf,.jpg,.png" onChange={(e) => setCertFile(e.target.files?.[0] || null)} />
              </div>
              <div>
                <Label>Notes</Label>
                <Input value={newCert.notes} onChange={(e) => setNewCert({ ...newCert, notes: e.target.value })} placeholder="Optional notes" />
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowAddCert(false)}>Cancel</Button>
              <Button onClick={() => addCertMutation.mutate()} disabled={addCertMutation.isPending}>
                {addCertMutation.isPending ? "Uploading..." : "Add Certificate"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </>
  );
};

Certificates.layout = (page: ReactNode) => <AdminLayout>{page}</AdminLayout>;

export default Certificates;