// ImportingScreen.jsx — "Breaking this down…" loader.
// Shown between the study composer and the plan reveal while Gemini
// ingests the syllabus or text. Progress copy rotates so the user
// feels progress; actual ingest is a single async call in the parent.

function ImportingScreen({ label, error, onCancel }) {
  const STEPS = [
    "Reading the syllabus…",
    "Finding anchors and derivations…",
    "Placing checkpoints on the calendar…",
    "Laying out the concept map…",
  ];
  const [step, setStep] = React.useState(0);

  React.useEffect(() => {
    if (error) return;
    const t = setInterval(
      () => setStep(s => (s + 1) % STEPS.length),
      1800,
    );
    return () => clearInterval(t);
  }, [error]);

  return (
    <section className="importing">
      <div className="importing-inner">
        <div className="importing-eyebrow">
          {error ? "Couldn't parse" : "Breaking this down"}
        </div>
        <h1 className="importing-title">
          {label || (error ? "Something went wrong." : "Reading your class…")}
        </h1>

        {!error && (
          <>
            <div className="importing-spinner" aria-hidden="true">
              <div className="importing-dot" />
              <div className="importing-dot" />
              <div className="importing-dot" />
            </div>
            <div className="importing-step">{STEPS[step]}</div>
            <div className="importing-hint">This usually takes 10&ndash;30 seconds.</div>
          </>
        )}

        {error && (
          <>
            <div className="importing-error">{error}</div>
            <button className="btn-primary" onClick={onCancel}>Try again</button>
          </>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { ImportingScreen });