"use client";

import { setRequestStatusAction } from "@/app/(internal)/admin/actions";
import Image from "next/image";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useMemo, useState, useTransition } from "react";
import type { AdminRequestRow, SubmissionStatus } from "@/types/admin-submission";

type AdminRequest = AdminRequestRow;
type StatusKey = SubmissionStatus;

export type AdminConsoleView = "all" | "pending" | "approved" | "rejected";

export type AdminData = {
  meta: {
    title: string;
    subtitle: string;
    user: { name: string; role: string; avatarUrl: string };
    footerTag: string;
  };
  stats: Array<{
    id: string;
    label: string;
    value: string;
    hint: string;
    icon: string;
    accent: "none" | "pending" | "confirmed" | "progress";
    progressPercent?: number;
  }>;
  filters: {
    status: { label: string; options: { value: string; label: string }[] };
    companyGroup: { label: string; options: { value: string; label: string }[] };
    searchPlaceholder: string;
    exportLabel: string;
  };
  table: {
    columns: Record<string, string>;
    pageSize: number;
  };
  statusMap: Record<
    StatusKey,
    {
      label: string;
      borderClass: string;
      dotClass: string;
    }
  >;
  requests: AdminRequest[];
  footer: { legal: string[] };
};

function StatCard({
  item,
}: {
  item: AdminData["stats"][0];
}) {
  const accent =
    item.accent === "pending"
      ? "border-l-4 border-secondary"
      : item.accent === "confirmed"
        ? "border-l-4 border-primary"
        : "";

  return (
    <div className={`glass-panel p-6 rounded-xl relative overflow-hidden group ${accent}`}>
      <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity pointer-events-none">
        <span className="material-symbols-outlined text-6xl">{item.icon}</span>
      </div>
      <p
        className={`font-[var(--font-label-caps)] text-[11px] uppercase tracking-widest mb-2 flex items-center gap-2 ${
          item.accent === "pending"
            ? "text-secondary"
            : item.accent === "confirmed"
              ? "text-primary"
              : "text-outline"
        }`}
      >
        {item.accent === "pending" || item.accent === "confirmed" ? (
          <span
            className={`status-led w-2 h-2 rounded-full ${
              item.accent === "pending" ? "bg-secondary" : "bg-primary"
            }`}
          />
        ) : null}
        {item.label}
      </p>
      <h3 className="font-[var(--font-display-lg)] text-2xl md:text-3xl text-on-surface">{item.value}</h3>
      {item.accent === "progress" && typeof item.progressPercent === "number" ? (
        <div className="mt-4 w-full bg-surface-container-high h-1.5 rounded-full overflow-hidden">
          <div
            className="h-full gold-gradient-bg transition-all"
            style={{ width: `${item.progressPercent}%` }}
          />
        </div>
      ) : (
        <div className="mt-4 flex items-center gap-2 min-h-[20px]">
          {item.hint ? (
            <span
              className={`text-xs ${
                item.accent === "pending"
                  ? "text-secondary"
                  : item.accent === "confirmed"
                    ? "text-primary"
                    : "text-primary"
              }`}
            >
              {item.hint}
            </span>
          ) : null}
        </div>
      )}
    </div>
  );
}

const PENDING_THRESHOLD = 50;

function formatCount(n: number) {
  return n.toLocaleString("en-US");
}

