import { getPublicConference } from "@/lib/conference";
import { Card } from "@/components/ui";
import { SPONSOR_TIERS, SPONSOR_TIER_LABELS } from "@/lib/constants";

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

const TIER_STYLES: Record<string, string> = {
  TITLE: "text-indigo-600",
  CO_SPONSOR: "text-violet-600",
  PLATINUM: "text-cyan-600",
  GOLD: "text-amber-600",
  SILVER: "text-zinc-300",
  BRONZE: "text-orange-600",
};

export default async function SponsorsPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const conf = await getPublicConference(slug);
  const byTier = SPONSOR_TIERS.map((tier) => ({ tier, sponsors: conf.sponsors.filter((s) => s.tier === tier) })).filter((g) => g.sponsors.length > 0);

  return (
    <main className="mx-auto max-w-5xl px-4 py-10">
      <h1 className="text-2xl font-bold text-zinc-100">Sponsors & Exhibitors</h1>
      <p className="mt-1 text-sm text-zinc-500">The organizations making {conf.name} possible.</p>
      {byTier.length === 0 && <p className="mt-10 text-sm text-zinc-500">Sponsors will be announced soon.</p>}
      <div className="mt-8 space-y-10">
        {byTier.map(({ tier, sponsors }) => (
          <section key={tier}>
            <h2 className={`text-sm font-semibold uppercase tracking-widest ${TIER_STYLES[tier] ?? "text-zinc-400"}`}>{SPONSOR_TIER_LABELS[tier] ?? tier}</h2>
            <div className="mt-4 grid gap-4 sm:grid-cols-2">
              {sponsors.map((s) => (
                <Card key={s.id} className="p-5">
                  <div className="flex items-center justify-between gap-3">
                    <div className="flex min-w-0 items-center gap-3">
                      {s.logoUrl && (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img src={s.logoUrl} alt={s.name} className="h-11 w-11 shrink-0 rounded-lg border border-white/70 bg-white object-contain p-1" />
                      )}
                      <h3 className="truncate font-semibold text-zinc-100">{s.name}</h3>
                    </div>
                    {s.boothNumber && <span className="rounded-md bg-zinc-800 px-2 py-0.5 text-xs text-zinc-400">Booth {s.boothNumber}</span>}
                  </div>
                  {s.description && <p className="mt-2 text-sm text-zinc-500">{s.description}</p>}
                  {s.website && (
                    <a href={s.website} target="_blank" rel="noreferrer" className="mt-3 inline-block text-sm font-medium hover:underline" style={{ color: conf.primaryColor }}>
                      Visit website →
                    </a>
                  )}
                </Card>
              ))}
            </div>
          </section>
        ))}
      </div>
    </main>
  );
}