import { Link, useNavigate } from "react-router-dom";
import ShareButton from "./ShareButton";
import LangSwitch from "./LangSwitch";
import { type Lang, dict } from "@/lib/i18n";
import type { League } from "@/lib/types";

type Share = { url: string; title: string; text: string };

// 브랜드 헤더 (대시보드·상세 공용). 경기별 후킹 카피는 상세 페이지에서 별도 노출.
export default function Hero({
  back = false,
  share,
  lang = "ko",
  league = "wc",
}: {
  back?: boolean;
  share?: Share;
  lang?: Lang;
  league?: League;
}) {
  const t = dict(lang);
  const navigate = useNavigate();
  const home = lang === "en" ? "/?lang=en" : "/";
  // 뒤로가기: 앱 내 이력이 있으면 직전 페이지로 그대로 복귀(전체 일정의 선택 날짜 보존),
  // 없으면(공유 링크로 직접 진입 등) 전체 일정으로 이동.
  const goBack = (e: React.MouseEvent) => {
    e.preventDefault();
    const idx = (window.history.state?.idx as number | undefined) ?? 0;
    if (idx > 0) navigate(-1);
    else navigate(home);
  };
  return (
    <header className="pt-5 text-center">
      {back && (
        <div className="mb-3 flex items-center justify-between">
          <Link
            to={home}
            onClick={goBack}
            className="flex items-center gap-1.5 rounded-full border border-white/12 bg-white/8 px-[18px] py-[9px] text-[18px] font-bold text-white/85 active:scale-95"
          >
            {t.back}
          </Link>
          {share && (
            <ShareButton {...share} label={t.share} copiedLabel={t.shareCopied} />
          )}
        </div>
      )}
      <div className="font-impact text-[44px] leading-none tracking-tight">
        TRIPLE PICK <span className="text-[var(--green)]">2026</span>
      </div>
      <div className="relative mt-2">
        <div className="text-[16px] font-extrabold text-[var(--green)]">
          AI Prediction Arena
        </div>
        <div className="absolute right-0 top-1/2 -translate-y-1/2">
          <LangSwitch lang={lang} />
        </div>
      </div>
      <div className="mt-2 inline-block rounded-full border border-white/12 bg-white/8 px-3 py-1 text-[13px] font-semibold text-white/85">
        {league === "kbo"
          ? lang === "en"
            ? "AI-powered 2026 KBO League game predictions"
            : "AI와 함께하는 2026 프로야구 KBO 승부예측 챌린지"
          : league === "mlb"
            ? lang === "en"
              ? "AI-powered 2026 MLB game predictions"
              : "AI와 함께하는 2026 MLB 승부예측 챌린지"
            : t.heroPill}
      </div>
      <LeagueTabs lang={lang} current={league} />
    </header>
  );
}

// 리그 전환 탭 — 단일 앱 내 전환. 탭 클릭 시 해당 리그 대시보드로 이동.
function LeagueTabs({ lang, current }: { lang: Lang; current: League }) {
  const navigate = useNavigate();
  const tabs: { key: League; label: string }[] = [
    { key: "wc", label: lang === "en" ? "World Cup" : "월드컵" },
    { key: "kbo", label: "KBO" },
    { key: "mlb", label: "MLB" },
  ];
  return (
    <div className="mt-3 flex justify-center">
      <div className="inline-flex rounded-full border border-white/12 bg-white/5 p-1 text-[13px] font-bold">
        {tabs.map((tab) =>
          tab.key === current ? (
            <span
              key={tab.key}
              className="rounded-full bg-[var(--green)] px-4 py-1.5 text-black"
            >
              {tab.label}
            </span>
          ) : (
            <button
              key={tab.key}
              onClick={() =>
                navigate(
                  `/?league=${tab.key}${lang === "en" ? "&lang=en" : ""}`
                )
              }
              className="rounded-full px-4 py-1.5 text-white/45 transition hover:text-white/75"
            >
              {tab.label}
            </button>
          ),
        )}
      </div>
    </div>
  );
}