import { useEffect, useState } from "react";
import Hero from "@/components/Hero";
import ScheduleBoard from "@/components/ScheduleBoard";
import Ado2Ad from "@/components/Ado2Ad";
import Footer from "@/components/Footer";
import { dict } from "@/lib/i18n";
import { useLang } from "@/lib/useLang";
import { useLeague } from "@/lib/useLeague";
import { listMatches } from "@/lib/api";
import type { Match } from "@/lib/types";

// L1. 전체 일정 대시보드 (랜딩 진입) — 리그 탭(월드컵/KBO/MLB)별 경기 목록
export default function Dashboard() {
  const lang = useLang();
  const [league] = useLeague();
  const t = dict(lang);
  const [matches, setMatches] = useState<Match[] | null>(null);
  const [error, setError] = useState(false);

  useEffect(() => {
    let alive = true;
    setMatches(null);
    setError(false);
    listMatches(lang, league)
      .then((m) => alive && setMatches(m))
      .catch(() => alive && setError(true));
    return () => {
      alive = false;
    };
  }, [lang, league]);

  return (
    <main className="shell">
      <Hero lang={lang} league={league} />

      {/* 기간 안내 + CTA 영역 */}
      <div className="mt-5 rounded-2xl border border-[var(--line-d)] bg-[var(--bg2)] p-4 text-center">
        <p className="whitespace-pre-line text-[14px] font-bold leading-snug">
          {t.introLead}
        </p>
        <p className="mt-1 text-[14px] font-bold leading-snug text-[var(--green)]">
          {t.prizeLine1}
          <br />
          <span className="whitespace-nowrap">{t.prizeLine2}</span>
        </p>
      </div>

      {error && (
        <p className="mt-6 text-center text-[13px] text-white/55">
          {lang === "en" ? "Failed to load matches." : "경기 정보를 불러오지 못했습니다."}
        </p>
      )}
      {matches && <ScheduleBoard matches={matches} lang={lang} league={league} />}

      <Ado2Ad lang={lang} />
      <Footer lang={lang} league={league} />
    </main>
  );
}