import Link from "next/link";
import { redirect } from "next/navigation";
import { isOrganizer, requireUser } from "@/lib/auth";
import { db } from "@/lib/db";
import { btn, Card, EmptyState, PageHeader, StatCard, StatusBadge, Badge } from "@/components/ui";
import { dateRange, formatMoney, parseJSON } from "@/lib/utils";
import { VOLUNTEER_AREAS } from "@/lib/constants";

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

const AREA_PATHS: Record<string, string> = {
  checkin: "checkin",
  agenda: "agenda",
  registrations: "registrations",
  speakers: "speakers",
  announcements: "announcements",
  sponsors: "sponsors",
  certificates: "certificates",
};

export default async function DashboardHome() {
  const user = await requireUser();
  const isAdmin = user.platformRole === "SUPER_ADMIN";
  const canCreate = isOrganizer(user);

  if (!canCreate) {
    const [memberships, volunteerRows] = await Promise.all([
      db.confMember.findMany({ where: { userId: user.id }, select: { role: true } }),
      db.volunteer.findMany({
        where: { userId: user.id },
        include: { conference: { include: { org: true } } },
        orderBy: { conference: { startAt: "desc" } },
      }),
    ]);
    // Attendees participate via /me — the console is for staff.
    if (memberships.length === 0) redirect("/me");

    // Volunteer-only users see their duty roster, not the organizer console.
    if (volunteerRows.length > 0 && memberships.every((m) => m.role === "VOLUNTEER")) {
      return (
        <main className="mx-auto max-w-4xl px-4 py-8">
          <PageHeader
            title={`Hi ${user.name.split(" ")[0]} 🙋`}
            sub="Your volunteer assignments — you can manage exactly the areas listed on each conference."
          />
          <div className="space-y-4">
            {volunteerRows.map((v) => {
              const areas = parseJSON<string[]>(v.areas, []);
              const c = v.conference;
              return (
                <Card key={v.id} className="p-5">
                  <div className="flex flex-wrap items-center justify-between gap-3">
                    <div className="flex min-w-0 items-center gap-4">
                      <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-lg font-bold text-white shadow-md" style={{ background: c.primaryColor }}>
                        {c.name[0]}
                      </span>
                      <div className="min-w-0">
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="font-bold text-zinc-100">{c.name}</span>
                          <StatusBadge status={c.status} />
                        </div>
                        <div className="mt-0.5 text-sm text-zinc-500">
                          {dateRange(c.startAt, c.endAt)} · {c.org.name}
                          {v.department ? ` · ${v.department}` : ""}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="mt-4 border-t border-zinc-800/60 pt-3">
                    <div className="text-[11px] font-semibold uppercase tracking-wider text-zinc-500">Your assigned duties</div>
                    <div className="mt-2 flex flex-wrap gap-2">
                      {areas.length === 0 && (
                        <Badge className="bg-amber-500/10 text-amber-600">No duties assigned yet — contact the organizer</Badge>
                      )}
                      {areas.map((key) => {
                        const area = VOLUNTEER_AREAS.find((a) => a.key === key);
                        if (!area) return null;
                        return (
                          <Link
                            key={key}
                            href={`/dashboard/c/${c.id}/${AREA_PATHS[key] ?? ""}`}
                            className={btn.sm}
                          >
                            {area.label} →
                          </Link>
                        );
                      })}
                      <Link href={`/dashboard/c/${c.id}`} className={btn.smSecondary}>Overview</Link>
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
          <p className="mt-6 text-center text-xs text-zinc-600">
            Signed in as a volunteer — organizer and attendee features are not part of this account's scope.
          </p>
        </main>
      );
    }
  }

  const conferences = await db.conference.findMany({
    where: isAdmin ? {} : { members: { some: { userId: user.id } } },
    orderBy: { startAt: "desc" },
    include: {
      org: true,
      _count: { select: { registrations: { where: { status: "CONFIRMED" } }, sessions: true, submissions: true } },
      registrations: { where: { status: "CONFIRMED" }, select: { amount: true } },
    },
  });

  const totalRevenue = conferences.reduce((sum, c) => sum + c.registrations.reduce((s, r) => s + r.amount, 0), 0);
  const totalRegs = conferences.reduce((sum, c) => sum + c._count.registrations, 0);

  return (
    <main className="mx-auto max-w-6xl px-4 py-8">
      <PageHeader
        title={`Welcome back, ${user.name.split(" ")[0]}`}
        sub="Your conference workspaces"
        action={canCreate ? <Link href="/dashboard/conferences/new" className={btn.primary}>+ New conference</Link> : undefined}
      />

      <div className="grid gap-3 sm:grid-cols-3">
        <StatCard label="Conferences" value={conferences.length} />
        <StatCard label="Confirmed registrations" value={totalRegs} />
        <StatCard label="Revenue" value={formatMoney(totalRevenue)} accent="text-emerald-600" />
      </div>

      <div className="mt-8 space-y-3">
        {conferences.length === 0 && (
          <EmptyState
            title="No conferences yet"
            body="Create your first conference — you'll get a public website, registration engine, agenda builder, and check-in tools out of the box."
            action={canCreate ? <Link href="/dashboard/conferences/new" className={btn.primary}>Create a conference</Link> : undefined}
          />
        )}
        {conferences.map((c) => (
          <Link key={c.id} href={`/dashboard/c/${c.id}`} className="block">
            <Card className="flex flex-wrap items-center justify-between gap-4 p-5 transition hover:border-zinc-700">
              <div className="flex items-center gap-4">
                <span className="flex h-11 w-11 items-center justify-center rounded-xl text-lg font-bold text-white" style={{ background: c.primaryColor }}>
                  {c.name[0]}
                </span>
                <div>
                  <div className="flex items-center gap-2.5">
                    <span className="font-semibold text-zinc-100">{c.name}</span>
                    <StatusBadge status={c.status} />
                  </div>
                  <div className="mt-0.5 text-sm text-zinc-500">
                    {dateRange(c.startAt, c.endAt)} · {c.type} · {c.org.name}
                  </div>
                </div>
              </div>
              <div className="flex gap-6 text-center text-sm">
                <div><div className="font-semibold text-zinc-200 tabular-nums">{c._count.registrations}</div><div className="text-xs text-zinc-500">registered</div></div>
                <div><div className="font-semibold text-zinc-200 tabular-nums">{c._count.sessions}</div><div className="text-xs text-zinc-500">sessions</div></div>
                <div><div className="font-semibold text-zinc-200 tabular-nums">{formatMoney(c.registrations.reduce((s, r) => s + r.amount, 0))}</div><div className="text-xs text-zinc-500">revenue</div></div>
              </div>
            </Card>
          </Link>
        ))}
      </div>
    </main>
  );
}