import Link from "next/link";
import type { Metadata } from "next";
import { getPublicConference } from "@/lib/conference";
import { dateRange } from "@/lib/utils";

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const conf = await getPublicConference(slug);
  return {
    title: { default: conf.name, template: `%s · ${conf.name}` },
    description: conf.tagline ?? conf.description?.slice(0, 160) ?? `${conf.name} — ${dateRange(conf.startAt, conf.endAt)}`,
    openGraph: { title: conf.name, description: conf.tagline ?? undefined },
  };
}

const NAV = [
  ["", "Home"],
  ["schedule", "Schedule"],
  ["speakers", "Speakers"],
  ["sponsors", "Sponsors"],
  ["register", "Register"],
] as const;

export default async function ConferenceSiteLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const conf = await getPublicConference(slug);

  return (
    <div className="min-h-screen bg-zinc-950" style={{ ["--accent" as string]: conf.primaryColor }}>
      <header className="fx-header sticky top-0 z-20 border-b border-zinc-800/70 bg-zinc-950/85 backdrop-blur">
        <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
          <Link href={`/c/${conf.slug}`} className="flex items-center gap-2.5">
            <span
              className="flex h-7 w-7 items-center justify-center rounded-lg text-sm font-bold text-white"
              style={{ background: conf.primaryColor }}
            >
              {conf.name[0]}
            </span>
            <span className="max-w-[40vw] truncate text-[15px] font-semibold text-zinc-100">{conf.name}</span>
            {conf.status === "LIVE" && (
              <span className="flex items-center gap-1.5 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[11px] font-medium text-emerald-600">
                <span className="fx-live-dot h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-400" /> LIVE
              </span>
            )}
          </Link>
          <nav className="flex items-center gap-1 text-sm">
            {NAV.map(([path, name]) => (
              <Link
                key={path}
                href={`/c/${conf.slug}${path ? `/${path}` : ""}`}
                className={
                  name === "Register"
                    ? "ml-2 rounded-lg px-3.5 py-1.5 font-medium text-white transition hover:opacity-90"
                    : "hidden rounded-lg px-3 py-1.5 text-zinc-400 transition hover:bg-zinc-800/70 hover:text-zinc-100 sm:block"
                }
                style={name === "Register" ? { background: conf.primaryColor } : undefined}
              >
                {name}
              </Link>
            ))}
          </nav>
        </div>
      </header>
      {children}
      <footer className="border-t border-zinc-900 py-8">
        <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3 px-4 text-xs text-zinc-600">
          <div>
            {conf.name} · Organized by {conf.org.name}
            {conf.contactEmail && <> · <a className="hover:text-zinc-400" href={`mailto:${conf.contactEmail}`}>{conf.contactEmail}</a></>}
          </div>
          <div>
            Powered by <Link href="/" className="font-medium text-zinc-500 hover:text-zinc-300">Confexe</Link>
          </div>
        </div>
      </footer>
    </div>
  );
}