// ============================================================
// ATHAR — Pages 6 & 7 (Reveal flow, standalone, no nav)
// ============================================================

const SAMPLE_MESSAGE =
  "From the first moment I saw you, I knew — some people walk into your life and rearrange everything quietly.";

// ---------- PAGE 6: Message Reveal /r/:token ----------
function MessageReveal({ token }) {
  // States: 'idle' (pre-reveal), 'timer' (counting down), 'finale' (fade complete)
  const [state, setState] = useState('idle');
  const [seconds, setSeconds] = useState(60);
  const [fading, setFading] = useState(false);
  const intervalRef = useRef(null);
  const fadeTimerRef = useRef(null);

  const begin = useCallback(() => {
    setState('timer');
    setSeconds(60);
    setFading(false);
  }, []);

  useEffect(() => {
    if (state !== 'timer') return;
    intervalRef.current = setInterval(() => {
      setSeconds((s) => {
        if (s <= 1) {
          clearInterval(intervalRef.current);
          // trigger fade
          setFading(true);
          fadeTimerRef.current = setTimeout(() => setState('finale'), 2500);
          return 0;
        }
        return s - 1;
      });
    }, 1000);
    return () => {
      clearInterval(intervalRef.current);
      clearTimeout(fadeTimerRef.current);
    };
  }, [state]);

  // Cleanup on unmount
  useEffect(() => () => {
    clearInterval(intervalRef.current);
    clearTimeout(fadeTimerRef.current);
  }, []);

  if (state === 'idle') {
    return (
      <section className="reveal" data-screen-label="06 Reveal — idle">
        <div className="reveal__brand" lang="ar" dir="rtl">أثر</div>
        <p className="reveal__sub">A message was left for you.</p>
        <button className="btn reveal__btn" onClick={begin}>Open</button>
      </section>
    );
  }

  if (state === 'finale') {
    return (
      <section className="reveal" data-screen-label="06 Reveal — finale">
        <div className="reveal__brand" lang="ar" dir="rtl">أثر</div>
        <p className="reveal__finale">Some things are meant to be felt, not kept.</p>
      </section>
    );
  }

  // timer state
  const formatted = '0:' + String(seconds).padStart(2, '0');
  return (
    <section className="reveal" data-screen-label="06 Reveal — timer">
      <div className="reveal__timer" aria-live="polite">{formatted}</div>
      <p className={'reveal__msg' + (fading ? ' reveal__msg--fade' : '')}>
        {SAMPLE_MESSAGE}
      </p>
    </section>
  );
}

// ---------- PAGE 7: Expired /r/:token/expired ----------
function Expired({ token }) {
  return (
    <section className="expired" data-screen-label="07 Expired">
      <div className="expired__brand" lang="ar" dir="rtl">أثر</div>
      <hr className="rule" aria-hidden="true" />
      <p className="expired__msg">This message has already been opened.</p>
      <div className="expired__foot">Some things are meant to be felt, not kept.</div>
    </section>
  );
}

window.MessageReveal = MessageReveal;
window.Expired = Expired;