import { db } from "@/lib/db";
import { getPublicConference } from "@/lib/conference";
import { Avatar, Card } from "@/components/ui";
import { fmtDateTime, parseJSON } from "@/lib/utils";
import { SPEAKER_TYPE_LABELS } from "@/lib/constants";

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

export default async function SpeakersPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const conf = await getPublicConference(slug);
  const speakers = await db.speaker.findMany({
    where: { conferenceId: conf.id },
    orderBy: [{ featured: "desc" }, { name: "asc" }],
    include: { sessions: { include: { session: true } } },
  });

  return (
    <main className="mx-auto max-w-6xl px-4 py-10">
      <h1 className="text-2xl font-bold text-zinc-100">Speakers</h1>
      <p className="mt-1 text-sm text-zinc-500">{speakers.length} speakers across the program.</p>
      <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {speakers.map((s) => {
          const social = parseJSON<Record<string, string>>(s.socialLinks, {});
          return (
            <Card key={s.id} className="fx-reveal fx-lift p-5">
              <div className="flex items-start gap-4">
                <Avatar name={s.name} src={s.photoUrl} size={14} />
                <div className="min-w-0">
                  <div className="flex flex-wrap items-center gap-2">
                    <h2 className="font-semibold text-zinc-100">{s.name}</h2>
                    {s.featured && <span className="text-xs" title="Featured">⭐</span>}
                    {s.speakerType !== "SPEAKER" && (
                      <span className="rounded-full bg-violet-500/10 px-2 py-0.5 text-[11px] font-semibold text-violet-600">
                        {SPEAKER_TYPE_LABELS[s.speakerType] ?? s.speakerType}
                      </span>
                    )}
                  </div>
                  <div className="mt-0.5 text-sm text-zinc-500">{s.designation}{s.organization ? `, ${s.organization}` : ""}</div>
                  {Object.keys(social).length > 0 && (
                    <div className="mt-1.5 flex gap-2 text-xs">
                      {Object.entries(social).map(([k, v]) => (
                        <a key={k} href={v} target="_blank" rel="noreferrer" className="capitalize text-zinc-600 hover:text-zinc-400">{k}</a>
                      ))}
                    </div>
                  )}
                </div>
              </div>
              {s.bio && <p className="mt-3 line-clamp-3 text-sm leading-relaxed text-zinc-500">{s.bio}</p>}
              {s.sessions.length > 0 && (
                <div className="mt-4 border-t border-zinc-800 pt-3">
                  {s.sessions.map(({ session }) => (
                    <div key={session.id} className="text-xs text-zinc-500">
                      <span className="font-medium text-zinc-400">{session.title}</span> · {fmtDateTime(session.startAt)}
                    </div>
                  ))}
                </div>
              )}
            </Card>
          );
        })}
      </div>
    </main>
  );
}