// VeryPay — Cinematic Loader
function Loader({ onDone }) {
  const [phase, setPhase] = useState("brackets"); // brackets -> icon -> wordmark -> done
  const [counter, setCounter] = useState(1);
  const [progress, setProgress] = useState(0);
  const [hidden, setHidden] = useState(false);
  const mobile = window.innerWidth < 600;
  const T = mobile ? 0.7 : 1; // shorter on mobile

  useEffect(() => {
    const t1 = setTimeout(() => setPhase("icon"), 400 * T);
    const t2 = setTimeout(() => setPhase("wordmark"), 1200 * T);
    const t3 = setTimeout(() => setPhase("done"), 1800 * T);
    const t4 = setTimeout(() => {
      setHidden(true);
      setTimeout(() => onDone(), 450);
    }, 2400 * T);

    // counter 1..100 over 2.4s
    let i = 1;
    const ci = setInterval(() => {
      i = Math.min(100, i + Math.floor(Math.random() * 4) + 2);
      setCounter(i);
      setProgress(i);
      if (i >= 100) clearInterval(ci);
    }, 24 * T);

    return () => {
      [t1, t2, t3, t4].forEach(clearTimeout);
      clearInterval(ci);
    };
  }, []);

  return (
    <div
      className="loader"
      style={{
        opacity: hidden ? 0 : 1,
        transition: "opacity 0.45s ease-out",
        pointerEvents: hidden ? "none" : "auto"
      }}
    >
      <div className="loader-stage">
        {/* 4 corner brackets */}
        {["tl", "tr", "bl", "br"].map((p, i) => (
          <span
            key={p}
            className={`loader-bracket ${p}`}
            style={{
              opacity: phase === "brackets" || phase === "icon" || phase === "wordmark" ? 1 : 0,
              transition: `opacity 0.6s ease ${i * 0.06}s`
            }}
          ></span>
        ))}

        {/* Icon container */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "column",
            gap: 22
          }}
        >
          {/* Icon — base + spark */}
          <div style={{ width: "44%", aspectRatio: "1", position: "relative" }}>
            {/* fagulha drop — simulates spark falling to land on the base */}
            <div
              aria-hidden="true"
              style={{
                position: "absolute",
                left: "50%",
                width: 14,
                height: 14,
                background: "var(--magenta)",
                borderRadius: "50% 50% 50% 50% / 60% 60% 40% 40%",
                boxShadow: "0 0 20px var(--magenta-soft), 0 0 36px rgba(238,67,137,0.45)",
                opacity: phase === "icon" ? 1 : 0,
                top: phase === "icon" ? "32%" : "-10%",
                transform: phase === "icon"
                  ? "translateX(-50%) scale(0.4)"
                  : "translateX(-50%) scale(1)",
                transition: phase === "icon"
                  ? "top 0.45s cubic-bezier(.5,0,.7,1), transform 0.15s ease 0.40s, opacity 0.15s ease 0.45s"
                  : "opacity 0.2s, top 0.2s"
              }}
            ></div>
            <img
              src="assets/icon-pink.png"
              alt=""
              style={{
                width: "100%",
                height: "100%",
                objectFit: "contain",
                opacity: phase === "icon" || phase === "wordmark" || phase === "done" ? 1 : 0,
                transform:
                  phase === "icon"
                    ? "scale(0.96) translateY(0)"
                    : phase === "wordmark" || phase === "done"
                    ? "scale(1) translateY(0)"
                    : "scale(0.8) translateY(20px)",
                transition: "opacity 0.7s 0.25s, transform 0.9s cubic-bezier(.2,.8,.2,1) 0.25s"
              }}
            />
          </div>
          {/* Wordmark */}
          <div
            style={{
              opacity: phase === "wordmark" || phase === "done" ? 1 : 0,
              transition: "opacity 0.6s ease"
            }}
          >
            <Wordmark size={mobile ? 22 : 28} onDark={true} />
          </div>
        </div>
      </div>

      {/* counter bottom left */}
      <div className="loader-mono counter">
        <span style={{ color: "var(--magenta)" }}>[</span> {String(counter).padStart(3, "0")}{" "}
        <span style={{ color: "var(--magenta)" }}>]</span>
      </div>

      {/* status text bottom right */}
      <div
        className="loader-mono"
        style={{ bottom: "8%", right: "var(--gutter)", textAlign: "right" }}
      >
        {phase === "done"
          ? "DIAGNÓSTICO PRONTO / 2026"
          : "INICIANDO DIAGNÓSTICO"}
      </div>

      {/* progress bar */}
      <div className="loader-progress" style={{ width: `${progress}%` }}></div>
    </div>
  );
}

window.Loader = Loader;