// Training — guided 5-step tutorial on a flat practice green.
function Training({ sound, onExit }) {
  const B = window.BBP;
  const def = React.useMemo(() => B.tutorialHole(), []);
  const palette = React.useMemo(() => B.greenPalette(2, false), []);
  const [step, setStep] = React.useState(0);
  const [complete, setComplete] = React.useState(false);
  const [natural, setNatural] = React.useState(false);
  const [flash, setFlash] = React.useState(null);
  const stepRef = React.useRef(0);
  stepRef.current = step;
  const lippedRef = React.useRef(false);
  const step3TriesRef = React.useRef(0);

  const STEPS = [
    { n: "STEP 1 OF 5", t: <span>Drag <b>anywhere on screen</b> and release. Try it.</span> },
    { n: "STEP 2 OF 5", t: <span>The ball fires <b>opposite</b> your drag — like a slingshot. Putt at the flag.</span> },
    { n: "STEP 3 OF 5", t: <span>Pull back <b>further</b> for more power. Whack one.</span> },
    { n: "STEP 4 OF 5", t: <span>Too fast and it <b>lips out</b>. Blast one straight at the hole.</span> },
    { n: "STEP 5 OF 5", t: <span>Dying pace drops. Roll it in <b>gently</b>.</span> },
  ];

  const onUpdate = React.useCallback(() => {}, []);
  const onSurveyFired = React.useCallback(() => {}, []);
  const onPhase = React.useCallback(() => {}, []);
  const onLip = React.useCallback(() => { lippedRef.current = true; }, []);

  const onBallStopped = React.useCallback(() => {
    const s = stepRef.current;
    if (s < 3) {
      setStep(s + 1);
    } else if (s === 3) {
      if (lippedRef.current) {
        setFlash("THAT'S A LIP OUT!");
        setTimeout(() => setFlash(null), 1600);
        setStep(4);
      } else {
        step3TriesRef.current++;
        if (step3TriesRef.current >= 2) setStep(4); // don't trap them here
      }
    }
    lippedRef.current = false;
  }, []);

  const onFinish = React.useCallback(() => {
    if (stepRef.current < 4) setNatural(true);
    setComplete(true);
  }, []);

  return (
    <div className="bb-app" data-screen-label="training">
      <header className="bb-header">
        <div className="bb-title">★ PUTTING SCHOOL ★</div>
        <div className="bb-header-btns">
          <button className="bb-icon-btn" onClick={onExit} aria-label="Exit training">×</button>
        </div>
      </header>

      <div className="bb-training-banner">
        <div className="bb-training-step">{flash ? "★" : STEPS[step].n}</div>
        <div className="bb-training-text">{flash ? <b>{flash}</b> : STEPS[step].t}</div>
      </div>

      <div className="bb-stage">
        <div className="bb-canvas-wrap">
          <GameCanvas
            defKey="training"
            def={def}
            palette={palette}
            intro={{ tag: "TRAINING", title: "PUTTING SCHOOL", sub: "5 QUICK LESSONS", color: "#8be88b" }}
            sound={sound}
            hintOn={step === 1 || step === 2}
            hardMode={false}
            surveyArmed={false}
            surveysLeft={0}
            initState={null}
            onUpdate={onUpdate}
            onSurveyFired={onSurveyFired}
            onBallStopped={onBallStopped}
            onFinish={onFinish}
            onPhase={onPhase}
            onLip={onLip}
          ></GameCanvas>

          {complete && (
            <div className="bb-overlay" data-screen-label="training-complete">
              <div className="bb-ov-tag">TRAINING</div>
              <div className="bb-ov-title bb-green">{natural ? "A NATURAL!" : "COMPLETE!"}</div>
              <div className="bb-ov-sub">Nice putting. Out there the green <b>lies</b> — your tracers are your map.</div>
              <button className="bb-btn" onClick={onExit}>PLAY TODAY'S HOLES ▶</button>
            </div>
          )}
        </div>
      </div>

      <div className="bb-instr">flat practice green · nothing counts here</div>
    </div>
  );
}

window.Training = Training;