import type { Match } from "@/lib/types";
import { kickoffDisplay } from "@/lib/format";
import BallIcon from "./BallIcon";
import TeamFlag from "./TeamFlag";

export default function MatchupHUD({ match }: { match: Match }) {
  const { group, roundLabel } = match;
  const finished = !!match.result;
  return (
    <section className="mt-6">
      {/* 진행 바: roundLabel → 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(74,255,160,0.35), inset 0 0 24px rgba(74,255,160,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">
          <TeamFlag team={match.teamA} className="mx-auto h-[68px] w-[104px]" />
          <div className="relative grid place-items-center">
            <div className="vs-glow absolute h-28 w-28" />
            {finished && match.result ? (
              <span className="relative whitespace-nowrap font-mono text-[34px] font-extrabold tabular-nums text-white">
                {match.result.scoreA}
                <span className="px-1 text-white/55">-</span>
                {match.result.scoreB}
              </span>
            ) : (
              <span
                className="relative font-impact text-[46px] italic leading-none text-[var(--green)]"
                style={{ textShadow: "0 0 18px rgba(74,255,160,0.8)" }}
              >
                VS
              </span>
            )}
          </div>
          <TeamFlag team={match.teamB} className="mx-auto h-[68px] w-[104px]" />
        </div>

        {finished && (
          <div className="mt-3 text-center text-[12px] font-bold text-[var(--green)]">
            경기 종료 · 최종 결과
          </div>
        )}
      </div>
    </section>
  );
}