// LoadingScreen — 000→100 counter over 2700ms, rotating words, accent progress bar.
const { useState, useEffect, useRef } = React;

function LoadingScreen({ onComplete }) {
  const [count, setCount] = useState(0);
  const [wordIndex, setWordIndex] = useState(0);
  const [leaving, setLeaving] = useState(false);
  const words = ["Design", "Create", "Inspire"];
  const rafRef = useRef(null);
  const startRef = useRef(null);
  const doneRef = useRef(false);

  useEffect(() => {
    const DURATION = 2700;
    const tick = (now) => {
      if (startRef.current === null) startRef.current = now;
      const elapsed = now - startRef.current;
      const pct = Math.min(100, Math.round((elapsed / DURATION) * 100));
      setCount(pct);
      if (pct >= 100) {
        if (!doneRef.current) {
          doneRef.current = true;
          setTimeout(() => {
            setLeaving(true);
            setTimeout(() => onComplete && onComplete(), 600);
          }, 400);
        }
        return;
      }
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, [onComplete]);

  useEffect(() => {
    const id = setInterval(() => {
      setWordIndex((i) => (i + 1) % words.length);
    }, 900);
    return () => clearInterval(id);
  }, []);

  return (
    <div
      className="fixed inset-0 z-[9999] bg-bg overflow-hidden transition-opacity duration-500"
      style={{ opacity: leaving ? 0 : 1 }}
    >
      {/* Top-left label */}
      <div
        className="absolute top-8 left-8 md:top-10 md:left-10 text-xs text-muted uppercase tracking-[0.3em]"
        style={{ animation: "loadLabel 0.8s ease-out forwards" }}
      >
        Portfolio
      </div>

      {/* Center rotating words */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="relative h-[1.2em] overflow-hidden flex items-center justify-center">
          <span
            key={wordIndex}
            className="block text-4xl md:text-6xl lg:text-7xl font-display italic text-text-primary/80"
            style={{ animation: "wordCycle 0.9s ease-in-out" }}
          >
            {words[wordIndex]}
          </span>
        </div>
      </div>

      {/* Bottom-right counter */}
      <div className="absolute bottom-6 right-8 md:bottom-8 md:right-12">
        <span className="text-6xl md:text-8xl lg:text-9xl font-display text-text-primary tabular-nums leading-none">
          {String(count).padStart(3, "0")}
        </span>
      </div>

      {/* Bottom progress bar */}
      <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-stroke/50">
        <div
          className="accent-gradient h-full origin-left"
          style={{
            transform: `scaleX(${count / 100})`,
            boxShadow: "0 0 8px rgba(137, 170, 204, 0.35)",
          }}
        ></div>
      </div>

      <style>{`
        @keyframes loadLabel {
          0% { opacity: 0; transform: translateY(-20px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes wordCycle {
          0% { opacity: 0; transform: translateY(20px); }
          25% { opacity: 1; transform: translateY(0); }
          75% { opacity: 1; transform: translateY(0); }
          100% { opacity: 0; transform: translateY(-20px); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { LoadingScreen });