import Link from "next/link";
import { notFound } from "next/navigation";
import { db } from "@/lib/db";
import { can, requireConfAccess } from "@/lib/rbac";
import { Card, PageHeader, StatCard, StatusBadge, btn } from "@/components/ui";
import { dateRange, fmtDateTime, formatMoney } from "@/lib/utils";
import { setConferenceStatus } from "./actions";

export const metadata = { title: "Overview" };

export default async function OverviewPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const { membership } = await requireConfAccess(id);
  const conf = await db.conference.findUnique({ where: { id }, include: { org: true } });
  if (!conf) notFound();

  const canManage = can(membership, "conference.manage");
  const canFinance = can(membership, "finance.view");
  const canRegs = can(membership, "registrations.manage");
  const canCheckin = can(membership, "checkin.perform");
  const canAgenda = can(membership, "agenda.manage");
  const canContent = can(membership, "content.manage");
  const canCerts = can(membership, "certificates.manage");
  const canSubs = can(membership, "submissions.manage");

  const [regTotal, regConfirmed, regPending, checkedIn, revenueAgg, sessions, speakers, submissions, recentRegs, certCount] = await Promise.all([
    db.registration.count({ where: { conferenceId: id, status: { not: "CANCELLED" } } }),
    db.registration.count({ where: { conferenceId: id, status: "CONFIRMED" } }),
    db.registration.count({ where: { conferenceId: id, status: "PENDING" } }),
    db.checkIn.count({ where: { type: "CONFERENCE", registration: { conferenceId: id } } }),
    canFinance
      ? db.registration.aggregate({ where: { conferenceId: id, status: "CONFIRMED" }, _sum: { amount: true } })
      : Promise.resolve(null),
    db.session.count({ where: { conferenceId: id } }),
    db.speaker.count({ where: { conferenceId: id } }),
    db.submission.count({ where: { conferenceId: id, status: { not: "DRAFT" } } }),
    canRegs
      ? db.registration.findMany({ where: { conferenceId: id }, orderBy: { createdAt: "desc" }, take: 8, include: { ticketType: true } })
      : Promise.resolve([]),
    db.certificate.count({ where: { conferenceId: id } }),
  ]);
  const revenue = revenueAgg?._sum.amount ?? 0;
  const virtualCount = conf.type === "HYBRID" && canRegs
    ? await db.registration.count({ where: { conferenceId: id, status: "CONFIRMED", mode: "VIRTUAL" } })
    : 0;

  const nextStatus: Record<string, [string, string] | null> = {
    DRAFT: ["PUBLISHED", "Publish conference"],
    PUBLISHED: ["LIVE", "Go live"],
    LIVE: ["COMPLETED", "Mark completed"],
    COMPLETED: null,
    ARCHIVED: null,
  };
  const next = nextStatus[conf.status];

  const quickActions: [boolean, string, string][] = [
    [canCheckin, `/dashboard/c/${id}/checkin`, "✅ Open check-in desk"],
    [canAgenda, `/dashboard/c/${id}/agenda`, "🗓️ Edit agenda"],
    [canContent, `/dashboard/c/${id}/announcements`, "📢 Post announcement"],
    [canCerts, `/dashboard/c/${id}/certificates`, "🏅 Generate certificates"],
  ];

  return (
    <main>
      <PageHeader
        title={conf.name}
        sub={`${dateRange(conf.startAt, conf.endAt)} · ${conf.type} · ${conf.org.name}`}
        action={
          <div className="flex items-center gap-2">
            <StatusBadge status={conf.status} />
            {canManage && next && (
              <form action={setConferenceStatus.bind(null, id, next[0])}>
                <button className={btn.sm}>{next[1]}</button>
              </form>
            )}
          </div>
        }
      />

      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <StatCard label="Registrations" value={regConfirmed} sub={`${regPending} pending · ${regTotal} total${conf.capacity ? ` · cap ${conf.capacity}` : ""}`} />
        {canFinance ? (
          <StatCard label="Revenue" value={formatMoney(revenue)} accent="text-emerald-600" sub="confirmed payments" />
        ) : (
          <StatCard label="Checked in" value={checkedIn} accent="text-emerald-600" sub={regConfirmed ? `${Math.round((checkedIn / regConfirmed) * 100)}% of confirmed` : "—"} />
        )}
        {canFinance && (
          <StatCard label="Checked in" value={checkedIn} sub={regConfirmed ? `${Math.round((checkedIn / regConfirmed) * 100)}% of confirmed` : "—"} />
        )}
        <StatCard label="Program" value={`${sessions}`} sub={`sessions · ${speakers} speakers`} />
      </div>

      {canRegs && (
        <Card className="mt-4 p-5">
          <h2 className="text-sm font-semibold text-zinc-300">Attendee lifecycle</h2>
          <div className="mt-4 flex items-center gap-1 overflow-x-auto text-center text-xs">
            {[
              ["Registered", regTotal],
              ["Confirmed", regConfirmed],
              ["Checked in", checkedIn],
              ["Certificates", certCount],
            ].map(([label, n], i, arr) => (
              <div key={label as string} className="flex min-w-0 flex-1 items-center gap-1">
                <div className="flex-1 rounded-lg border border-zinc-800 bg-zinc-950 px-2 py-3">
                  <div className="text-lg font-bold tabular-nums text-zinc-100">{n}</div>
                  <div className="mt-0.5 truncate text-zinc-500">{label}</div>
                </div>
                {i < arr.length - 1 && <span className="shrink-0 text-zinc-700">→</span>}
              </div>
            ))}
          </div>
          {conf.type === "HYBRID" && (
            <div className="mt-3 text-xs text-zinc-500">
              Mode split: {regConfirmed - virtualCount} in person · {virtualCount} virtual
            </div>
          )}
        </Card>
      )}

      <div className="mt-4 grid gap-4 lg:grid-cols-3">
        {canRegs && (
          <Card className="p-5 lg:col-span-2">
            <div className="flex items-center justify-between">
              <h2 className="text-sm font-semibold text-zinc-300">Recent registrations</h2>
              <Link href={`/dashboard/c/${id}/registrations`} className="text-xs font-medium text-indigo-600 hover:underline">View all →</Link>
            </div>
            <div className="mt-3 divide-y divide-zinc-800/70">
              {recentRegs.length === 0 && <p className="py-4 text-sm text-zinc-500">No registrations yet — share /c/{conf.slug}/register.</p>}
              {recentRegs.map((r) => (
                <div key={r.id} className="flex items-center justify-between gap-3 py-2.5 text-sm">
                  <div className="min-w-0">
                    <span className="font-medium text-zinc-200">{r.name}</span>
                    <span className="ml-2 text-xs text-zinc-500">{r.ticketType.name} · {fmtDateTime(r.createdAt)}</span>
                  </div>
                  <div className="flex items-center gap-3">
                    {canFinance && <span className="text-xs tabular-nums text-zinc-400">{formatMoney(r.amount)}</span>}
                    <StatusBadge status={r.status} />
                  </div>
                </div>
              ))}
            </div>
          </Card>
        )}
        <Card className={`p-5 ${canRegs ? "" : "lg:col-span-3"}`}>
          <h2 className="text-sm font-semibold text-zinc-300">Quick actions</h2>
          <div className={`mt-3 gap-2 ${canRegs ? "flex flex-col" : "grid sm:grid-cols-2 lg:grid-cols-3"}`}>
            {quickActions.filter(([allowed]) => allowed).map(([, href, label]) => (
              <Link key={href} href={href} className={btn.secondary}>{label}</Link>
            ))}
            <Link href={`/c/${conf.slug}`} target="_blank" className={btn.secondary}>🌐 View public site ↗</Link>
          </div>
          {canSubs && submissions > 0 && (
            <div className="mt-4 rounded-lg border border-amber-500/20 bg-amber-500/5 px-3 py-2 text-xs text-amber-600/90">
              {submissions} CFP submission{submissions === 1 ? "" : "s"} in the pipeline — <Link href={`/dashboard/c/${id}/submissions`} className="underline">review</Link>
            </div>
          )}
        </Card>
      </div>
    </main>
  );
}