function buildLiveStats(data: AdminData) {
  const req = data.requests;
  const total = req.length;
  const pending = req.filter((r) => r.status === "pending").length;
  const approved = req.filter((r) => r.status === "approved").length;
  const rejected = req.filter((r) => r.status === "rejected").length;
  const conversionPct = total > 0 ? Math.round((approved / total) * 100) : 0;

  return data.stats.map((s) => {
    switch (s.id) {
      case "total":
        return {
          ...s,
          value: formatCount(total),
          hint: `${formatCount(approved)} approved · ${formatCount(pending)} pending · ${formatCount(rejected)} rejected`,
        };
      case "pending":
        return {
          ...s,
          value: formatCount(pending),
          hint:
            pending >= PENDING_THRESHOLD
              ? `At or above threshold (${PENDING_THRESHOLD})`
              : `Below threshold (${PENDING_THRESHOLD})`,
        };
      case "confirmed":
        return {
          ...s,
          value: formatCount(approved),
          hint: total > 0 ? `${Math.round((approved / total) * 100)}% of all requests` : "No requests yet",
        };
      case "conversion":
        return {
          ...s,
          value: `${conversionPct}%`,
          hint: total > 0 ? `Approved share: ${approved} / ${total}` : "",
          progressPercent: conversionPct,
        };
      default:
        return s;
    }
  });
}

