import Link from "next/link";
import { notFound } from "next/navigation";
import { createClient } from "@supabase/supabase-js";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AdImage from "@/components/AdImage";
import SidebarAdStack from "@/components/SidebarAdStack";
import { pickAds } from "@/lib/ads";

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

interface Event {
  id: string;
  slug: string;
  name: string;
  short_name: string | null;
  start_date: string;
  end_date: string;
  venue: string | null;
  city: string | null;
  country: string | null;
  url: string | null;
  status: string;
  description: string | null;
  hashtag: string | null;
}

interface ArticleRef {
  article_id: string;
  article_table: "native" | "press" | "wp_imported" | "ai_rewritten";
}

interface UnifiedArticle {
  slug: string;
  title: string;
  excerpt: string;
  image: string | null;
  date: string;
  author: string;
  source_table: string;
}

function sbAnon() {
  return 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 },
    }
  );
}

function fmtRange(s: string, e: string): string {
  const a = new Date(s);
  const b = new Date(e);
  const sameMo = a.getUTCMonth() === b.getUTCMonth() && a.getUTCFullYear() === b.getUTCFullYear();
  const f = (d: Date) =>
    d.toLocaleDateString("en-US", { month: "long", day: "numeric", timeZone: "UTC" });
  if (sameMo) return `${f(a)}–${b.getUTCDate()}, ${b.getUTCFullYear()}`;
  return `${f(a)} – ${f(b)}, ${b.getUTCFullYear()}`;
}

async function fetchArticles(refs: ArticleRef[]): Promise<UnifiedArticle[]> {
  const sb = sbAnon();
  const byTable: Record<string, string[]> = {};
  for (const r of refs) {
    if (!byTable[r.article_table]) byTable[r.article_table] = [];
    byTable[r.article_table].push(r.article_id);
  }
  const out: UnifiedArticle[] = [];

  if (byTable["ai_rewritten"]?.length) {
    const { data } = await sb
      .from("ai_rewritten_articles")
      .select("id, slug, title, excerpt, published_at, created_at, persona:ai_personas(name)")
      .in("id", byTable["ai_rewritten"]);
    for (const r of (data || []) as any[]) {
      out.push({
        slug: r.slug,
        title: r.title,
        excerpt: r.excerpt || "",
        image: null,
        date: r.published_at || r.created_at,
        author: Array.isArray(r.persona) ? r.persona[0]?.name || "AV Beat" : r.persona?.name || "AV Beat",
        source_table: "ai_rewritten",
      });
    }
  }

  if (byTable["wp_imported"]?.length) {
    const { data } = await sb
      .from("wp_imported_posts")
      .select("wp_slug, title, excerpt, featured_image, wp_published_at, author_name")
      .in("wp_id", byTable["wp_imported"]);
    for (const r of (data || []) as any[]) {
      out.push({
        slug: r.wp_slug,
        title: r.title,
        excerpt: r.excerpt || "",
        image: r.featured_image,
        date: r.wp_published_at,
        author: r.author_name || "AV Beat",
        source_table: "wp_imported",
      });
    }
  }

  out.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
  return out;
}

