"use client";

import { FormEvent, useEffect, useMemo, useState } from "react";

export type AdminTableRow = Record<string, string>;

type ModalMode = "add" | "view" | "edit";
type ReferenceSettings = {
  prefix: string;
  nextPreview: string;
};
type CategorySettings = {
  categories?: ParticipantCategoryOption[];
  options?: string[];
};
type ParticipantCategoryOption = {
  name: string;
  amount: number;
};
type ChapterOption = {
  id: string;
  name: string;
};
type ChapterSettings = {
  chapters: ChapterOption[];
};
type EmailTemplateSettings = {
  subject: string;
  body: string;
};
type DefaultPasswordSettings = {
  password: string;
  fallback: string;
};
type ColumnSettings = {
  availableColumns: string[];
  selectedColumns: string[];
};
type ImportResult = {
  imported: number;
  skipped: number;
  qrIssued: number;
  rows: AdminTableRow[];
};

type ParticipantsRecordsProps = {
  columns: string[];
  initialRows: AdminTableRow[];
  workflow: string[];
};

type ApiResponse<T> = {
  ok: boolean;
  data?: T;
  error?: { message: string };
};

const editableFields = [
  "Reference",
  "First Name",
  "Middle Name",
  "Last Name",
  "Mobile Number",
  "Email",
  "Company",
  "Category",
  "Chapter",
  "Registration",
  "Payment",
  "QR"
];

const emptyParticipant: AdminTableRow = {
  Reference: "",
  Name: "",
  "First Name": "",
  "Middle Name": "",
  "Last Name": "",
  "Mobile Number": "",
  Email: "",
  Company: "",
  Category: "Guest Only",
  Amount: "PHP 0.00",
  Chapter: "",
  chapterId: "",
  Registration: "Pending",
  Payment: "Pending",
  QR: "Not Ready",
  Actions: "View / Edit"
};

function statusClass(value: string) {
  return value.toLowerCase().replaceAll(" ", "-");
}

function optionsForField(field: string) {
  if (field === "Registration") return ["Confirmed", "Pending", "Pending Payment", "Waitlisted"];
  if (field === "Payment") return ["Paid", "Pending", "For Review", "Invoice", "Comped", "Unpaid"];
  if (field === "QR") return ["Issued", "Queued", "Hold", "Not Ready"];
  return [];
}

const defaultCategoryEntries: ParticipantCategoryOption[] = [
  { name: "Guest Only", amount: 0 },
  { name: "PMAP Member", amount: 12500 },
  { name: "Member", amount: 12500 },
  { name: "Non-member", amount: 15000 },
  { name: "Chapter Delegate", amount: 11000 },
  { name: "Corporate Group", amount: 10000 },
  { name: "Speaker", amount: 0 },
  { name: "Complimentary", amount: 0 },
  { name: "VIP Guest", amount: 0 }
];

function normalizeCategoryEntries(settings: CategorySettings | undefined): ParticipantCategoryOption[] {
  const source = settings?.categories ?? settings?.options ?? defaultCategoryEntries;
  const seen = new Set<string>();
  const entries = source
    .map((option) => {
      if (typeof option === "string") return { name: option.trim(), amount: 0 };
      return { name: option.name.trim(), amount: Number.isFinite(Number(option.amount)) ? Number(option.amount) : 0 };
    })
    .filter((option) => {
      if (!option.name || seen.has(option.name)) return false;
      seen.add(option.name);
      return true;
    });
  return entries.some((option) => option.name === "Guest Only") ? entries : [{ name: "Guest Only", amount: 0 }, ...entries];
}

