import Link from "next/link";
import { notFound } from "next/navigation";
import { EventForm, EventStatusPanel, ScheduleView, SessionsPanel, TracksPanel } from "@/components/features/events";
import { PageHeader, StatusBadge } from "@/components/ui";
import type { DashboardKind } from "@/lib/authz/context";
import { requireDashboard } from "@/lib/authz/guard";
import { AuthError } from "@/lib/authz/errors";
import { GROUPINGS, type GroupBy } from "@/lib/events/schedule";
import { cn } from "@/lib/utils";
import { formatInZone, utcToZonedLocal } from "@/lib/time";
import { getEventDetail } from "@/lib/services/events";

const TABS = [["sessions", "Sessions"], ["schedule", "Schedule"], ["tracks", "Tracks"], ["details", "Details"]] as const;
const first = (v: string | string[] | undefined) => (Array.isArray(v) ? v[0] : v);

export async function EventScreen({ kind, eventId, searchParams }: { kind: Extract<DashboardKind, "admin" | "editor">; eventId: string; searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  await requireDashboard(kind);
  let d;
  try { d = await getEventDetail(eventId); } catch (e) { if (e instanceof AuthError) notFound(); throw e; }
  const sp = await searchParams;
  const tab = TABS.find(([k]) => k === first(sp.tab))?.[0] ?? "sessions";
  const groupBy: GroupBy = GROUPINGS.find((g) => g === first(sp.group)) ?? "day";
  const { event, tracks, sessions, speakers, perms } = d;
  const base = `/dashboard/${kind}`;
  const path = `${base}/events/${event.id}`;
  const tz = event.timezone;
  const trackName = new Map(tracks.map((t) => [t.id, t.name]));

  return (
    <>
      <p className="text-xs text-muted-foreground"><Link href={`${base}/events`} className="hover:underline">Events</Link></p>
      <PageHeader title={event.name} description={`${formatInZone(event.startsAt, tz)} – ${formatInZone(event.endsAt, tz)} (${tz})`} actions={<StatusBadge value={event.status} />} />
      <nav aria-label="Event sections" className="mb-4 flex gap-1 border-b border-border">
        {TABS.map(([k, label]) => (
          <Link key={k} href={`${path}?tab=${k}`} aria-current={tab === k ? "page" : undefined} className={cn("-mb-px border-b-2 px-3 py-2 text-sm", tab === k ? "border-primary font-medium" : "border-transparent text-muted-foreground hover:text-foreground")}>{label}</Link>
        ))}
      </nav>

      {tab === "sessions" ? (
        <SessionsPanel
          key={sessions.map((s) => s.id + s.status).join()}
          eventId={event.id} timezone={tz} canManage={perms.manage} canEdit={perms.edit}
          defaultStart={utcToZonedLocal(event.startsAt, tz)}
          tracks={tracks.map((t) => ({ id: t.id, name: t.name }))}
          speakers={speakers.map((s) => ({ id: s.id, title: s.title }))}
          sessions={sessions.map((s) => ({
            id: s.id, title: s.title, description: s.description ?? "", startsLocal: utcToZonedLocal(s.startsAt, tz), endsLocal: utcToZonedLocal(s.endsAt, tz),
            whenLabel: `${formatInZone(s.startsAt, tz, "date")} ${formatInZone(s.startsAt, tz, "time")}–${formatInZone(s.endsAt, tz, "time")}`,
            venue: s.venue ?? "", trackId: s.trackId, trackName: s.trackId ? (trackName.get(s.trackId) ?? null) : null, status: s.status,
            speakerIds: s.speakers.map((x) => x.speakerEntryId), speakerNames: s.speakers.map((x) => x.speaker.title),
          }))}
        />
      ) : null}
      {tab === "schedule" ? (
        <>
          <p className="mb-3 flex gap-2 text-sm" role="group" aria-label="Group schedule by">
            Group by:
            {GROUPINGS.map((g) => <Link key={g} href={`${path}?tab=schedule&group=${g}`} aria-current={groupBy === g ? "true" : undefined} className={cn("capitalize", groupBy === g ? "font-semibold underline" : "text-muted-foreground hover:underline")}>{g}</Link>)}
          </p>
          <ScheduleView timezone={tz} groupBy={groupBy} sessions={sessions.map((s) => ({ id: s.id, title: s.title, startsAt: s.startsAt, endsAt: s.endsAt, venue: s.venue, trackName: s.trackId ? (trackName.get(s.trackId) ?? null) : null, status: s.status, speakers: s.speakers.map((x) => x.speaker.title) }))} />
        </>
      ) : null}
      {tab === "tracks" ? <TracksPanel eventId={event.id} canManage={perms.manage} tracks={tracks.map((t) => ({ id: t.id, name: t.name, sessions: t._count.sessions }))} /> : null}
      {tab === "details" ? (
        <>
          <EventForm
            mode="edit" eventId={event.id} siteId={event.siteId} base={base} disabled={!perms.manage}
            initial={{ name: event.name, slug: event.slug, description: event.description ?? "", startsLocal: utcToZonedLocal(event.startsAt, tz), endsLocal: utcToZonedLocal(event.endsAt, tz), timezone: tz, venue: event.venue ?? "", locationText: event.locationText ?? "", website: event.website ?? "", organizer: event.organizer ?? "", logoMediaId: event.logoMediaId, bannerMediaId: event.bannerMediaId, seoTitle: event.seoTitle ?? "", seoDescription: event.seoDescription ?? "" }}
          />
          {perms.manage ? <EventStatusPanel eventId={event.id} status={event.status} base={base} /> : null}
        </>
      ) : null}
    </>
  );
}