import type { Metadata } from "next";
import { notFound } from "next/navigation";
import Hero from "@/components/Hero";
import MatchupHUD from "@/components/MatchupHUD";
import Arena from "@/components/Arena";
import Footer from "@/components/Footer";
import { GROUP_A } from "@/lib/schedule";
import { getPredictions, getCrowd, matchUrl } from "@/lib/mockData";
import { parseLang, dict, teamShort } from "@/lib/i18n";

// L2. 경기 상세(대결) 페이지 — 6경기 정적 생성
export function generateStaticParams() {
  return GROUP_A.map((m) => ({ matchId: m.matchId }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ matchId: string }>;
}): Promise<Metadata> {
  const { matchId } = await params;
  const match = GROUP_A.find((m) => m.matchId === matchId);
  if (!match) return { title: "TriplePick 2026" };
  const title = `${match.teamA.shortName} vs ${match.teamB.shortName} AI 승부예측 | TriplePick`;
  const desc = `GPT·Claude·Gemini가 ${match.teamA.name} vs ${match.teamB.name}를 서로 다르게 예측했습니다. 당신의 픽을 찍고 AI와 겨뤄보세요.`;
  return {
    title,
    description: desc,
    openGraph: { title, description: desc, siteName: "TriplePick", type: "website", locale: "ko_KR" },
    twitter: { card: "summary_large_image", title, description: desc },
  };
}

export default async function MatchPage({
  params,
  searchParams,
}: {
  params: Promise<{ matchId: string }>;
  searchParams: Promise<{ lang?: string }>;
}) {
  const { matchId } = await params;
  const { lang: langParam } = await searchParams;
  const lang = parseLang(langParam);
  const t = dict(lang);

  const match = GROUP_A.find((m) => m.matchId === matchId);
  if (!match) notFound();

  const predictions = getPredictions(match, lang);
  const crowd = getCrowd(match);
  const aShort = teamShort(match.teamA, lang);
  const bShort = teamShort(match.teamB, lang);
  const hook = lang === "en" ? t.hook(aShort, bShort) : match.hookText;

  return (
    <main className="shell">
      <Hero
        back
        lang={lang}
        share={{
          url: matchUrl(match.matchId),
          title: `${aShort} vs ${bShort} — TriplePick`,
          text:
            lang === "en"
              ? `${hook} — see all 3 AI picks and make yours!`
              : `${hook} — AI 셋의 예측을 보고 너의 픽을 찍어봐!`,
        }}
      />

      {/* 경기별 후킹 카피 (한 줄) */}
      <h1 className="mt-6 flex items-center justify-center gap-2 whitespace-nowrap text-[19px] font-extrabold leading-snug">
        <span className="text-[var(--green)]">⫽</span>
        {hook}
        <span className="text-[var(--green)]">⫽</span>
      </h1>

      <MatchupHUD match={match} lang={lang} />
      <Arena
        match={match}
        predictions={predictions}
        crowd={crowd}
        shareUrl={matchUrl(match.matchId)}
        lang={lang}
      />
      <Footer lang={lang} />
    </main>
  );
}