function formatCategoryAmount(amount: number) {
  return `PHP ${amount.toLocaleString("en-PH", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

export function ParticipantsRecords({ columns, initialRows, workflow }: ParticipantsRecordsProps) {
  const [rows, setRows] = useState(initialRows);
  const [searchQuery, setSearchQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");
  const [pageSize, setPageSize] = useState(20);
  const [currentPage, setCurrentPage] = useState(1);
  const [activeParticipantTab, setActiveParticipantTab] = useState<"details" | "activity">("details");
  const [modalMode, setModalMode] = useState<ModalMode | null>(null);
  const [selectedRow, setSelectedRow] = useState<AdminTableRow | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");
  const [modalMessage, setModalMessage] = useState("");
  const [referenceSettings, setReferenceSettings] = useState<ReferenceSettings>({ prefix: "Ref-AC2026", nextPreview: "Ref-AC2026-0001" });
  const [categoryEntries, setCategoryEntries] = useState<ParticipantCategoryOption[]>(defaultCategoryEntries);
  const [categoryDrafts, setCategoryDrafts] = useState<ParticipantCategoryOption[]>(defaultCategoryEntries);
  const [chapterOptions, setChapterOptions] = useState<ChapterOption[]>([]);
  const [availableColumns, setAvailableColumns] = useState<string[]>(columns.filter((column) => column !== "Actions"));
  const [selectedColumns, setSelectedColumns] = useState<string[]>(columns.filter((column) => column !== "Actions"));
  const [isReferenceModalOpen, setIsReferenceModalOpen] = useState(false);
  const [isColumnModalOpen, setIsColumnModalOpen] = useState(false);
  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
  const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
  const [isChapterModalOpen, setIsChapterModalOpen] = useState(false);
  const [isEmailTemplateModalOpen, setIsEmailTemplateModalOpen] = useState(false);
  const [isDefaultPasswordModalOpen, setIsDefaultPasswordModalOpen] = useState(false);
  const [emailTemplate, setEmailTemplate] = useState<EmailTemplateSettings>({
    subject: "Your PMAP Annual Conference QR code is ready",
    body: ""
  });
  const [defaultPasswordSettings, setDefaultPasswordSettings] = useState<DefaultPasswordSettings>({
    password: "Participant!2026",
    fallback: "Participant!2026"
  });
  const [chapterDraftName, setChapterDraftName] = useState("");
  const [editingChapterId, setEditingChapterId] = useState("");
  const [importSummary, setImportSummary] = useState("");

  useEffect(() => {
    let ignore = false;

    async function loadParticipants() {
      setIsLoading(true);
      setErrorMessage("");
      try {
        const response = await fetch("/api/v1/admin/participants", { cache: "no-store" });
        const result = await response.json() as ApiResponse<AdminTableRow[]>;
        if (!response.ok || !result.ok || !result.data) {
          throw new Error(result.error?.message ?? "Participants could not be loaded.");
        }
        if (!ignore) setRows(result.data);
      } catch (error) {
        if (!ignore) setErrorMessage(error instanceof Error ? error.message : "Participants could not be loaded.");
      } finally {
        if (!ignore) setIsLoading(false);
      }
    }

    void loadParticipants();
    void loadReferenceSettings();
    void loadCategoryOptions();
    void loadChapterOptions();
    void loadEmailTemplate();
    void loadDefaultPasswordSettings();
    void loadColumnSettings();
    return () => {
      ignore = true;
    };
  }, []);

  async function loadReferenceSettings() {
    try {
      const response = await fetch("/api/v1/admin/participants/reference", { cache: "no-store" });
      const result = await response.json() as ApiResponse<ReferenceSettings>;
      if (response.ok && result.ok && result.data) setReferenceSettings(result.data);
    } catch {
      setReferenceSettings({ prefix: "Ref-AC2026", nextPreview: "Ref-AC2026-0001" });
    }
  }

  async function loadCategoryOptions() {
    try {
      const response = await fetch("/api/v1/admin/participants/categories", { cache: "no-store" });
      const result = await response.json() as ApiResponse<CategorySettings>;
      if (response.ok && result.ok && result.data) setCategoryEntries(normalizeCategoryEntries(result.data));
    } catch {
      setCategoryEntries(defaultCategoryEntries);
    }
  }

  async function loadChapterOptions() {
    try {
      const response = await fetch("/api/v1/admin/participants/chapters", { cache: "no-store" });
      const result = await response.json() as ApiResponse<ChapterSettings>;
      if (response.ok && result.ok && result.data) setChapterOptions(result.data.chapters);
    } catch {
      setChapterOptions([]);
    }
  }

  async function loadEmailTemplate() {
    try {
      const response = await fetch("/api/v1/admin/participants/email-template", { cache: "no-store" });
      const result = await response.json() as ApiResponse<EmailTemplateSettings>;
      if (response.ok && result.ok && result.data) setEmailTemplate(result.data);
    } catch {
      setEmailTemplate({
        subject: "Your PMAP Annual Conference QR code is ready",
        body: [
          "Hello {{participantName}},",
          "",
          "Your conference registration has been verified and your QR credential is now ready.",
          "",
          "Registration Reference: {{reference}}",
          "Category: {{category}}",
          "Company: {{company}}",
          "",
          "Please download or save the attached QR code and present it at conference check-in.",
          "",
          "Thank you,"
        ].join("\n")
      });
    }
  }

  async function loadDefaultPasswordSettings() {
    try {
      const response = await fetch("/api/v1/admin/participants/default-password", { cache: "no-store" });
      const result = await response.json() as ApiResponse<DefaultPasswordSettings>;
      if (response.ok && result.ok && result.data) setDefaultPasswordSettings(result.data);
    } catch {
      setDefaultPasswordSettings({ password: "Participant!2026", fallback: "Participant!2026" });
    }
  }

  async function loadColumnSettings() {
    const defaultColumns = columns.filter((column) => column !== "Actions");
    try {
      const response = await fetch("/api/v1/admin/participants/columns", { cache: "no-store" });
      const result = await response.json() as ApiResponse<ColumnSettings>;
      if (response.ok && result.ok && result.data) {
        setAvailableColumns(result.data.availableColumns);
        setSelectedColumns(result.data.selectedColumns);
      }
    } catch {
      setAvailableColumns(defaultColumns);
      setSelectedColumns(defaultColumns);
    }
  }

  const modalTitle = useMemo(() => {
    if (modalMode === "add") return "Add Participant";
    if (modalMode === "edit") return `Edit ${selectedRow?.Name ?? "Participant"}`;
    return selectedRow?.Name ?? "Participant Details";
  }, [modalMode, selectedRow]);

  const displayColumns = useMemo(() => {
    const selected = selectedColumns.filter((column) => availableColumns.includes(column));
    return selected.length > 0 ? selected : availableColumns;
  }, [availableColumns, selectedColumns]);
  const categoryOptions = useMemo(() => categoryEntries.map((category) => category.name), [categoryEntries]);
  const selectedCategoryAmount = useMemo(() => {
    const category = categoryEntries.find((entry) => entry.name === selectedRow?.Category);
    return category?.amount ?? 0;
  }, [categoryEntries, selectedRow?.Category]);
  const statusOptions = useMemo(() => {
    const statuses = new Set<string>();
    rows.forEach((row) => {
      ["Registration", "Payment", "QR"].forEach((field) => {
        if (row[field]) statuses.add(row[field]);
      });
    });
    return Array.from(statuses).sort((a, b) => a.localeCompare(b));
  }, [rows]);
  const filteredRows = useMemo(() => {
    const query = searchQuery.trim().toLowerCase();
    return rows.filter((row) => {
      const matchesSearch = !query || displayColumns.some((column) => String(row[column] ?? "").toLowerCase().includes(query));
      const matchesStatus = statusFilter === "all" || ["Registration", "Payment", "QR"].some((field) => row[field] === statusFilter);
      return matchesSearch && matchesStatus;
    });
  }, [displayColumns, rows, searchQuery, statusFilter]);
  const totalPages = Math.max(1, Math.ceil(filteredRows.length / pageSize));
  const activePage = Math.min(currentPage, totalPages);
  const pageStart = filteredRows.length === 0 ? 0 : (activePage - 1) * pageSize + 1;
  const pageEnd = Math.min(activePage * pageSize, filteredRows.length);
  const paginatedRows = filteredRows.slice((activePage - 1) * pageSize, activePage * pageSize);

  useEffect(() => {
    setCurrentPage(1);
  }, [pageSize, searchQuery, statusFilter, selectedColumns]);

  useEffect(() => {
    if (currentPage > totalPages) setCurrentPage(totalPages);
  }, [currentPage, totalPages]);

  function openModal(mode: ModalMode, row?: AdminTableRow) {
    setErrorMessage("");
    setModalMessage("");
    setActiveParticipantTab("details");
    setModalMode(mode);
    setSelectedRow(row ?? emptyParticipant);
  }

  function closeModal() {
    setModalMode(null);
    setSelectedRow(null);
  }

  function switchToEditMode() {
    setActiveParticipantTab("details");
    setModalMode("edit");
  }

  function openCategoryModal() {
    setCategoryDrafts(categoryEntries.map((category) => ({ ...category })));
    setIsCategoryModalOpen(true);
  }

  function updateCategoryDraft(index: number, patch: Partial<ParticipantCategoryOption>) {
    setCategoryDrafts((drafts) => drafts.map((category, categoryIndex) => (
      categoryIndex === index ? { ...category, ...patch } : category
    )));
  }

  function addCategoryDraft() {
    setCategoryDrafts((drafts) => [...drafts, { name: "", amount: 0 }]);
  }

  function removeCategoryDraft(index: number) {
    setCategoryDrafts((drafts) => drafts.filter((_, categoryIndex) => categoryIndex !== index));
  }

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!modalMode || modalMode === "view") return;

    const formData = new FormData(event.currentTarget);
    const nextRow = editableFields.reduce<AdminTableRow>((record, field) => {
      record[field] = String(formData.get(field) ?? "");
      return record;
    }, { id: selectedRow?.id ?? "", chapterId: String(formData.get("chapterId") ?? ""), Actions: "View / Edit" });
    const categoryAmount = categoryEntries.find((category) => category.name === nextRow.Category)?.amount ?? 0;
    nextRow.Amount = formatCategoryAmount(categoryAmount);
    nextRow.Name = [nextRow["First Name"], nextRow["Middle Name"], nextRow["Last Name"]].filter(Boolean).join(" ");
    if (!String(nextRow["First Name"] ?? "").trim() || !String(nextRow["Last Name"] ?? "").trim()) {
      setErrorMessage("First name and last name are required.");
      return;
    }

    setIsSaving(true);
    setErrorMessage("");
    try {
      const response = await fetch("/api/v1/admin/participants", {
        method: modalMode === "add" ? "POST" : "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(nextRow)
      });
      const result = await response.json() as ApiResponse<AdminTableRow>;
      if (!response.ok || !result.ok || !result.data) {
        throw new Error(result.error?.message ?? "Participant could not be saved.");
      }

      if (modalMode === "add") {
        setRows((currentRows) => [result.data as AdminTableRow, ...currentRows]);
        await loadReferenceSettings();
      } else {
        setRows((currentRows) => currentRows.map((row) => row.id === result.data?.id ? result.data as AdminTableRow : row));
      }
      closeModal();
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Participant could not be saved.");
    } finally {
      setIsSaving(false);
    }
  }

  async function handleReferenceSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    setIsSaving(true);
    setErrorMessage("");
    try {
      const response = await fetch("/api/v1/admin/participants/reference", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prefix: String(formData.get("prefix") ?? "") })
      });
      const result = await response.json() as ApiResponse<ReferenceSettings>;
      if (!response.ok || !result.ok || !result.data) {
        throw new Error(result.error?.message ?? "Reference settings could not be saved.");
      }
      setReferenceSettings(result.data);
      setIsReferenceModalOpen(false);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Reference settings could not be saved.");
    } finally {
      setIsSaving(false);
    }
  }

  async function handleCategorySubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setIsSaving(true);
    setErrorMessage("");
    try {
      const response = await fetch("/api/v1/admin/participants/categories", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ categories: categoryDrafts })
      });
      const result = await response.json() as ApiResponse<CategorySettings>;
      if (!response.ok || !result.ok || !result.data) {
        throw new Error(result.error?.message ?? "Participant categories could not be saved.");
      }
      setCategoryEntries(normalizeCategoryEntries(result.data));
      setIsCategoryModalOpen(false);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Participant categories could not be saved.");
    } finally {
      setIsSaving(false);
    }
  }

  async function handleEmailTemplateSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    setIsSaving(true);
    setErrorMessage("");
    try {
      const response = await fetch("/api/v1/admin/participants/email-template", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          subject: String(formData.get("subject") ?? ""),
          body: String(formData.get("body") ?? "")
        })
      });
      const result = await response.json() as ApiResponse<EmailTemplateSettings>;
      if (!response.ok || !result.ok || !result.data) {
        throw new Error(result.error?.message ?? "Participant email template could not be saved.");
      }
      setEmailTemplate(result.data);
      setIsEmailTemplateModalOpen(false);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Participant email template could not be saved.");
    } finally {
      setIsSaving(false);
    }
  }

  async function handleDefaultPasswordSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    setIsSaving(true);
    setErrorMessage("");
    try {
      const response = await fetch("/api/v1/admin/participants/default-password", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ password: String(formData.get("password") ?? "") })
      });
      const result = await response.json() as ApiResponse<DefaultPasswordSettings>;
      if (!response.ok || !result.ok || !result.data) {
        throw new Error(result.error?.message ?? "Default password could not be saved.");
      }
      setDefaultPasswordSettings(result.data);
      setIsDefaultPasswordModalOpen(false);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Default password could not be saved.");
    } finally {
      setIsSaving(false);
    }
  }

  async function handleColumnSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const nextColumns = formData.getAll("columns").map((column) => String(column));
    setIsSaving(true);
    setErrorMessage("");
    try {
      const response = await fetch("/api/v1/admin/participants/columns", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ columns: nextColumns })
      });
      const result = await response.json() as ApiResponse<ColumnSettings>;
      if (!response.ok || !result.ok || !result.data) {
        throw new Error(result.error?.message ?? "Participant table columns could not be saved.");
      }
      setAvailableColumns(result.data.availableColumns);
      setSelectedColumns(result.data.selectedColumns);
      setIsColumnModalOpen(false);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Participant table columns could not be saved.");
    } finally {
      setIsSaving(false);
    }
  }

  async function handleImportSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setIsSaving(true);
    setErrorMessage("");
    setImportSummary("");
    try {
      const formData = new FormData(event.currentTarget);
      const response = await fetch("/api/v1/admin/participants/import", {
        method: "POST",
        body: formData
      });
      const result = await response.json() as ApiResponse<ImportResult>;
      if (!response.ok || !result.ok || !result.data) {
        throw new Error(result.error?.message ?? "Participants could not be imported.");
      }
      setRows((currentRows) => {
        const importedById = new Map(result.data?.rows.map((row) => [row.id, row]));
        const remainingRows = currentRows.filter((row) => !importedById.has(row.id));
        return [...(result.data?.rows ?? []), ...remainingRows];
      });
      await loadCategoryOptions();
      await loadChapterOptions();
      await loadReferenceSettings();
      setImportSummary(`${result.data.imported} participants imported. ${result.data.qrIssued} QR codes issued for paid participants. ${result.data.skipped} rows skipped.`);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Participants could not be imported.");
    } finally {
      setIsSaving(false);
    }
  }

  async function sendPasswordReset() {
    if (!selectedRow?.id) return;
    setIsSaving(true);
    setErrorMessage("");
    setModalMessage("");
    try {
      const response = await fetch(`/api/v1/admin/participants/${selectedRow.id}/reset-password`, { method: "POST" });
      const result = await response.json() as ApiResponse<{ email: string; delivery: string }>;
      if (!response.ok || !result.ok || !result.data) {
        throw new Error(result.error?.message ?? "Password reset link could not be sent.");
      }
      setModalMessage(`Password reset link ${result.data.delivery === "queued" ? "queued for" : "logged for"} ${result.data.email}.`);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Password reset link could not be sent.");
    } finally {
      setIsSaving(false);
    }
  }

  function fieldOptions(field: string) {
    return field === "Category" ? categoryOptions : optionsForField(field);
  }

  async function handleChapterSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setIsSaving(true);
    setErrorMessage("");
    try {
      const response = await fetch("/api/v1/admin/participants/chapters", {
        method: editingChapterId ? "PATCH" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id: editingChapterId, name: chapterDraftName })
      });
      const result = await response.json() as ApiResponse<ChapterSettings>;
      if (!response.ok || !result.ok || !result.data) throw new Error(result.error?.message ?? "Chapter could not be saved.");
      setChapterOptions(result.data.chapters);
      setChapterDraftName("");
      setEditingChapterId("");
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Chapter could not be saved.");
    } finally {
      setIsSaving(false);
    }
  }

  async function deleteChapter(id: string) {
    setIsSaving(true);
    setErrorMessage("");
    try {
      const response = await fetch("/api/v1/admin/participants/chapters", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id })
      });
      const result = await response.json() as ApiResponse<ChapterSettings>;
      if (!response.ok || !result.ok || !result.data) throw new Error(result.error?.message ?? "Chapter could not be deleted.");
      setChapterOptions(result.data.chapters);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Chapter could not be deleted.");
    } finally {
      setIsSaving(false);
    }
  }

  return (
    <>
    <section id="records" className="admin-panel">
      <div className="admin-panel-head">
        <div>
          <span className="admin-kicker">Records</span>
          <h2>Participants List</h2>
          <p className="admin-muted">Reference format: {referenceSettings.prefix} · Next: {referenceSettings.nextPreview}</p>
          {isLoading ? <p className="admin-muted">Loading database records...</p> : null}
        </div>
        <div className="admin-list-tools">
          <div className="admin-filter-row">
            <input
              aria-label="Search Participants"
              onChange={(event) => setSearchQuery(event.target.value)}
              placeholder="Search records..."
              type="search"
              value={searchQuery}
            />
            <select aria-label="Filter status" onChange={(event) => setStatusFilter(event.target.value)} value={statusFilter}>
              <option value="all">All statuses</option>
              {statusOptions.map((status) => <option key={status} value={status}>{status}</option>)}
            </select>
            <select
              aria-label="Records per page"
              onChange={(event) => setPageSize(Number(event.target.value))}
              value={pageSize}
            >
              {[20, 50, 100, 200].map((size) => <option key={size} value={size}>{size} per page</option>)}
            </select>
          </div>
          <button className="admin-primary" type="button" onClick={() => openModal("add")}>Add Participant</button>
        </div>
      </div>
      {errorMessage ? <p className="admin-inline-error">{errorMessage}</p> : null}
      <div className="admin-table-wrap">
        <table className="admin-table">
          <thead>
            <tr>{displayColumns.map((column) => <th key={column}>{column}</th>)}</tr>
          </thead>
          <tbody>
            {paginatedRows.map((row, index) => (
              <tr
                className="admin-clickable-row"
                key={row.Reference || `participant-${index}`}
                onClick={() => openModal("view", row)}
                tabIndex={0}
                onKeyDown={(event) => {
                  if (event.key === "Enter" || event.key === " ") openModal("view", row);
                }}
              >
                {displayColumns.map((column) => (
                  <td key={column}>
                    {column === "QR" && row[column] === "Issued" && row.id ? (
                      <span className="admin-qr-cell">
                        <span className={`admin-status ${statusClass(row[column] ?? "")}`}>{row[column] ?? ""}</span>
                        <a
                          className="admin-qr-download"
                          href={`/api/v1/admin/participants/${row.id}/qr`}
                          onClick={(event) => event.stopPropagation()}
                        >
                          Download QR
                        </a>
                      </span>
                    ) : ["Registration", "Payment", "QR"].includes(column) ? (
                      <span className={`admin-status ${statusClass(row[column] ?? "")}`}>{row[column] ?? ""}</span>
                    ) : (
                      row[column]
                    )}
                  </td>
                ))}
              </tr>
            ))}
            {filteredRows.length === 0 ? (
              <tr>
                <td colSpan={displayColumns.length}>
                  <span className="admin-empty-state">No participant records match the current filters.</span>
                </td>
              </tr>
            ) : null}
          </tbody>
        </table>
      </div>
      <div className="admin-pagination">
        <span>
          Showing {pageStart}-{pageEnd} of {filteredRows.length} records
        </span>
        <div>
          <button className="admin-secondary" type="button" onClick={() => setCurrentPage((page) => Math.max(1, page - 1))} disabled={activePage <= 1}>Previous</button>
          <strong>Page {activePage} of {totalPages}</strong>
          <button className="admin-secondary" type="button" onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))} disabled={activePage >= totalPages}>Next</button>
        </div>
      </div>
    </section>

    <section id="workflow" className="admin-panel">
      <div className="admin-panel-head">
        <div>
          <span className="admin-kicker">Workflow</span>
          <h2>Operational Steps</h2>
        </div>
        <span>{workflow.length} steps</span>
      </div>
      <ol className="admin-steps">
        {workflow.map((step, index) => (
          <li key={step}>
            <span>{index + 1}</span>
            <strong>{step}</strong>
          </li>
        ))}
      </ol>
    </section>

    <section id="configuration" className="admin-panel">
      <div className="admin-panel-head">
        <div>
          <span className="admin-kicker">Settings</span>
          <h2>Participant Configuration</h2>
          <p className="admin-muted">Manage generated references, category options, and chapter options used by participant records.</p>
        </div>
      </div>
      <div className="admin-config-actions">
        <button className="admin-secondary" type="button" onClick={() => { setImportSummary(""); setIsImportModalOpen(true); }}>Import Participants</button>
        <button className="admin-secondary" type="button" onClick={() => setIsColumnModalOpen(true)}>Configure Columns</button>
        <button className="admin-secondary" type="button" onClick={() => setIsReferenceModalOpen(true)}>Configure Reference</button>
        <button className="admin-secondary" type="button" onClick={() => setIsChapterModalOpen(true)}>Configure Chapters</button>
        <button className="admin-secondary" type="button" onClick={openCategoryModal}>Configure Categories</button>
        <button className="admin-secondary" type="button" onClick={() => setIsDefaultPasswordModalOpen(true)}>Configure Default Password</button>
        <button className="admin-secondary" type="button" onClick={() => setIsEmailTemplateModalOpen(true)}>Configure Email Template</button>
      </div>

      {isDefaultPasswordModalOpen ? (
        <div className="admin-modal-backdrop" role="presentation">
          <section className="admin-modal admin-modal-narrow" role="dialog" aria-modal="true" aria-labelledby="default-password-modal-title">
            <div className="admin-modal-head">
              <div>
                <span className="admin-kicker">Participants</span>
                <h2 id="default-password-modal-title">Configure Default Password</h2>
              </div>
              <button className="admin-modal-close" type="button" aria-label="Close default password modal" onClick={() => setIsDefaultPasswordModalOpen(false)}>X</button>
            </div>
            <form className="admin-form" onSubmit={handleDefaultPasswordSubmit}>
              <label className="field">
                Paid / Comped Default Password
                <input minLength={8} name="password" type="text" defaultValue={defaultPasswordSettings.password} required />
              </label>
              <p className="admin-muted">This password is used only when creating new paid or comped participant user accounts. Existing users keep their current password unless they use Reset Password.</p>
              <div className="admin-form-footer">
                <button className="admin-primary" type="submit" disabled={isSaving}>{isSaving ? "Saving..." : "Save Password"}</button>
                <button className="admin-secondary" type="button" onClick={() => setIsDefaultPasswordModalOpen(false)} disabled={isSaving}>Cancel</button>
              </div>
            </form>
          </section>
        </div>
      ) : null}

      {isImportModalOpen ? (
        <div className="admin-modal-backdrop" role="presentation">
          <section className="admin-modal admin-modal-narrow" role="dialog" aria-modal="true" aria-labelledby="import-modal-title">
            <div className="admin-modal-head">
              <div>
                <span className="admin-kicker">Participants</span>
                <h2 id="import-modal-title">Import Participants</h2>
              </div>
              <button className="admin-modal-close" type="button" aria-label="Close import modal" onClick={() => setIsImportModalOpen(false)}>X</button>
            </div>
            <form className="admin-form" onSubmit={handleImportSubmit}>
              <a className="admin-template-link" href="/api/v1/admin/participants/import/template">Download CSV Template</a>
              <label className="field">
                CSV File
                <input name="file" type="file" accept=".csv,text/csv" required />
              </label>
              <p className="admin-muted">Template includes 10 sample rows. Amount values from the CSV update category pricing, and paid participants are automatically issued QR codes.</p>
              {importSummary ? <p className="admin-inline-note">{importSummary}</p> : null}
              <div className="admin-form-footer">
                <button className="admin-primary" type="submit" disabled={isSaving}>{isSaving ? "Importing..." : "Import CSV"}</button>
                <button className="admin-secondary" type="button" onClick={() => setIsImportModalOpen(false)} disabled={isSaving}>Cancel</button>
              </div>
            </form>
          </section>
        </div>
      ) : null}

      {modalMode && selectedRow ? (
        <div className="admin-modal-backdrop" role="presentation">
          <section className="admin-modal" role="dialog" aria-modal="true" aria-labelledby="participant-modal-title">
            <div className="admin-modal-head">
              <div>
                <span className="admin-kicker">Participants</span>
                <h2 id="participant-modal-title">{modalTitle}</h2>
              </div>
              <button className="admin-modal-close" type="button" aria-label="Close participant modal" onClick={closeModal}>X</button>
            </div>

            <form className="admin-form" onSubmit={handleSubmit}>
              {modalMode !== "add" ? (
                <div className="admin-modal-tabs" role="tablist" aria-label="Participant modal sections">
                  <button className={activeParticipantTab === "details" ? "active" : ""} type="button" role="tab" aria-selected={activeParticipantTab === "details"} onClick={() => setActiveParticipantTab("details")}>Details</button>
                  <button className={activeParticipantTab === "activity" ? "active" : ""} type="button" role="tab" aria-selected={activeParticipantTab === "activity"} onClick={() => setActiveParticipantTab("activity")}>Activity</button>
                </div>
              ) : null}

              {activeParticipantTab === "details" ? (
                <>
                  <div className="form-grid">
                    {editableFields.map((field) => (
                      <label className="field" key={field}>
                        {field}
                        {field === "Chapter" ? (
                          <select
                            name="chapterId"
                            defaultValue={selectedRow.chapterId ?? ""}
                            disabled={modalMode === "view" || selectedRow.Category !== "Chapter Delegate"}
                          >
                            <option value="">Select chapter</option>
                            {chapterOptions.map((chapter) => <option key={chapter.id} value={chapter.id}>{chapter.name}</option>)}
                          </select>
                        ) : ["Category", "Registration", "Payment", "QR"].includes(field) ? (
                          <select
                            name={field}
                            value={selectedRow[field] ?? ""}
                            disabled={modalMode === "view"}
                            onChange={(event) => setSelectedRow((currentRow) => {
                              if (!currentRow) return currentRow;
                              const nextRow = { ...currentRow, [field]: event.target.value };
                              if (field === "Category") {
                                const amount = categoryEntries.find((category) => category.name === event.target.value)?.amount ?? 0;
                                nextRow.Amount = formatCategoryAmount(amount);
                                if (event.target.value !== "Chapter Delegate") nextRow.chapterId = "";
                              }
                              if (field === "Payment" && event.target.value === "Paid" && nextRow.QR !== "Issued") nextRow.QR = "Issued";
                              return nextRow;
                            })}
                          >
                            {fieldOptions(field).map((option) => <option key={option}>{option}</option>)}
                          </select>
                        ) : (
                          <input
                            name={field}
                            defaultValue={field === "Reference" && modalMode === "add" ? referenceSettings.nextPreview : selectedRow[field]}
                            readOnly={modalMode === "view" || field === "Reference"}
                            required={field === "First Name" || field === "Last Name"}
                            placeholder={field}
                          />
                        )}
                      </label>
                    ))}
                  </div>
                  <div className="admin-amount-preview">
                    <span className="admin-kicker">Category Amount</span>
                    <strong>{formatCategoryAmount(selectedCategoryAmount)}</strong>
                  </div>
                  {modalMode !== "view" && selectedRow.Payment === "Paid" && selectedRow.QR === "Issued" ? (
                    <p className="admin-inline-note">Payment is marked paid, so QR is suggested as issued.</p>
                  ) : null}
                  {modalMessage ? <p className="admin-inline-note">{modalMessage}</p> : null}
                  {selectedRow.QR === "Issued" && selectedRow.id ? (
                    <div className="admin-qr-preview">
                      <div>
                        <span className="admin-kicker">QR Credential</span>
                        <strong>{selectedRow.Reference}</strong>
                        <p className="admin-muted">Issued QR code preview for check-in and scanner validation.</p>
                        <a className="admin-qr-download" href={`/api/v1/admin/participants/${selectedRow.id}/qr`}>Download QR</a>
                      </div>
                      <img src={`/api/v1/admin/participants/${selectedRow.id}/qr?preview=1`} alt={`QR code for ${selectedRow.Name}`} />
                    </div>
                  ) : null}
                </>
              ) : (
                <div className="admin-activity-grid">
                  <section>
                    <span className="admin-kicker">Breakout Sessions</span>
                    <ul>
                      <li><strong>Future-Ready HR Analytics</strong><span>Day 1 · 2:00 PM · Ballroom A</span></li>
                      <li><strong>People Experience Design Lab</strong><span>Day 2 · 10:30 AM · Room 204</span></li>
                    </ul>
                  </section>
                  <section>
                    <span className="admin-kicker">Plenary Sessions</span>
                    <ul>
                      <li><strong>Powering the Next HR Shift</strong><span>Day 1 · 9:00 AM · Main Hall</span></li>
                      <li><strong>Leadership in a Skills-First Economy</strong><span>Day 2 · 1:00 PM · Main Hall</span></li>
                    </ul>
                  </section>
                  <section>
                    <span className="admin-kicker">Certificate</span>
                    <div className="admin-certificate-card">
                      <strong>Certificate of Attendance</strong>
                      <span>Status: Ready for generation after attendance validation</span>
                      <span>Credits: 16 conference learning hours</span>
                    </div>
                  </section>
                </div>
              )}
              <div className="admin-form-footer">
                {modalMode !== "add" ? (
                  <button className="admin-secondary" type="button" onClick={() => void sendPasswordReset()} disabled={isSaving}>
                    {isSaving ? "Sending..." : "Reset Password"}
                  </button>
                ) : null}
                {activeParticipantTab === "activity" ? (
                  modalMode === "view" ? (
                    <button
                      className="admin-primary"
                      type="button"
                      onClick={(event) => {
                        event.preventDefault();
                        event.stopPropagation();
                        switchToEditMode();
                      }}
                    >
                      Edit Participant
                    </button>
                  ) : null
                ) : modalMode === "view" ? (
                  <button
                    className="admin-primary"
                    type="button"
                    onClick={(event) => {
                      event.preventDefault();
                      event.stopPropagation();
                      switchToEditMode();
                    }}
                  >
                    Edit Participant
                  </button>
                ) : (
                  <button className="admin-primary" type="submit" disabled={isSaving}>{isSaving ? "Saving..." : modalMode === "add" ? "Create Participant" : "Save Changes"}</button>
                )}
                <button className="admin-secondary" type="button" onClick={closeModal} disabled={isSaving}>Cancel</button>
              </div>
            </form>
          </section>
        </div>
      ) : null}

      {isReferenceModalOpen ? (
        <div className="admin-modal-backdrop" role="presentation">
          <section className="admin-modal admin-modal-narrow" role="dialog" aria-modal="true" aria-labelledby="reference-modal-title">
            <div className="admin-modal-head">
              <div>
                <span className="admin-kicker">Participants</span>
                <h2 id="reference-modal-title">Configure Reference</h2>
              </div>
              <button className="admin-modal-close" type="button" aria-label="Close reference modal" onClick={() => setIsReferenceModalOpen(false)}>X</button>
            </div>
            <form className="admin-form" onSubmit={handleReferenceSubmit}>
              <label className="field">
                Reference Format
                <input name="prefix" defaultValue={referenceSettings.prefix} placeholder="Ref-AC2026" />
              </label>
              <p className="admin-muted">Next generated reference: {referenceSettings.nextPreview}</p>
              <div className="admin-form-footer">
                <button className="admin-primary" type="submit" disabled={isSaving}>{isSaving ? "Saving..." : "Save Format"}</button>
                <button className="admin-secondary" type="button" onClick={() => setIsReferenceModalOpen(false)} disabled={isSaving}>Cancel</button>
              </div>
            </form>
          </section>
        </div>
      ) : null}

      {isColumnModalOpen ? (
        <div className="admin-modal-backdrop" role="presentation">
          <section className="admin-modal admin-modal-narrow" role="dialog" aria-modal="true" aria-labelledby="columns-modal-title">
            <div className="admin-modal-head">
              <div>
                <span className="admin-kicker">Participants</span>
                <h2 id="columns-modal-title">Configure Columns</h2>
              </div>
              <button className="admin-modal-close" type="button" aria-label="Close columns modal" onClick={() => setIsColumnModalOpen(false)}>X</button>
            </div>
            <form className="admin-form" onSubmit={handleColumnSubmit}>
              <div className="admin-checkbox-list">
                {availableColumns.map((column) => (
                  <label className="admin-checkbox-row" key={column}>
                    <input name="columns" type="checkbox" value={column} defaultChecked={selectedColumns.includes(column)} />
                    <span>{column}</span>
                  </label>
                ))}
              </div>
              <p className="admin-muted">Choose the columns that appear in the Participants List. Record details remain available when editing a participant.</p>
              <div className="admin-form-footer">
                <button className="admin-primary" type="submit" disabled={isSaving}>{isSaving ? "Saving..." : "Save Columns"}</button>
                <button className="admin-secondary" type="button" onClick={() => setIsColumnModalOpen(false)} disabled={isSaving}>Cancel</button>
              </div>
            </form>
          </section>
        </div>
      ) : null}

      {isCategoryModalOpen ? (
        <div className="admin-modal-backdrop" role="presentation">
          <section className="admin-modal admin-modal-narrow" role="dialog" aria-modal="true" aria-labelledby="category-modal-title">
            <div className="admin-modal-head">
              <div>
                <span className="admin-kicker">Participants</span>
                <h2 id="category-modal-title">Configure Categories</h2>
              </div>
              <button className="admin-modal-close" type="button" aria-label="Close category modal" onClick={() => setIsCategoryModalOpen(false)}>X</button>
            </div>
            <form className="admin-form" onSubmit={handleCategorySubmit}>
              <div className="admin-category-rate-list">
                <div className="admin-category-rate-head">
                  <span>Category</span>
                  <span>Amount</span>
                  <span>Action</span>
                </div>
                {categoryDrafts.map((category, index) => (
                  <div className="admin-category-rate-row" key={`category-${index}`}>
                    <input
                      aria-label={`Category ${index + 1} name`}
                      value={category.name}
                      onChange={(event) => updateCategoryDraft(index, { name: event.target.value })}
                      placeholder="Category name"
                      required
                    />
                    <input
                      aria-label={`Category ${index + 1} amount`}
                      min="0"
                      step="0.01"
                      type="number"
                      value={category.amount}
                      onChange={(event) => updateCategoryDraft(index, { amount: Number(event.target.value) })}
                      placeholder="0.00"
                      required
                    />
                    <button className="admin-row-action" type="button" onClick={() => removeCategoryDraft(index)} disabled={category.name === "Guest Only" || categoryDrafts.length <= 1}>Remove</button>
                  </div>
                ))}
              </div>
              <button className="admin-secondary" type="button" onClick={addCategoryDraft}>Add Category</button>
              <p className="admin-muted">Amounts are used when creating or updating participant registration totals. Guest Only remains available as the default category.</p>
              <div className="admin-form-footer">
                <button className="admin-primary" type="submit" disabled={isSaving}>{isSaving ? "Saving..." : "Save Categories"}</button>
                <button className="admin-secondary" type="button" onClick={() => setIsCategoryModalOpen(false)} disabled={isSaving}>Cancel</button>
              </div>
            </form>
          </section>
        </div>
      ) : null}

      {isChapterModalOpen ? (
        <div className="admin-modal-backdrop" role="presentation">
          <section className="admin-modal admin-modal-narrow" role="dialog" aria-modal="true" aria-labelledby="chapter-modal-title">
            <div className="admin-modal-head">
              <div>
                <span className="admin-kicker">Participants</span>
                <h2 id="chapter-modal-title">Configure Chapters</h2>
              </div>
              <button className="admin-modal-close" type="button" aria-label="Close chapter modal" onClick={() => setIsChapterModalOpen(false)}>X</button>
            </div>
            <form className="admin-form" onSubmit={handleChapterSubmit}>
              <label className="field">
                Chapter Name
                <input value={chapterDraftName} onChange={(event) => setChapterDraftName(event.target.value)} placeholder="PMAP Cebu Chapter" />
              </label>
              <div className="admin-form-footer">
                <button className="admin-primary" type="submit" disabled={isSaving || !chapterDraftName.trim()}>{isSaving ? "Saving..." : editingChapterId ? "Save Chapter" : "Add Chapter"}</button>
                {editingChapterId ? <button className="admin-secondary" type="button" onClick={() => { setEditingChapterId(""); setChapterDraftName(""); }}>Cancel Edit</button> : null}
              </div>
              <div className="admin-config-list">
                {chapterOptions.map((chapter) => (
                  <div className="admin-config-row" key={chapter.id}>
                    <strong>{chapter.name}</strong>
                    <span>
                      <button className="admin-row-action" type="button" onClick={() => { setEditingChapterId(chapter.id); setChapterDraftName(chapter.name); }}>Edit</button>
                      <button className="admin-row-action" type="button" onClick={() => void deleteChapter(chapter.id)} disabled={isSaving}>Delete</button>
                    </span>
                  </div>
                ))}
              </div>
            </form>
          </section>
        </div>
      ) : null}

      {isEmailTemplateModalOpen ? (
        <div className="admin-modal-backdrop" role="presentation">
          <section className="admin-modal admin-modal-narrow" role="dialog" aria-modal="true" aria-labelledby="email-template-modal-title">
            <div className="admin-modal-head">
              <div>
                <span className="admin-kicker">Participants</span>
                <h2 id="email-template-modal-title">Configure Email Template</h2>
              </div>
              <button className="admin-modal-close" type="button" aria-label="Close email template modal" onClick={() => setIsEmailTemplateModalOpen(false)}>X</button>
            </div>
            <form className="admin-form" onSubmit={handleEmailTemplateSubmit}>
              <label className="field">
                Subject
                <input name="subject" defaultValue={emailTemplate.subject} placeholder="Your PMAP Annual Conference QR code is ready" />
              </label>
              <label className="field">
                Email Body
                <textarea name="body" rows={10} defaultValue={emailTemplate.body} />
              </label>
              <p className="admin-muted">Available fields: {"{{participantName}}"}, {"{{reference}}"}, {"{{category}}"}, {"{{company}}"}, {"{{email}}"}</p>
              <div className="admin-form-footer">
                <button className="admin-primary" type="submit" disabled={isSaving}>{isSaving ? "Saving..." : "Save Template"}</button>
                <button className="admin-secondary" type="button" onClick={() => setIsEmailTemplateModalOpen(false)} disabled={isSaving}>Cancel</button>
              </div>
            </form>
          </section>
        </div>
      ) : null}
    </section>
    </>
  );
}