// ActivityHost — wraps each activity with timer/attempts/intro UI.
// Activities receive { onWin(stars, message), onFail(message), difficulty, speed, theme, tweaks }
// Each activity must call onWin or onFail when finished.

const { useState: useState_AH, useEffect: useEffect_AH, useRef: useRef_AH, useMemo: useMemo_AH } = React;

function ActivityHost({ activity, theme, tweaks, onWin, onFail }) {
  const [seconds, setSeconds] = useState_AH(0);
  const [attempts, setAttempts] = useState_AH(getMaxAttempts(activity.kind, tweaks.difficulty));
  const [stage, setStage] = useState_AH("intro"); // intro | play
  const startedRef = useRef_AH(false);

  useEffect_AH(() => {
    if (stage !== "play") return;
    const t = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(t);
  }, [stage]);

  const recordMistake = () => {
    setAttempts(a => {
      const next = a - 1;
      if (next <= 0) {
        onFail("Se acabaron los intentos. ¡No te rindas!");
      }
      return Math.max(0, next);
    });
    window.SFX && window.SFX.wrong();
  };

  const finish = (correct, total) => {
    // Stars based on accuracy + attempts left + speed
    const accuracy = correct / total;
    let stars = 1;
    if (accuracy >= 0.7) stars = 2;
    if (accuracy >= 0.95 && attempts >= getMaxAttempts(activity.kind, tweaks.difficulty) - 1) stars = 3;
    const messages = [
      "Buen intento. Sigue practicando.",
      "¡Muy bien! Vas mejorando.",
      "¡Perfecto! Eres un genio matemático.",
    ];
    onWin(stars, messages[stars - 1]);
  };

  if (stage === "intro") {
    return (
      <ActivityIntro activity={activity} theme={theme} difficulty={tweaks.difficulty}
        onStart={() => setStage("play")} />
    );
  }

  const props = {
    theme, difficulty: tweaks.difficulty, speed: tweaks.speed, tweaks,
    onCorrect: () => { window.SFX && window.SFX.correct(); },
    onMistake: recordMistake,
    onFinish: finish,
    attemptsLeft: attempts,
  };

  return (
    <div className="ma-activity-wrap">
      <ActivityMeta seconds={seconds} attempts={attempts} maxAttempts={getMaxAttempts(activity.kind, tweaks.difficulty)} theme={theme} />
      <div className="ma-activity-body">
        {renderActivity(activity, props)}
      </div>
    </div>
  );
}

function getMaxAttempts(kind, difficulty) {
  if (kind === "memory") return 10;
  const base = { facil: 8, media: 5, dificil: 3 }[difficulty] || 5;
  return base;
}

function ActivityMeta({ seconds, attempts, maxAttempts, theme }) {
  const m = Math.floor(seconds/60), s = seconds%60;
  return (
    <div className="ma-activity-meta">
      <div className="ma-pill" style={{minWidth:80}}>⏱ {m}:{String(s).padStart(2,"0")}</div>
      <div className="ma-pill ma-pill-attempts">
        {Array.from({length: maxAttempts}).map((_,i)=>(
          <span key={i} style={{opacity: i<attempts?1:0.2, fontSize:14}}>❤</span>
        ))}
      </div>
    </div>
  );
}

function ActivityIntro({ activity, theme, difficulty, onStart }) {
  return (
    <div className="ma-intro">
      <div className="ma-intro-icon" style={{background: theme.primary, color: theme.primaryInk}}>{activity.icon}</div>
      <div className="ma-intro-type">{activity.type}</div>
      <div className="ma-intro-title">{activity.title}</div>
      <div className="ma-intro-desc">{activity.subtitle}</div>
      <div className="ma-intro-difficulty">Dificultad: <strong>{difficulty}</strong></div>
      <button className="ma-btn ma-btn-primary ma-btn-lg" onClick={() => { window.SFX && window.SFX.click(); onStart(); }}>
        Empezar ▶
      </button>
    </div>
  );
}

function renderActivity(activity, props) {
  const p = { ...props, data: activity.data || null };
  switch (activity.kind) {
    case "memory":     return <ActMemory {...p}/>;
    case "match":      return <ActMatch {...p}/>;
    case "order":      return <ActOrder {...p}/>;
    case "fill":       return <ActFill {...p}/>;
    case "wordsearch": return <ActWordSearch {...p}/>;
    case "crossword":  return <ActCrossword {...p}/>;
    case "puzzle":     return <ActPuzzle {...p}/>;
    case "answer":     return <ActAnswer {...p}/>;
    default: return <div>Actividad no encontrada</div>;
  }
}

window.ActivityHost = ActivityHost;