import { createClient } from "@supabase/supabase-js";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import SidebarAdStack from "@/components/SidebarAdStack";

export const dynamic = "force-dynamic";
export const revalidate = 600;

export const metadata = {
  title: "Editorial team — Broadcast Beat",
  description: "Meet the Broadcast Beat editorial team — staff journalists covering broadcast, streaming, and post-production beats.",
};

interface Persona {
  slug: string;
  name: string;
  bio: string | null;
  beat: string | null;
  avatar_url: string | null;
}

export default async function TeamPage() {
  const sb = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      db: { schema: (process.env.NEXT_PUBLIC_SUPABASE_SCHEMA || "bb") as "public" },
      auth: { persistSession: false },
    }
  );
  const { data } = await sb
    .from("ai_personas")
    .select("slug, name, bio, beat, avatar_url")
    .eq("active", true);
  const raw = (data || []) as Persona[];
  // Ryan Salazar pinned first as Founder / Editor-in-Chief; rest alphabetical.
  const team = [
    ...raw.filter((p) => p.slug === "ryan-salazar"),
    ...raw
      .filter((p) => p.slug !== "ryan-salazar")
      .sort((a, b) => a.name.localeCompare(b.name)),
  ];

  const displayBeat = (p: Persona) =>
    p.slug === "ryan-salazar" ? "FOUNDER / EDITOR-IN-CHIEF" : p.beat?.replace(/-/g, " ");

  return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="max-w-container mx-auto px-4 py-12 text-[#e5e7eb]">
        <div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
          <main>
            <header className="mb-8 border-b border-[#252525] pb-6">
              <div className="text-[10px] font-mono uppercase tracking-[0.22em] text-[var(--color-text-info,#60a5fa)] mb-2">
                Broadcast Beat
              </div>
              <h1 className="font-serif text-4xl md:text-5xl font-bold tracking-tight">Editorial team</h1>
              <p className="mt-3 text-[#9ca3af] text-base">
                Staff journalists by beat — a mix of human reporters and trained AI personas operating under house style.
              </p>
            </header>

            <ul className="grid grid-cols-1 md:grid-cols-2 gap-5">
              {team.map((p) => (
                <li key={p.slug} className="rounded border border-[#252525] bg-[#0b0f17] p-5 flex gap-4 hover:border-[var(--color-text-info,#60a5fa)]/60 transition-colors">
                  {p.avatar_url && (
                    <img
                      src={p.avatar_url}
                      alt={p.name}
                      width={64}
                      height={64}
                      className="rounded-full border border-[#252525] flex-shrink-0"
                    />
                  )}
                  <div className="flex-1 min-w-0">
                    <h2 className="font-serif text-lg font-semibold">{p.name}</h2>
                    {(p.beat || p.slug === "ryan-salazar") && (
                      <div className="text-[10px] font-mono uppercase tracking-wider text-[var(--color-text-info,#60a5fa)] mt-0.5">
                        {displayBeat(p)}
                      </div>
                    )}
                    {p.bio && <p className="text-sm text-[#9ca3af] mt-2 leading-relaxed">{p.bio}</p>}
                  </div>
                </li>
              ))}
            </ul>
          </main>

          <aside className="mt-10 lg:mt-0" aria-label="Advertisements">
            <div className="lg:sticky lg:top-24">
              <SidebarAdStack />
            </div>
          </aside>
        </div>
      </div>
      <Footer />
    </div>
  );
}
