import Link from 'next/link';
import { notFound } from 'next/navigation';

type ChampionResponse = {
  data: Record<
    string,
    {
      id: string;
      key: string;
      name: string;
      title: string;
      lore: string;
      info: Record<string, number>;
      tags: string[];
      image: { full: string };
    }
  >;
};

const INFO_LABELS: Record<string, string> = {
  attack: '공격',
  defense: '방어',
  magic: '마법',
  difficulty: '난이도',
};

const TAG_LABELS: Record<string, string> = {
  Fighter: '전사',
  Tank: '탱커',
  Mage: '메이지',
  Assassin: '암살자',
  Marksman: '원거리 딜러',
  Support: '서포터',
};

export default async function ChampionPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const response = await fetch(
    'https://ddragon.leagueoflegends.com/cdn/16.9.1/data/ko_KR/champion.json',
    { cache: 'force-cache' },
  );
  const payload = (await response.json()) as ChampionResponse;
  const champion = Object.values(payload.data).find(
    (item) => item.id.toLowerCase() === slug.toLowerCase() || item.name.toLowerCase() === slug.toLowerCase(),
  );

  if (!champion) notFound();

  return (
    <main className="mx-auto max-w-6xl px-4 pb-20 pt-8">
      <section className="result-hero overflow-hidden rounded-[2rem]">
        <div
          className="absolute inset-0 bg-cover bg-center opacity-35"
          style={{
            backgroundImage: `url(https://ddragon.leagueoflegends.com/cdn/img/champion/splash/${champion.id}_0.jpg)`,
          }}
        />
        <div className="absolute inset-0 bg-[linear-gradient(120deg,rgba(10,14,22,0.92),rgba(10,14,22,0.78),rgba(10,14,22,0.96))]" />
        <div className="relative z-[2] grid gap-6 px-7 py-8 md:grid-cols-[160px_1fr]">
          <img
            src={`https://ddragon.leagueoflegends.com/cdn/16.9.1/img/champion/${champion.id}.png`}
            alt={champion.name}
            className="h-40 w-40 rounded-[1.5rem] border border-white/10 object-cover"
          />
          <div>
            <p className="text-sm font-black tracking-[0.24em] text-[#d8ad53]">챔피언 상세</p>
            <h1 className="mt-3 text-5xl font-black text-white">{champion.name}</h1>
            <p className="mt-2 text-xl font-bold text-[#89baff]">{champion.title}</p>
            <p className="mt-5 max-w-3xl leading-8 text-[#c6d1e1]">{champion.lore}</p>
            <div className="mt-6 flex flex-wrap gap-2">
              {champion.tags.map((tag) => (
                <span key={tag} className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-black text-white">
                  {TAG_LABELS[tag] ?? tag}
                </span>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="mt-8 grid gap-6 md:grid-cols-4">
        {Object.entries(champion.info).map(([key, value]) => (
          <div key={key} className="ggti-card rounded-[1.5rem] p-5">
            <p className="text-xs font-black uppercase tracking-[0.18em] text-[#8a99b1]">
              {INFO_LABELS[key] ?? key}
            </p>
            <p className="mt-3 text-4xl font-black text-white">{value}</p>
          </div>
        ))}
      </section>

      <section className="mt-8 ggti-card rounded-[1.5rem] p-6">
        <p className="text-sm font-black tracking-[0.2em] text-[#d8ad53]">GGTI 노트</p>
        <h2 className="mt-2 text-3xl font-black text-white">이 챔피언으로 플레이한 성향을 분석해보세요</h2>
        <p className="mt-3 max-w-2xl leading-7 text-[#aeb8c9]">
          챔피언 상세 페이지는 전적 검색 진입점이자 서비스의 메인 소개 화면입니다. Riot ID를
          입력하면 이 챔피언이 포함된 최근 경기 기준으로 실제 성향 분석 결과를 확인할 수 있습니다.
        </p>
        <Link href="/" className="mt-6 inline-flex rounded-2xl bg-[#d8ad53] px-5 py-3 font-black text-[#111722]">
          GGTI 분석 시작
        </Link>
      </section>
    </main>
  );
}