import { db } from "@/lib/db";
import { getPublicConference } from "@/lib/conference";
import { dayKey, fmtDay, fmtTime } from "@/lib/utils";
import { SESSION_TYPE_COLORS } from "@/lib/constants";
import { Avatar } from "@/components/ui";
import Link from "next/link";

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

export default async function SchedulePage({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ track?: string }>;
}) {
  const { slug } = await params;
  const { track } = await searchParams;
  const conf = await getPublicConference(slug);
  const sessions = await db.session.findMany({
    where: { conferenceId: conf.id, ...(track ? { trackId: track } : {}) },
    orderBy: { startAt: "asc" },
    include: { track: true, room: true, speakers: { include: { speaker: true } } },
  });

  const days = new Map<string, typeof sessions>();
  for (const s of sessions) {
    const k = dayKey(s.startAt);
    if (!days.has(k)) days.set(k, []);
    days.get(k)!.push(s);
  }

  return (
    <main className="mx-auto max-w-5xl px-4 py-10">
      <h1 className="text-2xl font-bold text-zinc-100">Schedule</h1>
      <p className="mt-1 text-sm text-zinc-500">All times in {conf.timezone}.</p>

      {conf.tracks.length > 0 && (
        <div className="mt-5 flex flex-wrap gap-2">
          <Link
            href={`/c/${conf.slug}/schedule`}
            className={`rounded-full px-3 py-1 text-sm ${!track ? "text-white" : "border border-zinc-700 text-zinc-400 hover:text-zinc-200"}`}
            style={!track ? { background: conf.primaryColor } : undefined}
          >
            All tracks
          </Link>
          {conf.tracks.map((t) => (
            <Link
              key={t.id}
              href={`/c/${conf.slug}/schedule?track=${t.id}`}
              className={`rounded-full px-3 py-1 text-sm ${track === t.id ? "text-white" : "border border-zinc-700 text-zinc-400 hover:text-zinc-200"}`}
              style={track === t.id ? { background: t.color } : undefined}
            >
              {t.name}
            </Link>
          ))}
        </div>
      )}

      {sessions.length === 0 && <p className="mt-10 text-sm text-zinc-500">The agenda hasn’t been published yet — check back soon.</p>}

      <div className="mt-8 space-y-10">
        {[...days.entries()].map(([k, list]) => (
          <section key={k}>
            <h2 className="sticky top-14 z-10 -mx-4 border-b border-zinc-800 bg-zinc-950/90 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-zinc-400 backdrop-blur">
              {fmtDay(list[0].startAt)}
            </h2>
            <div className="mt-4 space-y-3">
              {list.map((s) => (
                <div key={s.id} className="fx-reveal flex gap-4 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
                  <div className="w-24 shrink-0 pt-0.5 text-sm tabular-nums text-zinc-400">
                    <div className="font-semibold text-zinc-200">{fmtTime(s.startAt)}</div>
                    <div className="text-xs text-zinc-600">{fmtTime(s.endAt)}</div>
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="flex flex-wrap items-center gap-2">
                      <span className={`rounded-md border px-1.5 py-0.5 text-[10px] font-semibold tracking-wider ${SESSION_TYPE_COLORS[s.type] ?? ""}`}>
                        {s.type}
                      </span>
                      {s.track && (
                        <span className="text-[11px] font-medium" style={{ color: s.track.color }}>{s.track.name}</span>
                      )}
                      {s.room && <span className="text-[11px] text-zinc-500">· {s.room.name}</span>}
                      {s.mode !== "PHYSICAL" && <span className="text-[11px] text-zinc-500">· 🖥️ {s.mode === "VIRTUAL" ? "Online" : "Hybrid"}</span>}
                    </div>
                    <h3 className="mt-1.5 font-semibold text-zinc-100">{s.title}</h3>
                    {s.abstract && <p className="mt-1 line-clamp-2 text-sm text-zinc-500">{s.abstract}</p>}
                    {s.speakers.length > 0 && (
                      <div className="mt-3 flex flex-wrap gap-4">
                        {s.speakers.map(({ speaker, role }) => (
                          <div key={speaker.id} className="flex items-center gap-2">
                            <Avatar name={speaker.name} src={speaker.photoUrl} size={6} />
                            <div className="text-xs">
                              <span className="font-medium text-zinc-300">{speaker.name}</span>
                              {role !== "SPEAKER" && <span className="ml-1 text-zinc-600">({role.toLowerCase()})</span>}
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </section>
        ))}
      </div>
    </main>
  );
}