import { Card } from "@/components/ui";
import type { GroupBy } from "@/lib/events/schedule";
import { formatInZone } from "@/lib/time";

export interface ScheduleSession { id: string; title: string; startsAt: Date; endsAt: Date; venue: string | null; trackName: string | null; status: string; speakers: string[] }

/** Read-only programme grouped by day, track or venue, shown in the event's time zone. */
export function ScheduleView({ sessions, timezone, groupBy }: { sessions: ScheduleSession[]; timezone: string; groupBy: GroupBy }) {
  if (sessions.length === 0) return <Card className="p-4 text-sm text-muted-foreground">No sessions to show yet.</Card>;
  const keyOf = (s: ScheduleSession) => (groupBy === "day" ? formatInZone(s.startsAt, timezone, "date") : groupBy === "track" ? (s.trackName ?? "No track") : (s.venue || "No venue"));
  const groups = new Map<string, ScheduleSession[]>();
  for (const s of sessions) groups.set(keyOf(s), [...(groups.get(keyOf(s)) ?? []), s]);
  return (
    <div className="space-y-4">
      {[...groups.entries()].map(([name, list]) => (
        <Card key={name}>
          <h3 className="border-b border-border px-4 py-2 text-sm font-semibold">{name}</h3>
          <ul className="divide-y divide-border">
            {list.map((s) => (
              <li key={s.id} className="grid gap-1 px-4 py-3 text-sm sm:grid-cols-[10rem_1fr]">
                <span className="tabular-nums">{formatInZone(s.startsAt, timezone, "time")} – {formatInZone(s.endsAt, timezone, "time")}</span>
                <span>
                  <span className="font-medium">{s.title}</span>{s.status === "DRAFT" ? <span className="ml-2 text-xs text-warning">draft</span> : null}
                  <span className="block text-xs text-muted-foreground">{[groupBy !== "track" ? s.trackName : null, groupBy !== "venue" ? s.venue : null, s.speakers.join(", ")].filter(Boolean).join(" · ")}</span>
                </span>
              </li>
            ))}
          </ul>
        </Card>
      ))}
    </div>
  );
}