import { MATCH } from "@/lib/mockData";
import { kickoffDisplay } from "@/lib/format";
import BallIcon from "./BallIcon";

export default function MatchupHUD() {
  const { group, roundLabel } = MATCH;
  return (
    <section className="mt-6">
      {/* Match 01 → Final 진행 */}
      <div className="mb-3 flex items-center gap-2 text-[11px] font-semibold">
        <span className="rounded-md border border-[var(--green)] px-2.5 py-1 text-[var(--green)]">
          {roundLabel}
        </span>
        <div className="relative h-px flex-1 bg-gradient-to-r from-[var(--green)] to-[var(--line-d)]">
          <span className="absolute -left-0.5 top-1/2 -translate-y-1/2 text-[var(--green)]">
            ◀
          </span>
          <span className="absolute -right-0.5 top-1/2 -translate-y-1/2 text-[var(--line-d)]">
            ▶
          </span>
        </div>
        <span className="rounded-md border border-[var(--line-d)] px-2.5 py-1 text-[var(--ink-muted)]">
          Final
        </span>
      </div>

      {/* 대결 카드 (녹색 글로우 보더) */}
      <div
        className="rounded-3xl border-2 border-[var(--green)] bg-[#171b21] p-5"
        style={{ boxShadow: "0 0 28px rgba(62,224,138,0.35), inset 0 0 24px rgba(62,224,138,0.06)" }}
      >
        {/* 헤더: 축구공 아이콘 + 타이틀 + 일시 */}
        <div className="flex items-center gap-3">
          <BallIcon className="h-14 w-14 shrink-0" />
          <div className="min-w-0">
            <div className="text-[22px] font-extrabold leading-tight">
              {MATCH.teamA.name}{" "}
              <span className="text-white/55">vs</span> {MATCH.teamB.name}
            </div>
            <div className="mt-1 text-[15px] font-bold text-[var(--green)]">
              {kickoffDisplay(MATCH.kickoffKst)} · Group {group}
            </div>
            <div className="mt-0.5 text-[12px] text-white/65">{MATCH.venue}</div>
          </div>
        </div>

        {/* 국기 + 라이트닝 VS */}
        <div className="mt-5 grid grid-cols-[1fr_auto_1fr] items-center gap-3">
          <KorFlag />
          <div className="relative grid place-items-center">
            <div className="vs-glow absolute h-28 w-28" />
            <span
              className="relative font-impact text-[46px] italic leading-none text-[var(--green)]"
              style={{ textShadow: "0 0 18px rgba(62,224,138,0.8)" }}
            >
              VS
            </span>
          </div>
          <CzeFlag />
        </div>
      </div>
    </section>
  );
}

function KorFlag() {
  // 실제 국기 이미지
  return (
    <img
      src="/icons/kor.png"
      alt="Korea Republic"
      className="flag-img mx-auto h-[68px] w-[104px]"
    />
  );
}

function CzeFlag() {
  // 체코 국기 (이미지 없음 → SVG)
  return (
    <svg
      viewBox="0 0 6 4"
      className="mx-auto h-[68px] w-[104px] rounded-lg border border-[var(--line-d)]"
      preserveAspectRatio="none"
      aria-label="Czechia"
    >
      <rect width="6" height="2" y="0" fill="#ffffff" />
      <rect width="6" height="2" y="2" fill="#d7141a" />
      <polygon points="0,0 3,2 0,4" fill="#11457e" />
    </svg>
  );
}
