// Tutorial interactivo: configurar y usar la app Minute Data
const { useState: useTutState } = React;

const TUT_STEPS = [
  {
    title: "Instala la app",
    desc: "Busca «Minute Data» en el App Store o Google Play (o usa los botones de arriba) y tócala para instalar.",
    imgs: [{ src: "tutorial/01-install.jpg", label: "" }],
  },
  {
    title: "Crea tu cuenta",
    desc: "Abre la app, regístrate y verás la pantalla de bienvenida. Toca «Next» para continuar.",
    imgs: [{ src: "tutorial/02-welcome.jpg", label: "" }],
  },
  {
    title: "Mira cómo funciona",
    desc: "La app te lo resume: únete a una organización, graba, sube automáticamente por Wi-Fi y repite. Toca «Get Started».",
    imgs: [{ src: "tutorial/03-howitworks.jpg", label: "" }],
  },
  {
    title: "Ingresa el código de organización",
    desc: "El paso más importante: escribe 3JQTT5F4 cuando la app lo pida. Así tus horas se registran y se pagan.",
    imgs: [{ src: "tutorial/04-code.jpg", label: "" }],
  },
  {
    title: "Explora las categorías y tareas",
    desc: "Abre «Tasks» y filtra por categoría — orden, lavandería, cocina… Cada tarjeta es una tarea que puedes grabar.",
    imgs: [
      { src: "tutorial/05a-categories.jpg", label: "Categorías" },
      { src: "tutorial/05b-tasks.jpg", label: "Tareas" },
    ],
  },
  {
    title: "Lee la tarea y dale Start",
    desc: "Cada tarea muestra fotos de ejemplo y su descripción. Cuando estés listo —cinta puesta y teléfono horizontal— toca «Start».",
    imgs: [{ src: "tutorial/06-task.jpg", label: "" }],
  },
  {
    title: "Graba y detén",
    desc: "Haz la tarea completa a tu ritmo normal. Al terminar, toca «Stop Recording» — la sesión se sube sola por Wi-Fi.",
    imgs: [{ src: "tutorial/07-recording.jpg", label: "" }],
    landscape: true,
  },
];

function TutConfetti() {
  const pieces = React.useMemo(() =>
    Array.from({ length: 28 }, (_, i) => ({
      left: Math.random() * 100,
      delay: Math.random() * 0.5,
      dur: 1.8 + Math.random() * 1.4,
      color: ["#3e9b6b", "#d96e48", "#d9a23e", "#3e8e9b", "#9b6ed9"][i % 5],
      rot: Math.floor(Math.random() * 360),
      round: i % 4 === 0,
    })), []);
  return (
    <div className="confetti" aria-hidden="true">
      {pieces.map((p, i) => (
        <span
          key={i}
          className={p.round ? "round" : ""}
          style={{
            left: p.left + "%",
            background: p.color,
            animationDelay: p.delay + "s",
            animationDuration: p.dur + "s",
            transform: `rotate(${p.rot}deg)`,
          }}
        ></span>
      ))}
    </div>
  );
}

function AppTutorial() {
  const [step, setStep] = useTutState(0);
  const [imgIdx, setImgIdx] = useTutState(0);
  const s = TUT_STEPS[step];
  const img = s.imgs[Math.min(imgIdx, s.imgs.length - 1)];
  const goTo = (i) => { setStep(i); setImgIdx(0); };
  const isLast = step === TUT_STEPS.length - 1;
  return (
    <div className="card tut-card" data-comment-anchor="app-tutorial">
      <div className="tut-title">
        <span className="tut-count">Paso {step + 1} de {TUT_STEPS.length}</span>
        <h3>{s.title}</h3>
      </div>
      <div className="tut-main">
        {isLast ? <TutConfetti key={"confetti-" + step} /> : null}
        <div className={"tut-screen" + (s.landscape ? " landscape" : "")}>
          <img key={img.src} src={img.src} alt={s.title} />
          {s.imgs.length > 1 ? (
            <div className="tut-tabs">
              {s.imgs.map((im, i) => (
                <button key={im.src} className={"chip small" + (i === Math.min(imgIdx, s.imgs.length - 1) ? " on" : "")} onClick={() => setImgIdx(i)}>{im.label}</button>
              ))}
            </div>
          ) : null}
        </div>
        <div className="tut-dots" role="tablist" aria-label="Pasos del tutorial">
          {TUT_STEPS.map((t, i) => (
            <button
              key={i}
              className={"tut-dot" + (i === step ? " active" : "") + (i < step ? " done" : "")}
              onClick={() => goTo(i)}
              title={t.title}
              aria-label={"Paso " + (i + 1) + ": " + t.title}
            >
              {i < step ? "✓" : i + 1}
            </button>
          ))}
        </div>
      </div>
      <p className="tut-desc">{s.desc}</p>
      {isLast ? (
        <div className="tut-success">
          <strong>¡LISTO!</strong> La app se encarga del resto. ¡Bien hecho, felicidades! 🎉
        </div>
      ) : null}
      <div className="strap-nav tut-nav">
        <button className="btn ghost" disabled={step === 0} onClick={() => goTo(step - 1)}>Anterior</button>
        <button className="btn solid" disabled={step === TUT_STEPS.length - 1} onClick={() => goTo(step + 1)}>Siguiente</button>
      </div>
    </div>
  );
}

Object.assign(window, { AppTutorial });