"use client";

import { useEffect, useState } from "react";
import { Timer } from "lucide-react";

type Props = {
  enabled: boolean;
  endAtIso: string | null;
  title: string;
};

function pad2(n: number): string {
  return n.toString().padStart(2, "0");
}

export default function HeroCountdown({ enabled, endAtIso, title }: Props) {
  const [now, setNow] = useState(() => Date.now());

  useEffect(() => {
    if (!enabled || !endAtIso) return;
    const id = window.setInterval(() => setNow(Date.now()), 1000);
    return () => window.clearInterval(id);
  }, [enabled, endAtIso]);

  if (!enabled || !endAtIso?.trim()) return null;

  const end = new Date(endAtIso).getTime();
  if (Number.isNaN(end)) return null;

  const diff = Math.max(0, end - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff % 86400000) / 3600000);
  const minutes = Math.floor((diff % 3600000) / 60000);

  const safeTitle = title.slice(0, 80) || "Sorteo en vivo en";

  const units: [number, string][] = [
    [days, "Días"],
    [hours, "Horas"],
    [minutes, "Min"],
  ];

  return (
    <div className="mt-8 inline-flex flex-wrap items-center gap-4 rounded-2xl border border-slate-200 bg-white px-5 py-4 shadow-sm">
      <div className="flex items-center gap-2">
        <Timer className="h-5 w-5 text-brand-purple" aria-hidden />
        <p className="text-sm font-bold text-brand-ink">{safeTitle}</p>
      </div>
      <div className="flex gap-3 text-center" role="timer" aria-live="polite">
        {units.map(([value, label]) => (
          <div key={label} className="min-w-[3.25rem] rounded-xl bg-brand-soft px-2 py-1.5">
            <span className="block font-serif text-2xl font-bold text-brand-purple">{pad2(value)}</span>
            <span className="block text-[10px] font-semibold uppercase text-brand-muted">{label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}