import Link from "next/link";
import { notFound } from "next/navigation";
import { requireAdminSession } from "../../auth";
import { AdminShell } from "../admin-shell";
import { adminModules, getAdminModule } from "../workflows";
import { ParticipantsRecords, type AdminTableRow } from "./participants-records";

const participantRows: AdminTableRow[] = [
  {
    Reference: "AC26-0001",
    Name: "Maria Santos",
    Email: "maria.santos@peopleworks.ph",
    Company: "PeopleWorks Solutions",
    Category: "PMAP Member",
    Amount: "PHP 0.00",
    Registration: "Confirmed",
    Payment: "Paid",
    QR: "Issued",
    Actions: "View / Edit"
  },
  {
    Reference: "AC26-0002",
    Name: "Jose Ramirez",
    Email: "jose.ramirez@northstarhr.com",
    Company: "Northstar HR",
    Category: "Non-member",
    Amount: "PHP 0.00",
    Registration: "Pending",
    Payment: "For Review",
    QR: "Queued",
    Actions: "Review"
  },
  {
    Reference: "AC26-0003",
    Name: "Aileen Cruz",
    Email: "aileen.cruz@talentbridge.com",
    Company: "TalentBridge Asia",
    Category: "Chapter Delegate",
    Amount: "PHP 0.00",
    Registration: "Confirmed",
    Payment: "Paid",
    QR: "Issued",
    Actions: "View / Edit"
  },
  {
    Reference: "AC26-0004",
    Name: "Ramon De Leon",
    Email: "ramon.deleon@globalfoods.com",
    Company: "Global Foods Corp.",
    Category: "Corporate Group",
    Amount: "PHP 0.00",
    Registration: "Confirmed",
    Payment: "Invoice",
    QR: "Hold",
    Actions: "Verify"
  },
  {
    Reference: "AC26-0005",
    Name: "Katrina Lim",
    Email: "katrina.lim@futurebank.ph",
    Company: "FutureBank Philippines",
    Category: "PMAP Member",
    Amount: "PHP 0.00",
    Registration: "Confirmed",
    Payment: "Paid",
    QR: "Issued",
    Actions: "View / Edit"
  },
  {
    Reference: "AC26-0006",
    Name: "Miguel Tan",
    Email: "miguel.tan@cloudnine.io",
    Company: "CloudNine Digital",
    Category: "Speaker",
    Amount: "PHP 0.00",
    Registration: "Confirmed",
    Payment: "Comped",
    QR: "Issued",
    Actions: "View"
  },
  {
    Reference: "AC26-0007",
    Name: "Denise Uy",
    Email: "denise.uy@mindanaohr.org",
    Company: "Mindanao HR Council",
    Category: "Chapter Delegate",
    Amount: "PHP 0.00",
    Registration: "Pending",
    Payment: "Unpaid",
    QR: "Not Ready",
    Actions: "Follow Up"
  },
  {
    Reference: "AC26-0008",
    Name: "Paolo Garcia",
    Email: "paolo.garcia@buildright.com",
    Company: "BuildRight Holdings",
    Category: "Corporate Group",
    Amount: "PHP 0.00",
    Registration: "Confirmed",
    Payment: "Paid",
    QR: "Issued",
    Actions: "View / Edit"
  },
  {
    Reference: "AC26-0009",
    Name: "Sophia Reyes",
    Email: "sophia.reyes@learnlab.ph",
    Company: "LearnLab PH",
    Category: "Non-member",
    Amount: "PHP 0.00",
    Registration: "Waitlisted",
    Payment: "Pending",
    QR: "Hold",
    Actions: "Review"
  },
  {
    Reference: "AC26-0010",
    Name: "Carlo Mendoza",
    Email: "carlo.mendoza@onehealth.com",
    Company: "OneHealth Network",
    Category: "PMAP Member",
    Amount: "PHP 0.00",
    Registration: "Confirmed",
    Payment: "Paid",
    QR: "Issued",
    Actions: "View / Edit"
  }
];

export const dynamic = "force-dynamic";

