/* Countdown component with flip animation */

const TARGET_ISO = "2026-05-08T23:00:00-04:00";
const TARGET_MS = new Date(TARGET_ISO).getTime();

function useCountdown() {
  const compute = () => {
    const delta = Math.max(0, TARGET_MS - Date.now());
    return {
      delta,
      days: Math.floor(delta / 86_400_000),
      hours: Math.floor((delta % 86_400_000) / 3_600_000),
      minutes: Math.floor((delta % 3_600_000) / 60_000),
      seconds: Math.floor((delta % 60_000) / 1000),
    };
  };
  const [t, setT] = React.useState(compute);
  React.useEffect(() => {
    const id = setInterval(() => setT(compute()), 1000);
    return () => clearInterval(id);
  }, []);
  return t;
}

const pad = (n) => String(n).padStart(2, "0");

/* Single digit that flips on change */
const FlipDigit = ({ value, accent }) => {
  const [prev, setPrev] = React.useState(value);
  const [flipping, setFlipping] = React.useState(false);
  React.useEffect(() => {
    if (value !== prev) {
      setFlipping(true);
      const id = setTimeout(() => {
        setPrev(value);
        setFlipping(false);
      }, 400);
      return () => clearTimeout(id);
    }
  }, [value, prev]);

  return (
    <span className={`flip-digit ${flipping ? "is-flipping" : ""}`}>
      <span className="flip-digit__top" style={{ color: accent }}>
        {pad(value)}
      </span>
      {flipping && (
        <span className="flip-digit__bottom" style={{ color: accent }}>
          {pad(prev)}
        </span>
      )}
    </span>
  );
};

const CountdownBox = ({ value, label, accent }) => (
  <div className="cd-box">
    <div className="cd-box__inner">
      <FlipDigit value={value} accent={accent} />
    </div>
    <span className="cd-box__label">{label}</span>
  </div>
);

const Countdown = ({ accent = "#3A5F1E" }) => {
  const { delta, days, hours, minutes, seconds } = useCountdown();
  if (delta <= 0) {
    return (
      <div className="cd-done">
        <p className="cd-done__title">¡Ya estamos de vuelta!</p>
        <a className="cd-done__btn" href="https://www.lo-go.cl/">
          Visitar el sitio
          <window.LogoIcons.ArrowRight />
        </a>
      </div>
    );
  }
  return (
    <div className="cd" role="timer" aria-live="polite">
      <CountdownBox value={days} label="DÍAS" accent={accent} />
      <span className="cd-sep">:</span>
      <CountdownBox value={hours} label="HORAS" accent={accent} />
      <span className="cd-sep">:</span>
      <CountdownBox value={minutes} label="MIN" accent={accent} />
      <span className="cd-sep">:</span>
      <CountdownBox value={seconds} label="SEG" accent={accent} />
    </div>
  );
};

window.LogoCountdown = Countdown;