import Image from "next/image";
import { MAX_ATTEMPTS, getPuzzleNumber } from "@/lib/game-engine";
import { getDictionary, type Dictionary } from "@/lib/i18n";
import { formatElapsed } from "@/lib/time";

type HeaderProps = {
  attemptsUsed: number;
  dateKey: string;
  elapsedSeconds: number;
  solved: boolean;
  t?: Dictionary;
};

function attemptColor(remaining: number, solved: boolean) {
  if (solved) return "bg-emerald-300 text-pitch-950 shadow-emerald-300/25";
  if (remaining <= 1) return "bg-red-400 text-white shadow-red-400/25";
  if (remaining <= 2) return "bg-orange-400 text-pitch-950 shadow-orange-400/25";
  if (remaining <= 3) return "bg-yellow-300 text-pitch-950 shadow-yellow-300/25";
  return "bg-emerald-400 text-pitch-950 shadow-emerald-400/25";
}

export default function Header({ attemptsUsed, dateKey, elapsedSeconds, solved, t: dictionary }: HeaderProps) {
  const remaining = Math.max(0, MAX_ATTEMPTS - attemptsUsed);
  const t = dictionary ?? getDictionary("en");

  return (
    <header className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3">
      <div className="rounded-lg border border-white/10 bg-white/[0.06] px-3 py-2">
        <p className="text-xs uppercase text-white/50">{t.puzzle}</p>
        <p className="text-lg font-black">#{getPuzzleNumber(dateKey)}</p>
      </div>

      <div className="min-w-0 text-center sm:text-left">
        <h1 className="sr-only">hidden11</h1>
        <Image
          src="/logo.svg?v=2"
          alt="hidden11"
          width={220}
          height={56}
          priority
          className="mx-auto h-12 w-auto max-w-[220px] sm:mx-0 sm:h-14"
        />
        <p className="mt-1 text-xs text-white/60 sm:text-sm">{t.dailySubtitle}</p>
      </div>

      <div className="flex items-center gap-2">
        <div className="rounded-lg border border-white/10 bg-white/[0.06] px-3 py-2 text-right">
          <p className="text-[10px] font-black uppercase text-white/45">{t.time}</p>
          <p className="text-sm font-black text-white">{formatElapsed(elapsedSeconds)}</p>
        </div>

        <div
          className={`flex h-16 w-16 flex-col items-center justify-center rounded-full shadow-xl transition ${attemptColor(
            remaining,
            solved,
          )}`}
          title={solved ? t.puzzleFinished : t.left(remaining)}
        >
          <span className="text-2xl font-black leading-none">{solved ? "✓" : remaining}</span>
          <span className="mt-0.5 text-[10px] font-black uppercase leading-none opacity-70">{t.tries}</span>
        </div>
      </div>
    </header>
  );
}