export default async function AdminModulePage({ params }: { params: Promise<{ module: string }> }) {
  const { module: slug } = await params;
  await requireAdminSession(`/admin/${slug}`);
  const module = getAdminModule(slug);
  if (!module) notFound();
  const rows: AdminTableRow[] = module.slug === "participants"
    ? participantRows
    : [
      Object.fromEntries(module.listColumns.map((column, index) => [column, index === 0 ? "Sample record" : "CMS/database value"])),
      Object.fromEntries(module.listColumns.map((column, index) => [column, index === 0 ? "Pending review" : "Workflow state"]))
    ];

  return (
    <main className="admin-page">
      <AdminShell activeSlug={module.slug}>
        <section className="admin-content">
          <div className="admin-module-head">
            <div>
              <Link className="admin-back" href="/admin">Dashboard</Link>
              <span className="admin-kicker">{module.group} · {module.livePath}</span>
              <h1>{module.title}</h1>
              <p>{module.purpose}</p>
            </div>
            {module.slug !== "participants" ? (
              <div className="admin-action-bar" aria-label="Module actions">
                {module.actions.map((action, index) => (
                  <button className={index === 0 ? "admin-primary" : action.includes("Delete") || action.includes("Reject") ? "admin-danger" : "admin-secondary"} type="button" key={action}>{action}</button>
                ))}
              </div>
            ) : null}
          </div>

          <div className="admin-module-tabs" aria-label="Module sections">
            <a href="#records">Records</a>
            <a href="#workflow">Workflow</a>
            {module.slug === "participants" ? <a href="#configuration">Configuration</a> : null}
            {module.slug !== "participants" ? (
              <>
                <a href="#editor">Editor</a>
                <a href="#audit">Audit</a>
              </>
            ) : null}
          </div>

          {module.slug === "participants" ? (
            <ParticipantsRecords columns={module.listColumns} initialRows={participantRows} workflow={module.workflow} />
          ) : (
            <section id="records" className="admin-panel">
              <div className="admin-panel-head">
                <div>
                  <span className="admin-kicker">Records</span>
                  <h2>{module.title} List</h2>
                </div>
                <div className="admin-filter-row">
                  <input aria-label={`Search ${module.title}`} placeholder="Search records..." />
                  <select aria-label="Filter status" defaultValue="all">
                    <option value="all">All statuses</option>
                    <option>Published</option>
                    <option>Pending</option>
                    <option>Archived</option>
                  </select>
                </div>
              </div>
              <div className="admin-table-wrap">
                <table className="admin-table">
                  <thead>
                    <tr>{module.listColumns.map((column) => <th key={column}>{column}</th>)}</tr>
                  </thead>
                  <tbody>
                    {rows.map((row, index) => (
                      <tr key={row[module.listColumns[0] ?? ""] ?? `row-${index}`}>
                        {module.listColumns.map((column) => (
                          <td key={column}>
                            {["Registration", "Payment", "QR"].includes(column) ? (
                              <span className={`admin-status ${String(row[column]).toLowerCase().replaceAll(" ", "-")}`}>{row[column]}</span>
                            ) : column === "Actions" ? (
                              <button className="admin-row-action" type="button">{row[column]}</button>
                            ) : (
                              row[column]
                            )}
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>
          )}

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

          {module.slug !== "participants" ? (
            <>
              <section id="editor" className="admin-panel">
                <div className="admin-panel-head">
                  <div>
                    <span className="admin-kicker">Editor</span>
                    <h2>{module.title} Fields</h2>
                  </div>
                  <Link href="#audit">Review audit trail</Link>
                </div>
                <form className="admin-form">
                  <div className="form-grid">
                    {module.formFields.map((field) => (
                      <label className="field" key={field}>
                        {field}
                        {field.toLowerCase().includes("description") || field.toLowerCase().includes("message") || field.toLowerCase().includes("notes") || field.toLowerCase().includes("biography") ? (
                          <textarea rows={4} placeholder={field} />
                        ) : field.toLowerCase().includes("status") || field.toLowerCase().includes("published") || field.toLowerCase().includes("active") ? (
                          <select defaultValue="">
                            <option value="" disabled>Select {field}</option>
                            <option>Draft</option>
                            <option>Published</option>
                            <option>Active</option>
                            <option>Inactive</option>
                          </select>
                        ) : (
                          <input placeholder={field} />
                        )}
                      </label>
                    ))}
                  </div>
                  <div className="admin-form-footer">
                    <button className="admin-primary" type="button">Save Changes</button>
                    <button className="admin-secondary" type="button">Preview</button>
                    <button className="admin-secondary" type="button">Reset</button>
                  </div>
                </form>
              </section>

              <section id="audit" className="admin-panel admin-audit-panel">
                <div>
                  <span className="admin-kicker">Audit</span>
                  <h2>Change Controls</h2>
                  <p>Permission checks, reason fields for overrides, and audit entries are required before this module accepts production writes.</p>
                </div>
                <Link className="admin-secondary" href="/admin/logs">Open Logs</Link>
              </section>
            </>
          ) : null}
        </section>
      </AdminShell>
    </main>
  );
}