export default async function EventCoveragePage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const sb = sbAnon();

  const { data: e } = await sb
    .from("events")
    .select("*")
    .eq("slug", slug)
    .maybeSingle();
  if (!e) notFound();
  const event = e as Event;

  const { data: refs } = await sb
    .from("article_events")
    .select("article_id, article_table")
    .eq("event_id", event.id)
    .limit(500);

  const articles = await fetchArticles((refs || []) as ArticleRef[]);

  const today = new Date().toISOString().slice(0, 10);
  const isLive = today >= event.start_date && today <= event.end_date;
  const isPast = today > event.end_date;
  const daysUntil = Math.ceil(
    (new Date(event.start_date).getTime() - Date.now()) / 86400000
  );

  const eventJsonLd = {
    "@context": "https://schema.org",
    "@type": "Event",
    name: event.name,
    startDate: event.start_date,
    endDate: event.end_date,
    eventStatus:
      event.status === "cancelled"
        ? "https://schema.org/EventCancelled"
        : "https://schema.org/EventScheduled",
    location: {
      "@type": "Place",
      name: event.venue || event.city || event.country || "TBC",
      address: [event.venue, event.city, event.country].filter(Boolean).join(", "),
    },
    url: event.url || `https://avbeat.com/show-coverage/${event.slug}`,
  };

  return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="max-w-container mx-auto px-4 py-10 text-[#e5e7eb]">
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(eventJsonLd) }}
        />
        <div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-8">
        <main>
        <Link href="/show-coverage" className="text-sm text-[var(--color-text-info,#60a5fa)] hover:underline">
          ← All events
        </Link>

      <header className="mt-4 mb-8 border-b border-[#DCE6F2] pb-6">
        <div className="flex items-center gap-3 mb-2">
          {isLive && (
            <span className="inline-flex items-center gap-1.5 text-[11px] font-mono uppercase tracking-wider text-red-400">
              <span className="bb-pulse-dot bb-pulse-dot--red" /> live
            </span>
          )}
          {!isLive && !isPast && (
            <span className="inline-flex items-center gap-1.5 text-[11px] font-mono uppercase tracking-wider text-[var(--color-text-info,#60a5fa)]">
              T-{daysUntil}d
            </span>
          )}
          {isPast && (
            <span className="inline-flex items-center gap-1.5 text-[11px] font-mono uppercase tracking-wider text-[#6b7280]">
              past event
            </span>
          )}
          <span className="text-[11px] font-mono uppercase tracking-wider text-[#6b7280]">
            {event.status}
          </span>
        </div>
        <h1 className="font-serif text-4xl font-bold tracking-tight">{event.name}</h1>
        <div className="mt-2 text-[#9ca3af]">
          {fmtRange(event.start_date, event.end_date)}
        </div>
        <div className="text-sm text-[#9ca3af] mt-1">
          {[event.venue, event.city, event.country].filter(Boolean).join(" · ")}
        </div>
        {event.url && (
          <div className="text-xs font-mono text-[var(--color-text-info,#60a5fa)] mt-2">
            <a href={event.url} target="_blank" rel="noopener noreferrer">
              {new URL(event.url).hostname.replace(/^www\./, "")} →
            </a>
          </div>
        )}
        {event.hashtag && (
          <div className="text-xs font-mono text-[#6b7280] mt-1">{event.hashtag}</div>
        )}
      </header>

        {/* In-content 728x90 banner */}
        {pickAds("728x90", 1).length > 0 && (
          <div className="my-8 hidden md:flex justify-center" aria-label="Advertisement">
            <AdImage ad={pickAds("728x90", 1)[0]} page="show-coverage" />
          </div>
        )}

        <section>
          <h2 className="font-mono text-xs uppercase tracking-wider text-[#6b7280] mb-4">
            Coverage ({articles.length})
          </h2>
          {articles.length === 0 ? (
            <p className="text-sm text-[#6b7280]">
              No articles tagged to this event yet.
            </p>
          ) : (
            <ul className="space-y-5">
              {articles.map((a) => (
                <li key={`${a.source_table}-${a.slug}`} className="border-b border-[#DCE6F2] pb-5 last:border-0">
                  <Link
                    href={`/news/${a.slug}`}
                    className="block hover:opacity-90"
                  >
                    <h3 className="font-serif text-xl font-semibold">{a.title}</h3>
                    {a.excerpt && <p className="text-sm text-[#9ca3af] mt-1 line-clamp-2">{a.excerpt}</p>}
                    <div className="text-[11px] font-mono text-[#6b7280] mt-2">
                      {a.author} · {new Date(a.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
                    </div>
                  </Link>
                </li>
              ))}
            </ul>
          )}
        </section>
        </main>

        {/* Sidebar: 300x600 + rotating 300x250s */}
        <aside className="mt-10 lg:mt-0" aria-label="Advertisements">
          <div className="lg:sticky lg:top-24">
            <SidebarAdStack />
          </div>
        </aside>
        </div>
      </div>
      <Footer />
    </div>
  );
}