export default function AdminConsole({ data, view = "all" }: { data: AdminData; view?: AdminConsoleView }) {
  const router = useRouter();
  const pathname = usePathname();
  const [isPending, startTransition] = useTransition();
  const [search, setSearch] = useState("");
  const [status, setStatus] = useState("all");
  const [companyGroup, setCompanyGroup] = useState("all");
  const [afterDate, setAfterDate] = useState("");
  const [page, setPage] = useState(1);
  const [detail, setDetail] = useState<AdminRequest | null>(null);

  const liveStats = useMemo(() => buildLiveStats(data), [data]);

  const statusFilter = view === "all" ? status : view;

  const filtered = useMemo(() => {
    let q = search.trim().toLowerCase();
    // Remove leading # if searching for ID
    if (q.startsWith("#")) {
      q = q.substring(1);
    }

    return data.requests.filter((r) => {
      if (statusFilter !== "all" && r.status !== statusFilter) return false;
      if (companyGroup !== "all" && r.segment !== companyGroup) return false;
      if (afterDate && r.submittedAt < afterDate) return false;
      if (!q) return true;

      const hay = `${r.id} ${r.fullName} ${r.company} ${r.email} ${r.phone} ${r.jobTitle} ${r.status}`.toLowerCase();
      return hay.includes(q);
    });
  }, [data.requests, search, statusFilter, companyGroup, afterDate]);

  async function commitStatus(publicId: string, next: SubmissionStatus) {
    try {
      await setRequestStatusAction(publicId, next);
      startTransition(() => router.refresh());
    } catch (e) {
      alert(e instanceof Error ? e.message : "Could not update status");
    }
  }

  const pageSize = data.table.pageSize;
  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
  const safePage = Math.min(page, totalPages);
  const sliceStart = (safePage - 1) * pageSize;
  const pageRows = filtered.slice(sliceStart, sliceStart + pageSize);

  const showingFrom = filtered.length === 0 ? 0 : sliceStart + 1;
  const showingTo = sliceStart + pageRows.length;

  return (
    <div className="bg-background text-on-surface font-[var(--font-body-base)] min-h-screen flex relative">
      <aside className="fixed left-0 top-0 h-full w-20 md:w-24 bg-surface-container-low border-r border-outline/20 flex flex-col items-center py-8 z-50">
        <div className="mb-12">
          <div className="w-12 h-12 gold-gradient-bg flex items-center justify-center rounded-lg shadow-lg">
            <span className="material-symbols-outlined text-on-primary text-3xl" style={{ fontVariationSettings: "'FILL' 1" }}>
              cloud_done
            </span>
          </div>
        </div>
        <nav className="flex flex-col gap-8 flex-1" aria-label="Admin sections">
          {(
            [
              { href: "/admin", icon: "dashboard", label: "Panel" },
              { href: "/admin/pending", icon: "hourglass_empty", label: "Pending" },
              { href: "/admin/approved", icon: "check_circle", label: "Approved" },
              { href: "/admin/rejected", icon: "cancel", label: "Rejected" },
            ] as const
          ).map((item) => {
            const active = pathname === item.href;
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`group flex flex-col items-center gap-1 ${
                  active ? "text-primary" : "text-on-surface-variant hover:text-primary"
                }`}
              >
                <span
                  className="material-symbols-outlined text-2xl transition-all duration-300 group-hover:scale-110"
                  style={active ? { fontVariationSettings: "'FILL' 1" } : undefined}
                >
                  {item.icon}
                </span>
                <span className="font-[var(--font-label-caps)] text-[8px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">
                  {item.label}
                </span>
              </Link>
            );
          })}
        </nav>
        <button
          type="button"
          className="group flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary mt-auto"
        >
          <span className="material-symbols-outlined text-2xl transition-all duration-300 group-hover:rotate-45">settings</span>
          <span className="font-[var(--font-label-caps)] text-[8px] uppercase tracking-widest">Settings</span>
        </button>
      </aside>

      <div className="flex-1 ml-20 md:ml-24 flex flex-col min-w-0">
        <header className="sticky top-0 w-full z-40 glass-panel py-4 px-[var(--spacing-gutter)] flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-4 border-b border-outline/10">
          <div className="hidden md:block min-w-0">
            <h1 className="font-[var(--font-display-lg)] text-xl text-primary uppercase tracking-tighter truncate">
              {view === "all"
                ? data.meta.title
                : view === "pending"
                  ? "Pending approval"
                  : view === "approved"
                    ? "Approved requests"
                    : "Rejected requests"}
            </h1>
            <p className="font-[var(--font-label-caps)] text-on-surface-variant text-[10px] uppercase tracking-widest">
              {data.meta.subtitle}
            </p>
          </div>
          <div className="flex-1 max-w-xl mx-0 lg:mx-8 min-w-0">
            <div className="relative group">
              <span className="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline pointer-events-none">
                search
              </span>
              <input
                className="w-full bg-surface-container-low border-none rounded-full py-2.5 pl-12 pr-4 text-on-surface placeholder:text-outline/50 focus:outline-none focus:ring-1 focus:ring-primary/40 transition-all"
                placeholder={data.filters.searchPlaceholder}
                type="search"
                value={search}
                onChange={(e) => {
                  setSearch(e.target.value);
                  setPage(1);
                }}
              />
            </div>
          </div>
          <div className="flex items-center gap-4 shrink-0 justify-end">
            <div className="flex flex-col items-end">
              <span className="font-[var(--font-label-caps)] text-[10px] text-primary uppercase tracking-widest">
                {data.meta.user.role}
              </span>
            </div>
          </div>
        </header>

        <main className="p-[var(--spacing-gutter)] max-w-7xl mx-auto w-full flex flex-col gap-8 flex-1">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-gutter)]">
            {liveStats.map((s) => (
              <StatCard key={s.id} item={s} />
            ))}
          </div>

          <section className="glass-panel px-6 py-4 rounded-xl flex flex-col lg:flex-row items-stretch lg:items-end justify-between gap-4">
            <div className="flex flex-wrap items-end gap-4 w-full lg:w-auto">
              {view === "all" ? (
                <div className="flex flex-col gap-1 min-w-[140px]">
                  <label className="font-[var(--font-label-caps)] text-[10px] text-outline uppercase tracking-wider">
                    {data.filters.status.label}
                  </label>
                  <select
                    className="bg-surface-container-high border border-outline/30 text-on-surface text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary/50"
                    value={status}
                    onChange={(e) => {
                      setStatus(e.target.value);
                      setPage(1);
                    }}
                  >
                    {data.filters.status.options.map((o) => (
                      <option key={o.value} value={o.value}>
                        {o.label}
                      </option>
                    ))}
                  </select>
                </div>
              ) : (
                <div className="flex flex-col gap-1 min-w-[140px]">
                  <span className="font-[var(--font-label-caps)] text-[10px] text-outline uppercase tracking-wider">
                    Status
                  </span>
                  <p className="text-sm text-on-surface capitalize py-2 border border-outline/20 rounded-lg px-3 bg-surface-container-high/50">
                    {view} only
                  </p>
                </div>
              )}
              <div className="flex flex-col gap-1 min-w-[160px]">
                <label className="font-[var(--font-label-caps)] text-[10px] text-outline uppercase tracking-wider">
                  {data.filters.companyGroup.label}
                </label>
                <select
                  className="bg-surface-container-high border border-outline/30 text-on-surface text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary/50"
                  value={companyGroup}
                  onChange={(e) => {
                    setCompanyGroup(e.target.value);
                    setPage(1);
                  }}
                >
                  {data.filters.companyGroup.options.map((o) => (
                    <option key={o.value} value={o.value}>
                      {o.label}
                    </option>
                  ))}
                </select>
              </div>
              <div className="flex flex-col gap-1 min-w-[160px]">
                <label className="font-[var(--font-label-caps)] text-[10px] text-outline uppercase tracking-wider">
                  Submitted after
                </label>
                <input
                  className="bg-surface-container-high border border-outline/30 text-on-surface text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary/50"
                  type="date"
                  value={afterDate}
                  onChange={(e) => {
                    setAfterDate(e.target.value);
                    setPage(1);
                  }}
                />
              </div>
            </div>
            <button
              type="button"
              className="w-full lg:w-auto border border-primary text-primary font-[var(--font-label-caps)] px-6 py-2 rounded-lg transition-all hover:bg-primary hover:text-on-primary flex items-center justify-center gap-2 uppercase tracking-wider text-xs"
              onClick={() => alert("Export is not wired (frontend-only demo).")}
            >
              <span className="material-symbols-outlined text-sm">download</span>
              {data.filters.exportLabel}
            </button>
          </section>

          <div className="glass-panel rounded-xl overflow-hidden shadow-2xl">
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse min-w-[880px]">
                <thead>
                  <tr className="bg-surface-container-high border-b border-outline/20">
                    {Object.entries(data.table.columns).map(([key, label]) => (
                      <th
                        key={key}
                        className={`px-6 py-4 font-[var(--font-label-caps)] text-outline text-[11px] uppercase tracking-widest ${
                          key === "actions" ? "text-right" : ""
                        }`}
                      >
                        {label}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody className="divide-y divide-outline/10">
                  {pageRows.map((row) => {
                    const sm = data.statusMap[row.status];
                    return (
                      <tr key={row.id} className="hover:bg-surface-container-high/40 transition-colors">
                        <td className="px-6 py-4 font-[var(--font-mono)] text-sm text-primary whitespace-nowrap">
                          #{row.id}
                        </td>
                        <td className="px-6 py-4 text-sm text-on-surface-variant whitespace-nowrap">{row.displayDate}</td>
                        <td className="px-6 py-4">
                          <div className="font-[var(--font-body-base)] text-sm font-semibold text-on-surface">{row.fullName}</div>
                          <div className="text-xs text-outline">{row.jobTitle}</div>
                        </td>
                        <td className="px-6 py-4 text-sm">{row.company}</td>
                        <td className="px-6 py-4">
                          <div className="text-sm">{row.email}</div>
                          <div className="text-xs text-outline">{row.phone}</div>
                        </td>
                        <td className="px-6 py-4">
                          <span
                            className={`px-3 py-1 rounded-full text-[10px] font-[var(--font-label-caps)] border uppercase tracking-wider flex items-center gap-1.5 w-fit ${sm.borderClass}`}
                          >
                            <span className={`w-1.5 h-1.5 rounded-full status-led ${sm.dotClass}`} />
                            {sm.label}
                          </span>
                        </td>
                        <td className="px-6 py-4 text-right">
                          <div className="flex items-center justify-end gap-1 flex-wrap justify-end">
                            <button
                              type="button"
                              className="p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-on-surface transition-all disabled:opacity-40"
                              title="View"
                              disabled={isPending}
                              onClick={() => setDetail(row)}
                            >
                              <span className="material-symbols-outlined text-lg">visibility</span>
                            </button>
                            {row.status === "pending" ? (
                              <>
                                <button
                                  type="button"
                                  className="p-2 rounded-lg hover:bg-primary/20 text-primary transition-all disabled:opacity-40"
                                  title="Edit"
                                  disabled={isPending}
                                  onClick={() => alert(`Edit ${row.id} (not implemented).`)}
                                >
                                  <span className="material-symbols-outlined text-lg">edit</span>
                                </button>
                                <button
                                  type="button"
                                  className="p-2 rounded-lg text-white hover:bg-primary hover:text-white transition-all disabled:opacity-40"
                                  title="Approve"
                                  disabled={isPending}
                                  onClick={() => commitStatus(row.id, "approved")}
                                >
                                  <span className="material-symbols-outlined text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>
                                    check
                                  </span>
                                </button>
                                <button
                                  type="button"
                                  className="p-2 rounded-lg hover:bg-red-500/15 text-red-300 transition-all disabled:opacity-40"
                                  title="Reject"
                                  disabled={isPending}
                                  onClick={() => commitStatus(row.id, "rejected")}
                                >
                                  <span className="material-symbols-outlined text-lg">close</span>
                                </button>
                              </>
                            ) : (
                              <>
                                <button
                                  type="button"
                                  className="p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant disabled:opacity-40"
                                  title="History"
                                  disabled={isPending}
                                  onClick={() => alert(`History for ${row.id} (placeholder).`)}
                                >
                                  <span className="material-symbols-outlined text-lg">history</span>
                                </button>
                                {row.status === "approved" ? (
                                  <>
                                    <button
                                      type="button"
                                      className="p-2 rounded-lg hover:bg-surface-container-high text-on-surface-variant disabled:opacity-40"
                                      title="Mark pending"
                                      disabled={isPending}
                                      onClick={() => commitStatus(row.id, "pending")}
                                    >
                                      <span className="material-symbols-outlined text-lg">undo</span>
                                    </button>
                                    <button
                                      type="button"
                                      className="p-2 rounded-lg hover:bg-red-500/15 text-red-300 transition-all disabled:opacity-40"
                                      title="Reject"
                                      disabled={isPending}
                                      onClick={() => commitStatus(row.id, "rejected")}
                                    >
                                      <span className="material-symbols-outlined text-lg">close</span>
                                    </button>
                                  </>
                                ) : (
                                  <>
                                    <button
                                      type="button"
                                      className="p-2 rounded-lg text-white hover:bg-primary hover:text-white transition-all disabled:opacity-40"
                                      title="Approve"
                                      disabled={isPending}
                                      onClick={() => commitStatus(row.id, "approved")}
                                    >
                                      <span className="material-symbols-outlined text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>
                                        check
                                      </span>
                                    </button>
                                    <button
                                      type="button"
                                      className="p-2 rounded-lg hover:bg-surface-container-high text-on-surface-variant disabled:opacity-40"
                                      title="Mark pending"
                                      disabled={isPending}
                                      onClick={() => commitStatus(row.id, "pending")}
                                    >
                                      <span className="material-symbols-outlined text-lg">undo</span>
                                    </button>
                                  </>
                                )}
                              </>
                            )}
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
            <div className="px-6 py-4 border-t border-outline/10 flex flex-col sm:flex-row items-center justify-between gap-4">
              <p className="text-xs text-outline">
                Showing {showingFrom} to {showingTo} of {filtered.length} entries
              </p>
              <div className="flex items-center gap-3">
                <span className="text-xs text-on-surface-variant hidden sm:inline">
                  Page {safePage} of {totalPages}
                </span>
                <button
                  type="button"
                  className="w-8 h-8 flex items-center justify-center rounded border border-outline/30 text-outline hover:border-primary hover:text-primary transition-all disabled:opacity-40"
                  disabled={safePage <= 1}
                  onClick={() => setPage((p) => Math.max(1, p - 1))}
                >
                  <span className="material-symbols-outlined text-sm">chevron_left</span>
                </button>
                <button
                  type="button"
                  className="w-8 h-8 flex items-center justify-center rounded border border-outline/30 text-outline hover:border-primary hover:text-primary transition-all disabled:opacity-40"
                  disabled={safePage >= totalPages}
                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                >
                  <span className="material-symbols-outlined text-sm">chevron_right</span>
                </button>
              </div>
            </div>
          </div>
        </main>

        <footer className="mt-auto border-t border-outline/20 py-8 px-[var(--spacing-gutter)] flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="flex flex-wrap items-center gap-4 justify-center md:justify-start">
            <span className="font-[var(--font-display-lg)] text-sm text-primary uppercase tracking-tighter">IPv6 SUMMIT 2026</span>
            <span className="text-xs text-outline">| {data.meta.footerTag}</span>
          </div>
          <p className="text-[11px] font-[var(--font-label-caps)] text-outline tracking-widest text-center">
            © 2026 IPv6 for AI & Data Centre Summit. Infrastructure for the Future.
          </p>
          <div className="flex items-center gap-6 justify-center">
            {data.footer.legal.map((label) => (
              <button
                key={label}
                type="button"
                className="text-[10px] font-[var(--font-label-caps)] text-on-surface-variant hover:text-primary transition-colors uppercase tracking-widest"
                onClick={() => alert(`${label} (placeholder).`)}
              >
                {label}
              </button>
            ))}
          </div>
        </footer>
      </div>

      <div className="fixed top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 blur-[120px] rounded-full -z-10 pointer-events-none" />
      <div className="fixed bottom-[-10%] right-[-10%] w-[30%] h-[30%] bg-secondary/5 blur-[100px] rounded-full -z-10 pointer-events-none" />

      {detail ? (
        <div
          className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
          role="dialog"
          aria-modal="true"
          aria-labelledby="admin-detail-title"
        >
          <button
            type="button"
            className="absolute inset-0 cursor-default"
            aria-label="Close"
            onClick={() => setDetail(null)}
          />
          <div className="relative w-full max-w-lg glass-panel rounded-xl border border-outline/20 p-6 shadow-2xl z-10">
            <div className="flex items-start justify-between gap-4 mb-4">
              <div>
                <h2 id="admin-detail-title" className="font-[var(--font-display-lg)] text-xl text-primary">
                  #{detail.id}
                </h2>
                <p className="text-sm text-on-surface-variant">{detail.displayDate}</p>
              </div>
              <button
                type="button"
                className="p-2 rounded-lg hover:bg-surface-container-high text-on-surface-variant"
                onClick={() => setDetail(null)}
              >
                <span className="material-symbols-outlined">close</span>
              </button>
            </div>
            <dl className="space-y-3 text-sm">
              <div>
                <dt className="text-outline font-[var(--font-label-caps)] text-[10px] uppercase tracking-widest">Name</dt>
                <dd className="text-on-surface">
                  {detail.fullName} — {detail.jobTitle}
                </dd>
              </div>
              <div>
                <dt className="text-outline font-[var(--font-label-caps)] text-[10px] uppercase tracking-widest">Company</dt>
                <dd className="text-on-surface">{detail.company}</dd>
              </div>
              <div>
                <dt className="text-outline font-[var(--font-label-caps)] text-[10px] uppercase tracking-widest">Contact</dt>
                <dd className="text-on-surface">
                  {detail.email}
                  <br />
                  {detail.phone}
                </dd>
              </div>
              <div>
                <dt className="text-outline font-[var(--font-label-caps)] text-[10px] uppercase tracking-widest">Status</dt>
                <dd className="text-on-surface capitalize">{detail.status}</dd>
              </div>
              {detail.notes ? (
                <div>
                  <dt className="text-outline font-[var(--font-label-caps)] text-[10px] uppercase tracking-widest">Notes</dt>
                  <dd className="text-on-surface">{detail.notes}</dd>
                </div>
              ) : null}
            </dl>
          </div>
        </div>
      ) : null}
    </div>
  );
}