/* ============================================================================
 * Kdrama by DSK — Interfaz (React)
 * Elegante y emotiva · i18n ES/EN · tema claro/oscuro · ruido ambiente.
 * ========================================================================== */
const { useState, useEffect, useRef, useCallback } = React;

const STORE_KEY = "kdrama-settings-v1";
const SAVED_KEY = "kdrama-saved-v1";
const DEFAULTS = {
  instrument: "piano", engineMode: "fm", sfzInstrument: null, octaveOffset: 0, mood: "romance", complexity: 4,
  temperature: 0.35, tempoScale: 1.0, reverb: 0.45, width: 0.35, delay: 0.0, lofi: 0.0,
  noiseType: "off", noiseVolume: 0.5, outputGain: 1.5,
  playbackMode: "songs", pianoRoll: true, padEnabled: false, padVolume: 0.5, padTimbre: "warm",
  gradualFade: true, theme: "dark", lang: null, // tema oscuro por defecto · lang null → autodetect
  // estado plegado de los paneles (luna creciente = plegado, llena = abierto)
  secInstrument: true, secMode: true, secAdvanced: false, secAmbient: false, secSleep: false,
};

function loadSettings() {
  try {
    const raw = localStorage.getItem(STORE_KEY);
    if (raw) return { ...DEFAULTS, ...JSON.parse(raw) };
  } catch (e) {}
  return { ...DEFAULTS };
}

/* ------------------------------------------------------ Nanas guardadas */
function loadSavedList() {
  try {
    const raw = localStorage.getItem(SAVED_KEY);
    if (raw) return JSON.parse(raw);
  } catch (e) {}
  return [];
}
function saveSavedList(list) {
  try { localStorage.setItem(SAVED_KEY, JSON.stringify(list)); } catch (e) {}
}

function applyTheme(theme) {
  const root = document.documentElement;
  if (theme === "light" || theme === "dark") root.dataset.theme = theme;
  else delete root.dataset.theme; // auto → lo decide @media
}

/* ---------------------------------------------------------------- ModalUI */
function ModalUI({ modal, onClose }) {
  const cardRef = useRef(null);
  useEffect(() => { if (modal && cardRef.current) cardRef.current.scrollTop = 0; }, [modal]);
  if (!modal) return null;
  return ReactDOM.createPortal(
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal-card" ref={cardRef}
        style={{ maxHeight: "calc(100dvh - 48px)", overflowY: "auto" }}
        onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        {modal.icon ? <div className="modal-icon">{modal.icon}</div> : null}
        <h3 className="modal-title">{modal.title}</h3>
        {modal.body ? <p className="modal-body">{modal.body}</p> : null}
        {modal.content ? <div className="modal-content">{modal.content}</div> : null}
        <div className="modal-actions">
          {(modal.actions || [{ label: modal.okLabel || "OK", primary: true, onClick: onClose }]).map((a, i) => (
            <button
              key={i}
              className={"btn " + (a.primary ? "btn-primary" : "btn-ghost")}
              onClick={() => { if (a.onClick) a.onClick(); if (a.close !== false) onClose(); }}
            >
              {a.label}
            </button>
          ))}
        </div>
      </div>
    </div>,
    document.body
  );
}

/* ------------------------------------------------------------- Iconografía */
const Moon = ({ s = 26 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true">
    <path d="M15.5 2.5a9 9 0 1 0 6 14.8A7.6 7.6 0 0 1 15.5 2.5Z" fill="currentColor" opacity="0.92" />
  </svg>
);
// Luna llena → panel ABIERTO · luna creciente → panel PLEGADO.
const MoonFull = ({ s = 20 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="12" cy="12" r="9" fill="currentColor" opacity="0.92" />
  </svg>
);
const MoonCrescent = ({ s = 20 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true">
    <path d="M15.5 2.5a9 9 0 1 0 6 14.8A7.6 7.6 0 0 1 15.5 2.5Z" fill="currentColor" opacity="0.92" />
  </svg>
);

/* ----------------------------------------------------- Sección plegable */
function Section({ title, open, onToggle, soft, children }) {
  return (
    <div className={"panel sec " + (soft ? "soft " : "") + (open ? "is-open" : "is-closed")}>
      <button className="sec-head" onClick={onToggle} aria-expanded={open}>
        <span className="block-label">{title}</span>
        <span className="sec-moon">{open ? <MoonFull /> : <MoonCrescent />}</span>
      </button>
      <div className={"sec-body " + (open ? "open" : "")}>
        <div className="sec-inner">{children}</div>
      </div>
    </div>
  );
}
const Play = ({ s = 30 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l11-6.5L8 5.5Z" fill="currentColor" /></svg>
);
const Pause = ({ s = 30 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true">
    <rect x="6.5" y="5.5" width="3.6" height="13" rx="1.2" fill="currentColor" />
    <rect x="13.9" y="5.5" width="3.6" height="13" rx="1.2" fill="currentColor" />
  </svg>
);
const Dot = ({ s = 14 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="7" fill="currentColor" /></svg>
);
const Gear = ({ s = 20 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="3.1" />
    <path d="M19.4 13.5a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1.08-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1.08 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
  </svg>
);
const Dice = ({ s = 20 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3.5" y="3.5" width="17" height="17" rx="4" />
    <circle cx="8.5" cy="8.5" r="1.1" fill="currentColor" stroke="none" />
    <circle cx="15.5" cy="8.5" r="1.1" fill="currentColor" stroke="none" />
    <circle cx="12" cy="12" r="1.1" fill="currentColor" stroke="none" />
    <circle cx="8.5" cy="15.5" r="1.1" fill="currentColor" stroke="none" />
    <circle cx="15.5" cy="15.5" r="1.1" fill="currentColor" stroke="none" />
  </svg>
);
const Bookmark = ({ s = 20 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M6.5 3.5h11a1 1 0 0 1 1 1V21l-6.5-4-6.5 4V4.5a1 1 0 0 1 1-1Z" />
  </svg>
);
const FolderIcon = ({ s = 20 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3.5 6.5a1 1 0 0 1 1-1h4.6l1.8 2h9.1a1 1 0 0 1 1 1v9.5a1 1 0 0 1-1 1h-15.5a1 1 0 0 1-1-1V6.5Z" />
  </svg>
);
const PencilIcon = ({ s = 18 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M4 20l.9-4.1L15.4 5.4a1.4 1.4 0 0 1 2 0l1.2 1.2a1.4 1.4 0 0 1 0 2L8.1 19.1 4 20Z" />
    <path d="M13.7 7.1l3.2 3.2" />
  </svg>
);
const TrashIcon = ({ s = 18 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M4.5 7h15" />
    <path d="M9.3 7V5.2A1.2 1.2 0 0 1 10.5 4h3A1.2 1.2 0 0 1 14.7 5.2V7" />
    <path d="M6.7 7l.75 12.1a1.3 1.3 0 0 0 1.3 1.2h6.6a1.3 1.3 0 0 0 1.3-1.2L17.3 7" />
    <path d="M10.2 10.7v6.2M13.8 10.7v6.2" />
  </svg>
);

/* --------------------------------------------------------- Segmented pick */
function Segmented({ options, value, onChange }) {
  return (
    <div className="segmented" role="tablist">
      {options.map((o) => (
        <button key={o.value} role="tab" aria-selected={value === o.value}
          className={"seg " + (value === o.value ? "seg-on" : "")} onClick={() => onChange(o.value)}>
          {o.label}
          {o.sub ? <span className="seg-sub">{o.sub}</span> : null}
        </button>
      ))}
    </div>
  );
}

/* --------------------------------------------------------------- Slider UI */
// Doble clic/doble tap en la etiqueta restablece el valor por defecto.
function Slider({ label, valueLabel, min, max, step, value, onChange, leftCap, rightCap, defaultValue }) {
  const pct = ((value - min) / (max - min)) * 100;
  const reset = defaultValue != null ? () => onChange(defaultValue) : undefined;
  return (
    <div className="ctrl">
      <div className="ctrl-head">
        <span className="ctrl-label" onDoubleClick={reset}>{label}</span>
        <span className="ctrl-value">{valueLabel}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(parseFloat(e.target.value))} style={{ "--pct": pct + "%" }} />
      {(leftCap || rightCap) && (<div className="ctrl-caps"><span>{leftCap}</span><span>{rightCap}</span></div>)}
    </div>
  );
}

/* --------------------------------------------------------------- Toggle UI */
// Doble clic/doble tap en la etiqueta restablece el valor por defecto.
function Toggle({ label, sub, checked, onChange, defaultChecked }) {
  const reset = defaultChecked != null ? (e) => { e.stopPropagation(); onChange(defaultChecked); } : undefined;
  return (
    <button className="toggle-row" role="switch" aria-checked={checked} onClick={() => onChange(!checked)}>
      <span className="toggle-text">
        <span className="toggle-label" onClick={(e) => reset && e.stopPropagation()} onDoubleClick={reset}>{label}</span>
        {sub ? <span className="toggle-sub">{sub}</span> : null}
      </span>
      <span className={"switch " + (checked ? "on" : "")}><span className="knob" /></span>
    </button>
  );
}

/* --------------------------------------------------------- Orbe / visual */
function Orb({ active, playing, levelRef, onToggle }) {
  const ref = useRef(null);
  const glowRef = useRef(null);
  useEffect(() => {
    let raf;
    const loop = () => {
      const lvl = levelRef.current || 0;
      const scale = 1 + lvl * 0.34;
      if (ref.current) ref.current.style.transform = `scale(${scale.toFixed(3)})`;
      if (glowRef.current) glowRef.current.style.opacity = (0.45 + lvl * 0.55).toFixed(3);
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  return (
      <div className={"orb-wrap " + (active ? "is-playing" : "")}
        onClick={onToggle} role="button" tabIndex={0}
        aria-label="play/pause" style={{ cursor: "pointer" }}>
        <div className="orb-glow" ref={glowRef} />
        <div className="orb" ref={ref}><div className="orb-core" /></div>
        <div className="orb-toggle" aria-hidden="true">
          {playing ? <Pause s={34} /> : <Play s={34} />}
        </div>
      </div>
    );
  }

function fmtTime(s) {
  const m = Math.floor(s / 60), ss = Math.floor(s % 60);
  return `${m}:${ss.toString().padStart(2, "0")}`;
}

// Nombre visible de un instrumento SFZ en el idioma activo. "name" en el
// manifest puede ser un string simple (mismo nombre en todos los idiomas)
// o un objeto { es, en, ... } con una traducción por idioma.
function sfzName(entry, lang) {
  if (!entry) return "";
  const n = entry.name;
  if (n && typeof n === "object") return n[lang] || n.es || n.en || Object.values(n)[0] || entry.id;
  return n || entry.id;
}

function tsName() {
  const d = new Date(), p = (n) => String(n).padStart(2, "0");
  return `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}_${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}`;
}

/* --------------------------------------------------------- Piano roll */
/* Notas cayendo hacia una línea horizontal: por encima, lo que está por
 * sonar; al cruzar la línea, suenan; por debajo, se apagan enseguida.
 * Lee directamente synth.getVisNotes()/getVisNow(), sin estado propio. */
function PianoRoll({ synth, active }) {
  const canvasRef = useRef(null);
  useEffect(() => {
    if (!active || !synth) return;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    let raf, w = 0, h = 0, dpr = Math.min(2, window.devicePixelRatio || 1);
    const WINDOW_SEC = 4.2, PAST_SEC = 0.45;
    const COLORS = { melody: [255, 214, 150], chord: [150, 195, 255], bass: [190, 160, 255] };

    const resize = () => {
      const rect = canvas.getBoundingClientRect();
      if (rect.width < 2 || rect.height < 2) return;
      w = rect.width; h = rect.height;
      canvas.width = Math.max(1, Math.round(w * dpr));
      canvas.height = Math.max(1, Math.round(h * dpr));
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);
    resize();

    const isDark = () => {
      const th = document.documentElement.dataset.theme;
      if (th === "dark") return true;
      if (th === "light") return false;
      return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
    };

    const draw = () => {
      raf = requestAnimationFrame(draw);
      if (w < 2 || h < 2) return;
      ctx.clearRect(0, 0, w, h);
      const lineY = h * 0.8;
      const notes = synth.getVisNotes();
      const now = synth.getVisNow();
      if (notes.length) {
        let lo = 200, hi = -1;
        for (const n of notes) { if (n.note < lo) lo = n.note; if (n.note > hi) hi = n.note; }
        if (hi >= lo) {
          lo -= 2; hi += 2;
          const span = Math.max(1, hi - lo);
          const yOf = (dt) => (dt >= 0
            ? lineY * (1 - dt / WINDOW_SEC)
            : lineY + (h - lineY) * Math.min(1, -dt / PAST_SEC));
          for (const n of notes) {
            const dtBottom = n.start - now;
            const dtTop = dtBottom + n.dur;
            if (dtBottom > WINDOW_SEC || dtTop < -PAST_SEC) continue;
            const yTop = yOf(Math.min(WINDOW_SEC, dtTop));
            const yBottom = yOf(Math.max(-PAST_SEC, dtBottom));
            const alpha = dtBottom < 0 ? Math.max(0, 1 + dtBottom / PAST_SEC) : 1;
            const x = ((n.note - lo) / span) * (w - 14) + 7;
            const rw = n.track === "melody" ? 8 : 5;
            const col = COLORS[n.track] || COLORS.melody;
            ctx.fillStyle = `rgba(${col[0]},${col[1]},${col[2]},${(0.85 * alpha).toFixed(3)})`;
            const rh = Math.max(4, yBottom - yTop);
            ctx.beginPath();
            if (ctx.roundRect) ctx.roundRect(x - rw / 2, yTop, rw, rh, Math.min(3, rw / 2));
            else ctx.rect(x - rw / 2, yTop, rw, rh);
            ctx.fill();
          }
        }
      }
      ctx.strokeStyle = isDark() ? "rgba(255,255,255,0.22)" : "rgba(50,40,80,0.22)";
      ctx.lineWidth = 1;
      ctx.beginPath(); ctx.moveTo(0, lineY); ctx.lineTo(w, lineY); ctx.stroke();
    };
    raf = requestAnimationFrame(draw);
    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
  }, [active, synth]);

  if (!active) return null;
  return <canvas ref={canvasRef} className="piano-roll" aria-hidden="true" />;
}

/* --------------------------------------------------- Atardecer con pétalos */
/* Canvas animado de fondo: un atardecer cálido con pétalos de cerezo que
 * caen y se mecen suavemente. Se regenera al redimensionar y persiste al
 * plegar/expandir paneles. Los paneles son opacos, así que el cielo solo
 * asoma en los huecos — nunca tras los botones. */
function drawPetal(ctx, x, y, size, angle, hue, light, alpha) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle);
  const s = size;
  const g = ctx.createLinearGradient(0, -s, 0, s);
  g.addColorStop(0, `hsla(${hue}, 75%, ${Math.round(light * 88)}%, ${alpha})`);
  g.addColorStop(1, `hsla(${hue}, 65%, ${Math.round(light * 70)}%, ${alpha * 0.9})`);
  ctx.fillStyle = g;
  ctx.beginPath();
  // Pétalo de cerezo: lágrima ancha con una pequeña muesca en la punta.
  ctx.moveTo(0, -s);
  ctx.bezierCurveTo(s * 0.18, -s * 0.85, s * 0.8, -s * 0.7, s * 0.85, -s * 0.08);
  ctx.quadraticCurveTo(s * 0.9, s * 0.45, s * 0.45, s * 0.8);
  ctx.quadraticCurveTo(0, s * 1.05, -s * 0.45, s * 0.8);
  ctx.quadraticCurveTo(-s * 0.9, s * 0.45, -s * 0.85, -s * 0.08);
  ctx.bezierCurveTo(-s * 0.8, -s * 0.7, -s * 0.18, -s * 0.85, 0, -s);
  ctx.fill();
  ctx.restore();
}

function SkyCanvas() {
  const canvasRef = useRef(null);
  const petalsRef = useRef([]); // persisten entre redimensionados (no se regeneran al plegar)
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    let raf, w = 0, h = 0, dpr = Math.min(2, window.devicePixelRatio || 1);
    let t0 = performance.now();

    // Pétalos en coordenadas NORMALIZADAS (0..1): sobreviven a cualquier
    // cambio de tamaño, así que plegar/expandir no los borra ni reinicia.
    const genPetals = (count) => {
      const arr = [];
      for (let i = 0; i < count; i++) {
        arr.push({
          nx: Math.random(), ny: Math.random(),
          size: 3 + Math.random() * 4.5,          // px
          fall: 0.012 + Math.random() * 0.028,    // velocidad de caída (norm./s)
          sway: 0.5 + Math.random() * 1.2,        // amplitud de balanceo
          swaySpeed: 0.4 + Math.random() * 0.9,
          phase: Math.random() * Math.PI * 2,
          spin: (Math.random() - 0.5) * 2.2,      // rotación (rad/s)
          angle: Math.random() * Math.PI * 2,
          hue: 332 + Math.random() * 22,          // rosa (cerezo)
          light: 0.68 + Math.random() * 0.28,
          alpha: 0.45 + Math.random() * 0.45,
        });
      }
      return arr;
    };

    const resize = () => {
      const rect = canvas.getBoundingClientRect();
      const nw = rect.width, nh = rect.height;
      if (nw < 2 || nh < 2) return;             // ignora medidas degeneradas
      // Evita re-escalar el lienzo por cambios sub-pixel (suaviza el plegado).
      if (Math.abs(nw - w) < 1 && Math.abs(nh - h) < 1 && petalsRef.current.length) return;
      w = nw; h = nh;
      canvas.width = Math.max(1, Math.round(w * dpr));
      canvas.height = Math.max(1, Math.round(h * dpr));
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      const target = Math.max(12, Math.round((w * h) / 11000));
      // Solo (re)genera si no hay pétalos o el área cambió mucho (no al plegar).
      if (!petalsRef.current.length || Math.abs(petalsRef.current.length - target) > target * 0.6) {
        petalsRef.current = genPetals(target);
      }
    };

    const draw = (now) => {
      const dt = Math.min(0.05, (now - t0) / 1000); t0 = now;
      raf = requestAnimationFrame(draw);       // sigue vivo pase lo que pase
      if (w < 2 || h < 2) return;              // sin tamaño válido: no borra nada
      ctx.clearRect(0, 0, w, h);

      // Pétalos cayendo.
      for (const p of petalsRef.current) {
        p.ny += p.fall * dt;
        p.phase += p.swaySpeed * dt;
        p.angle += p.spin * dt;
        if (p.ny > 1.06) { p.ny = -0.06; p.nx = Math.random(); }
        const x = (p.nx + Math.sin(p.phase) * 0.035) * w;
        const y = p.ny * h;
        drawPetal(ctx, x, y, p.size, p.angle, p.hue, p.light, p.alpha);
      }
    };

    resize();
    // ResizeObserver con debounce por rAF: una sola medición por frame durante
    // la animación de plegado → transición fluida, sin tirones.
    let roScheduled = false;
    const ro = new ResizeObserver(() => {
      if (roScheduled) return;
      roScheduled = true;
      requestAnimationFrame(() => { roScheduled = false; resize(); });
    });
    ro.observe(canvas);
    raf = requestAnimationFrame(draw);
    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
  }, []);
  return <canvas ref={canvasRef} className="sky-canvas" aria-hidden="true" />;
}

/* --------------------------------------------------------------------- App */
function App() {
  const engineRef = useRef(null);
  const synthRef = useRef(null);
  const levelRef = useRef(0);
  if (!engineRef.current) {
    engineRef.current = new LullabyEngine();
    synthRef.current = new SynthEngine(engineRef.current);
  }

  const init0 = useRef(loadSettings()).current;
  const [lang, setLang] = useState(init0.lang || window.I18N.detect());
  const [theme, setTheme] = useState(init0.theme);
  const [instrument, setInstrument] = useState(init0.instrument);
  const [engineMode, setEngineMode] = useState(init0.engineMode);
  const [sfzInstrument, setSfzInstrument] = useState(init0.sfzInstrument);
  const [sfzList, setSfzList] = useState([]);
  const [octaveOffset, setOctaveOffset] = useState(init0.octaveOffset);
  const [mood, setMood] = useState(init0.mood);
  const [complexity, setComplexity] = useState(init0.complexity);
  const [temperature, setTemperature] = useState(init0.temperature);
  const [tempoScale, setTempoScale] = useState(init0.tempoScale);
  const [reverb, setReverb] = useState(init0.reverb);
  const [width, setWidth] = useState(init0.width);
  const [delay, setDelay] = useState(init0.delay);
  const [lofi, setLofi] = useState(init0.lofi);
  const [noiseType, setNoiseType] = useState(init0.noiseType);
  const [noiseVolume, setNoiseVolume] = useState(init0.noiseVolume);
  const [outputGain, setOutputGain] = useState(init0.outputGain);
  const [gradualFade, setGradualFade] = useState(init0.gradualFade);
  const [playbackMode, setPlaybackMode] = useState(init0.playbackMode);
  const [pianoRoll, setPianoRoll] = useState(init0.pianoRoll);
  const [padEnabled, setPadEnabled] = useState(init0.padEnabled);
  const [padVolume, setPadVolume] = useState(init0.padVolume);
  const [padTimbre, setPadTimbre] = useState(init0.padTimbre);
  const [songTick, setSongTick] = useState(0); // fuerza repintado al rotar el modo (Mix/nanas)
  const [heldMode, setHeldMode] = useState(null); // modo con pulsación larga en curso
  const holdRef = useRef({ timer: null, fired: false });
  const [screensaver, setScreensaver] = useState(false); // modo salvapantallas (cielo a pantalla completa)
  const brandHold = useRef(null);
  const wakeRef = useRef(null);
  const ssEnterRef = useRef(0); // momento de entrada al salvapantallas (anti-toque-fantasma)
  const cxRegenRef = useRef(null); // debounce: regenerar nana al cambiar complejidad

  // Paneles plegables (luna llena = abierto, creciente = plegado)
  const [secInstrument, setSecInstrument] = useState(init0.secInstrument);
  const [secMode, setSecMode] = useState(init0.secMode);
  const [secAdvanced, setSecAdvanced] = useState(init0.secAdvanced);
  const [secAmbient, setSecAmbient] = useState(init0.secAmbient);
  const [secSleep, setSecSleep] = useState(init0.secSleep);

  const [playing, setPlaying] = useState(false);
  const [timerMin, setTimerMin] = useState(null);
  const [timeLeft, setTimeLeft] = useState(0);
  const [recording, setRecording] = useState(false);
  const [recDur, setRecDur] = useState(60);
  const [modal, setModal] = useState(null);

  const t = useCallback((k) => window.I18N.t(lang, k), [lang]);
  const closeModal = useCallback(() => setModal(null), []);

  /* aplicar tema + idioma al documento */
  useEffect(() => { applyTheme(theme); }, [theme]);
  useEffect(() => { document.documentElement.lang = lang; }, [lang]);

  /* persistencia */
  useEffect(() => {
    const data = { instrument, engineMode, sfzInstrument, octaveOffset, mood, complexity, temperature, tempoScale, reverb, width, delay, lofi, noiseType, noiseVolume, outputGain, playbackMode, pianoRoll, padEnabled, padVolume, padTimbre, gradualFade, theme, lang, secInstrument, secMode, secAdvanced, secAmbient, secSleep };
    try { localStorage.setItem(STORE_KEY, JSON.stringify(data)); } catch (e) {}
  }, [instrument, engineMode, sfzInstrument, octaveOffset, mood, complexity, temperature, tempoScale, reverb, width, delay, lofi, noiseType, noiseVolume, outputGain, playbackMode, pianoRoll, padEnabled, padVolume, padTimbre, gradualFade, theme, lang, secInstrument, secMode, secAdvanced, secAmbient, secSleep]);

  /* sincronizar con motores */
  useEffect(() => { synthRef.current.setInstrument(instrument); }, [instrument]);
  useEffect(() => { synthRef.current.setEngineMode(engineMode); }, [engineMode]);
  useEffect(() => { synthRef.current.setOctaveOffset(octaveOffset); }, [octaveOffset]);
  // Carga el índice de instrumentos SFZ (assets/sfz/manifest.json) la primera
  // vez que se entra en modo SFZ. Si no hay ninguno elegido todavía, se
  // preselecciona el primero de la lista.
  useEffect(() => {
    if (engineMode !== "sfz") return;
    let alive = true;
    synthRef.current.loadSfzManifest().then((list) => {
      if (!alive) return;
      setSfzList(list);
      setSfzInstrument((cur) => cur || (list[0] && list[0].id) || null);
    });
    return () => { alive = false; };
  }, [engineMode]);
  useEffect(() => {
    if (engineMode === "sfz" && sfzInstrument) synthRef.current.setSfzInstrument(sfzInstrument);
  }, [engineMode, sfzInstrument]);
  // Sincroniza el modo guardado UNA vez al arrancar. Los cambios posteriores
  // los gestiona pickMode (que siempre genera una nana nueva).
  useEffect(() => { engineRef.current.setMood(mood); }, []);
  // La complejidad afecta a la COMPOSICIÓN. En continuo se nota al vuelo; en
  // modo canción regenera la nana (con debounce para no rehacerla en cada paso).
  useEffect(() => {
    engineRef.current.setComplexity(complexity);
    if (playing && playbackMode === "songs") {
      clearTimeout(cxRegenRef.current);
      cxRegenRef.current = setTimeout(() => synthRef.current.restartSong(), 450);
    }
  }, [complexity]);
  useEffect(() => { synthRef.current.setTemperature(temperature); }, [temperature]);
  useEffect(() => { synthRef.current.setTempoScale(tempoScale); }, [tempoScale]);
  useEffect(() => { synthRef.current.setReverb(reverb); }, [reverb]);
  useEffect(() => { synthRef.current.setWidth(width); }, [width]);
  useEffect(() => { synthRef.current.setDelay(delay); }, [delay]);
  useEffect(() => { synthRef.current.setLofi(lofi); }, [lofi]);
  useEffect(() => { synthRef.current.setNoiseVolume(noiseVolume); }, [noiseVolume]);
  useEffect(() => { synthRef.current.setOutputGain(outputGain); }, [outputGain]);
  useEffect(() => { synthRef.current.setPlaybackMode(playbackMode); }, [playbackMode]);
  useEffect(() => { synthRef.current.setPadEnabled(padEnabled); }, [padEnabled]);
  useEffect(() => { synthRef.current.setPadVolume(padVolume); }, [padVolume]);
  useEffect(() => { synthRef.current.setPadTimbre(padTimbre); }, [padTimbre]);

  /* la rotación de modo (Mix / fin de nana) avisa por callback → repinta */
  useEffect(() => { synthRef.current.onShuffle = () => setSongTick((x) => x + 1); }, []);

  /* visualizador */
  useEffect(() => {
    let raf;
    const loop = () => {
      const active = playing || noiseType !== "off";
      levelRef.current = active ? synthRef.current.getLevel() : levelRef.current * 0.9;
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [playing, noiseType]);

  /* cuenta atrás del sleep timer */
  useEffect(() => {
    if (!timerMin || !playing) return;
    let left = timerMin * 60; setTimeLeft(left);
    const id = setInterval(() => { left -= 1; setTimeLeft(left); if (left <= 0) clearInterval(id); }, 1000);
    return () => clearInterval(id);
  }, [timerMin, playing]);

  /* Pista visual al cargar: micro-scroll de ida y vuelta para que el usuario
   * descubra que hay más opciones debajo del pliegue. */
  const ctrlRef = useRef({});
  useEffect(() => {
    const scroller = document.scrollingElement || document.documentElement;
    const t1 = setTimeout(() => {
      try {
        scroller.scrollTo({ top: 96, behavior: "smooth" });
        setTimeout(() => scroller.scrollTo({ top: 0, behavior: "smooth" }), 650);
      } catch (e) {}
    }, 700);
    // Puente para que la notificación nativa de Android controle la app.
    window.KdramaControls = {
      toggle: () => ctrlRef.current.toggle && ctrlRef.current.toggle(),
      setTimer: (m) => ctrlRef.current.setTimer && ctrlRef.current.setTimer(m),
    };
    return () => clearTimeout(t1);
  }, []);

  /* Empuja el estado a la notificación persistente de Android (si existe). */
  useEffect(() => {
    const m = window.AndroidMedia;
    if (!m || !m.update) return;
    const am = mood === "mix" ? engineRef.current.activeMood() : mood;
    const sfzEntry = engineMode === "sfz" ? sfzList.find((e) => e.id === sfzInstrument) : null;
    const instName = engineMode === "sfz" ? sfzName(sfzEntry, lang) : window.I18N.t(lang, "inst_" + instrument);
    const title = playing ? instName + " · " + window.I18N.t(lang, am) : "Kdrama by DSK";
    try {
      m.update(JSON.stringify({
        playing, title,
        timerActive: !!(timerMin && playing),
        timeLeft: timerMin && playing ? timeLeft : 0,
      }));
    } catch (e) {}
  }, [playing, timerMin, timeLeft, instrument, engineMode, sfzInstrument, sfzList, mood, lang, songTick]);

  const togglePlay = () => {
    const s = synthRef.current;
    if (playing) { s.stop(); setPlaying(false); setTimerMin(null); }
    else {
      s.start(); s.setTemperature(temperature); s.setReverb(reverb);
      setPlaying(true);
      if (timerMin) s.setSleepTimer(timerMin, handleTimerEnd, gradualFade);
    }
  };

  const handleTimerEnd = () => {
    setPlaying(false); setTimerMin(null); setTimeLeft(0);
    setModal({ icon: <Moon s={30} />, title: t("done_title"), body: t("done_body"), okLabel: t("close") });
  };

  const pickTimer = (min) => {
    if (timerMin === min) { setTimerMin(null); setTimeLeft(0); synthRef.current.clearSleepTimer(); return; }
    setTimerMin(min);
    if (playing) synthRef.current.setSleepTimer(min, handleTimerEnd, gradualFade);
  };

  const toggleGradual = (v) => {
    setGradualFade(v);
    if (playing && timerMin) synthRef.current.setSleepTimer(timerMin, handleTimerEnd, v);
  };

  /* ---- Modo: CUALQUIER pulsación (mismo o distinto modo) genera nana nueva ---- */
  const pickMode = (value) => {
    setMood(value);
    engineRef.current.setMood(value);   // reinicia el motor → material nuevo
    if (playing) {
      if (playbackMode === "songs") synthRef.current.restartSong();
      else synthRef.current.smoothModeTransition(); // disimula el salto en flujo continuo
    }
    setSongTick((x) => x + 1);
  };

  /* ---- Pulsación larga (≥2 s) sobre un modo → guardar MIDI de la canción ----
   * Tap corto = seleccionar/rebarajar. Mantener pulsado = exportar MIDI de lo
   * que suena (continuo: últimos 2 min · canciones: la nana entera al acabar). */
  const onModeDown = (value) => () => {
    holdRef.current.fired = false;
    setHeldMode(value);
    holdRef.current.timer = setTimeout(() => {
      holdRef.current.fired = true;
      holdRef.current.timer = null;
      setHeldMode(null);
      triggerMidiSave();
    }, 2000);
  };
  const onModeUp = (value) => () => {
    if (holdRef.current.timer) { clearTimeout(holdRef.current.timer); holdRef.current.timer = null; }
    setHeldMode(null);
    if (!holdRef.current.fired) pickMode(value); // fue un tap corto
    holdRef.current.fired = false;
  };
  const onModeCancel = () => {
    if (holdRef.current.timer) { clearTimeout(holdRef.current.timer); holdRef.current.timer = null; }
    setHeldMode(null);
    holdRef.current.fired = false;
  };

  /* ---- Modo salvapantallas: mantener pulsado el nombre 2 s → solo el cielo ---- */
  const enterScreensaver = () => {
    setScreensaver(true);
    ssEnterRef.current = Date.now();
    // Mantén la pantalla encendida mientras dure (si el navegador lo permite).
    try {
      if (navigator.wakeLock && navigator.wakeLock.request) {
        navigator.wakeLock.request("screen").then((wl) => { wakeRef.current = wl; }).catch(() => {});
      }
    } catch (e) {}
  };
  const exitScreensaver = (e) => {
    if (e) { e.stopPropagation(); e.preventDefault(); }
    // Ignora el propio gesto de entrada (no salir nada más aparecer).
    if (Date.now() - ssEnterRef.current < 500) return;
    setScreensaver(false);
    try { if (wakeRef.current) { wakeRef.current.release(); wakeRef.current = null; } } catch (e2) {}
  };
  const onBrandDown = () => {
    if (brandHold.current) clearTimeout(brandHold.current);
    brandHold.current = setTimeout(() => { brandHold.current = null; enterScreensaver(); }, 2000);
  };
  const onBrandUp = () => {
    if (brandHold.current) { clearTimeout(brandHold.current); brandHold.current = null; }
  };

  const triggerMidiSave = () => {
    const status = synthRef.current.saveCurrentMidi((blob) => { if (blob) offerMidiDownload(blob); });
    if (status === null) {
      setModal({ icon: <Moon s={30} />, title: t("midi_title"), body: t("midi_need_play"), okLabel: t("close") });
    }
    // status "ready" → offerMidiDownload ya abre el modal de guardado.
  };

  const offerMidiDownload = (blob) => {
    const name = `kdrama_bydsk_${tsName()}.mid`;
    const dl = window.AndroidDownloader;
    if (dl && (dl.saveMidiFile || dl.saveBase64File || dl.saveFile)) {
      const reader = new FileReader();
      reader.onloadend = () => {
        try {
          if (dl.saveMidiFile) dl.saveMidiFile(reader.result);
          else if (dl.saveBase64File) dl.saveBase64File(reader.result, name, "audio/midi");
          else if (dl.saveFile) dl.saveFile(reader.result, name);
        } catch (e) {}
      };
      reader.readAsDataURL(blob);
      setModal({ icon: <Moon s={30} />, title: t("midi_saved_title"), body: t("midi_saved_body"),
        actions: [{ label: t("ok"), onClick: closeModal }] });
      return;
    }
    const url = URL.createObjectURL(blob);
    setModal({
      icon: <Moon s={30} />, title: t("midi_saved_title"), body: t("midi_saved_body"),
      content: <a className="btn btn-primary dl-btn" href={url} download={name}>{t("midi_download")}</a>,
      actions: [{ label: t("close"), onClick: closeModal }],
    });
  };

  /* ---- Guardar / abrir nanas ---- */
  const openSaveModal = () => {
    if (!synthRef.current.hasSongToSave()) {
      setModal({ icon: <Bookmark s={26} />, title: t("save_title"), body: t("save_need_song"), okLabel: t("close") });
      return;
    }
    const defaultName = `${t(mood === "mix" ? "mix" : mood)} · ${tsName()}`;
    setModal({
      icon: <Bookmark s={26} />, title: t("save_title"),
      content: <SaveSetup t={t} defaultName={defaultName} onSave={(name) => { closeModal(); doSaveSong(name); }} />,
      actions: [{ label: t("cancel"), onClick: closeModal }],
    });
  };
  const doSaveSong = (name) => {
    const snap = synthRef.current.exportSongSnapshot();
    if (!snap) return;
    const entry = {
      id: Date.now().toString(36) + Math.random().toString(36).slice(2, 7),
      name: (name && name.trim()) || `${t(mood === "mix" ? "mix" : mood)} · ${tsName()}`,
      ts: Date.now(),
      snapshot: snap,
    };
    const list = loadSavedList();
    list.unshift(entry);
    saveSavedList(list);
    setModal({ icon: <Bookmark s={26} />, title: t("save_done_title"), body: t("save_done_body"), okLabel: t("ok") });
  };
  const openSavedList = () => {
    setModal({
      icon: <FolderIcon s={24} />, title: t("saved_list_title"),
      content: <SavedList t={t} onPlay={playSavedEntry} onAskDelete={confirmDeleteSaved} onRename={openRenameModal} />,
      actions: [{ label: t("close"), onClick: closeModal }],
    });
  };
  const renameSaved = (id, name) => {
    const list = loadSavedList();
    const idx = list.findIndex((e) => e.id === id);
    if (idx === -1) return;
    const trimmed = (name || "").trim();
    if (trimmed) list[idx] = { ...list[idx], name: trimmed };
    saveSavedList(list);
  };
  const openRenameModal = (entry) => {
    setModal({
      icon: <Bookmark s={26} />, title: t("saved_rename_title"),
      content: <SaveSetup t={t} defaultName={entry.name} onSave={(name) => { renameSaved(entry.id, name); openSavedList(); }} />,
      actions: [{ label: t("cancel"), onClick: openSavedList }],
    });
  };
  const confirmDeleteSaved = (id) => {
    setModal({
      icon: <FolderIcon s={24} />, title: t("saved_delete_confirm_title"), body: t("saved_delete_confirm_body"),
      actions: [
        { label: t("cancel"), onClick: openSavedList, close: false },
        {
          label: t("saved_delete_yes"), primary: true, close: false,
          onClick: () => { saveSavedList(loadSavedList().filter((e) => e.id !== id)); openSavedList(); },
        },
      ],
    });
  };
  const playSavedEntry = (entry) => {
    closeModal();
    const snap = entry.snapshot;
    const s = synthRef.current;
    if (playbackMode !== "songs") { setPlaybackMode("songs"); s.setPlaybackMode("songs"); }
    const wasPlaying = playing;
    s.loadSongSnapshot(snap);
    if (snap.instrument) setInstrument(snap.instrument);
    if (snap.engineMode) setEngineMode(snap.engineMode);
    if (snap.sfzInstrument) setSfzInstrument(snap.sfzInstrument);
    if (snap.octaveOffset != null) setOctaveOffset(snap.octaveOffset);
    if (snap.temperature != null) setTemperature(snap.temperature);
    if (snap.tempoScale != null) setTempoScale(snap.tempoScale);
    if (snap.reverb != null) setReverb(snap.reverb);
    if (snap.width != null) setWidth(snap.width);
    if (snap.delayAmt != null) setDelay(snap.delayAmt);
    if (snap.lofi != null) setLofi(snap.lofi);
    if (snap.padEnabled != null) setPadEnabled(snap.padEnabled);
    if (snap.padVolume != null) setPadVolume(snap.padVolume);
    if (snap.padTimbre != null) setPadTimbre(snap.padTimbre);
    if (!wasPlaying) {
      s.start(); setPlaying(true);
      if (timerMin) s.setSleepTimer(timerMin, handleTimerEnd, gradualFade);
    }
  };

  /* ---- Ruido ambiente ---- */
  const pickNoise = (type) => {
    const next = noiseType === type ? "off" : type;
    setNoiseType(next);
    synthRef.current.setNoiseType(next);
    synthRef.current.setNoiseVolume(noiseVolume);
  };

  /* ---- Grabación ---- */
  const openRecordModal = () => {
    if (recording) return;
    setModal({
      icon: <Dot s={26} />, title: t("rec_title"),
      content: <RecordSetup t={t} recDur={recDur} setRecDur={setRecDur}
        onStart={(dur) => { closeModal(); beginRecording(dur); }} />,
      actions: [{ label: t("cancel"), onClick: closeModal }],
    });
  };
  const beginRecording = (dur) => {
    const s = synthRef.current;
    if (!playing) { s.start(); s.setTemperature(temperature); s.setReverb(reverb); setPlaying(true); }
    setRecording(true);
    s.startRecording(dur, (blob) => { setRecording(false); if (blob) offerDownload(blob); });
  };
  const stopRecordingNow = () => {
    const blob = synthRef.current.stopRecording();
    setRecording(false);
    if (blob) offerDownload(blob);
  };
  const offerDownload = (blob) => {
      const ext = synthRef.current.lastExt || "wav";
      // App Android (WebView): guardar directo en Descargas con el bridge nativo.
      const dl = window.AndroidDownloader;
      if (dl && (dl.saveMp3File || dl.saveWavFile)) {
        const reader = new FileReader();
        reader.onloadend = () => {
          try {
            if (ext === "mp3" && dl.saveMp3File) dl.saveMp3File(reader.result);
            else if (dl.saveWavFile) dl.saveWavFile(reader.result);
            else if (dl.saveMp3File) dl.saveMp3File(reader.result);
          } catch (e) {}
        };
        reader.readAsDataURL(blob); // data:audio/...;base64,XXXX  (el bridge corta tras la coma)
        setModal({
          icon: <Dot s={26} />, title: t("saved_title"),
          body: t("saved_body") + (ext === "wav" ? " (.wav)" : " (.mp3)"),
          actions: [{ label: t("ok"), onClick: closeModal }],
        });
        return;
      }
      // Navegador web: descarga clásica.
      const url = URL.createObjectURL(blob);
      const name = `kdrama_bydsk_${tsName()}.${ext}`;
      setModal({
        icon: <Dot s={26} />, title: t("saved_title"),
        body: t("saved_body") + (ext === "wav" ? " (.wav)" : " (.mp3)"),
        content: <a className="btn btn-primary dl-btn" href={url} download={name}>{t("download")} .{ext}</a>,
        actions: [{ label: t("close"), onClick: closeModal }],
      });
    };

  /* ---- Aleatorio coherente: nueva atmósfera de un toque ---- */
  const randomize = () => {
    const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
    const rng = (a, b) => a + Math.random() * (b - a);

    const ins = pick(synthRef.current.instrumentOrder);
    const md = pick(["hope", "romance", "sad", "drama"]);
    // Complejidad sesgada hacia lo tranquilo (nanas): 2..7 con peso bajo.
    const cx = Math.round(rng(2, 7));
    // Temperatura y reverb correlacionadas: cuanto más "dormido", más envolvente.
    const tp = +rng(0.2, 0.8).toFixed(2);
    const rv = +Math.min(0.85, Math.max(0.15, (1 - tp) * 0.7 + rng(-0.1, 0.1))).toFixed(2);
    const ts = +rng(0.82, 1.05).toFixed(2);     // tempo sutil
    const wd = +rng(0.2, 0.7).toFixed(2);        // amplitud
    const dl = +rng(0.0, 0.4).toFixed(2);        // eco de ensueño contenido
    const lf = +rng(0.0, 0.5).toFixed(2);        // toque lofi opcional
    // El sonido ambiente queda EXCLUIDO del aleatorio: siempre apagado.
    const nt = "off";

    setInstrument(ins); setMood(md); setComplexity(cx);
    setTemperature(tp); setTempoScale(ts); setReverb(rv); setWidth(wd); setDelay(dl); setLofi(lf);
    setNoiseType(nt);

    const s = synthRef.current;
    s.setInstrument(ins);
    engineRef.current.setMood(md); engineRef.current.setComplexity(cx);
    s.setTemperature(tp); s.setTempoScale(ts); s.setReverb(rv); s.setWidth(wd); s.setDelay(dl); s.setLofi(lf);
    s.setNoiseType(nt);
    if (!playing) { s.start(); setPlaying(true); if (timerMin) s.setSleepTimer(timerMin, handleTimerEnd, gradualFade); }
    else if (playbackMode === "songs") s.restartSong(); // nueva atmósfera → nueva nana
    else s.smoothModeTransition(); // disimula el salto en flujo continuo
  };

  const openOptions = () => {
    setModal({
      kind: "options",
      icon: <Gear s={24} />, title: t("options"),
      content: <OptionsPanel t={t} theme={theme} setTheme={setTheme}
        octaveOffset={octaveOffset} setOctaveOffset={setOctaveOffset}
        baseOctave={synthRef.current.instrumentBaseOctave()}
        lang={lang} setLang={setLang} onReset={confirmReset} />,
      actions: [{ label: t("close"), onClick: closeModal }],
    });
  };
  // El modal de Opciones queda "vivo" mientras está abierto: los botones de
  // octava son un contador que se pulsa varias veces seguidas y necesita ver
  // el valor moverse al instante, no solo al reabrir el panel (modal.content
  // es un elemento ya creado — sin esto se quedaría con las props del
  // momento en que se abrió, ver openOptions).
  useEffect(() => {
    setModal((m) => (m && m.kind === "options") ? {
      ...m,
      content: <OptionsPanel t={t} theme={theme} setTheme={setTheme}
        octaveOffset={octaveOffset} setOctaveOffset={setOctaveOffset}
        baseOctave={synthRef.current.instrumentBaseOctave()}
        lang={lang} setLang={setLang} onReset={confirmReset} />,
    } : m);
  }, [octaveOffset, engineMode, sfzInstrument, theme, lang]);
  const confirmReset = () => {
    setModal({
      icon: <Gear s={24} />, title: t("reset_confirm_title"), body: t("reset_confirm_body"),
      actions: [
        { label: t("cancel"), onClick: closeModal },
        { label: t("reset_yes"), primary: true, onClick: doReset },
      ],
    });
  };
  const doReset = () => {
    synthRef.current.stop();
    synthRef.current.setNoiseType("off");
    try { localStorage.removeItem(STORE_KEY); } catch (e) {}
    setPlaying(false); setTimerMin(null); setTimeLeft(0);
    setInstrument(DEFAULTS.instrument); setEngineMode(DEFAULTS.engineMode);
    setSfzInstrument(DEFAULTS.sfzInstrument); setSfzList([]);
    setOctaveOffset(DEFAULTS.octaveOffset);
    setMood(DEFAULTS.mood);
    setComplexity(DEFAULTS.complexity); setTemperature(DEFAULTS.temperature);
    setTempoScale(DEFAULTS.tempoScale);
    setReverb(DEFAULTS.reverb); setWidth(DEFAULTS.width); setDelay(DEFAULTS.delay); setLofi(DEFAULTS.lofi);
    setNoiseType(DEFAULTS.noiseType);
    setNoiseVolume(DEFAULTS.noiseVolume); setOutputGain(DEFAULTS.outputGain); setGradualFade(DEFAULTS.gradualFade);
    setPlaybackMode(DEFAULTS.playbackMode); setPianoRoll(DEFAULTS.pianoRoll);
    setPadEnabled(DEFAULTS.padEnabled);
    setPadVolume(DEFAULTS.padVolume);
    setPadTimbre(DEFAULTS.padTimbre);
    synthRef.current.setPlaybackMode(DEFAULTS.playbackMode);
    // Reinicia también el motor → la próxima nana se regenera desde los valores por defecto.
    engineRef.current.setMood(DEFAULTS.mood);
    engineRef.current.setComplexity(DEFAULTS.complexity);
    setSecInstrument(DEFAULTS.secInstrument); setSecMode(DEFAULTS.secMode);
    setSecAdvanced(DEFAULTS.secAdvanced); setSecAmbient(DEFAULTS.secAmbient); setSecSleep(DEFAULTS.secSleep);
    setTheme(DEFAULTS.theme);
    setLang(window.I18N.detect());
  };

  const fmOrder = synthRef.current.instrumentOrder;
  const fmPills = fmOrder.slice(0, 5);
  const fmOthers = fmOrder.slice(5);
  const sfzPills = sfzList.slice(0, 5);
  const sfzOthers = sfzList.slice(5);
  const sfzEntry = sfzList.find((e) => e.id === sfzInstrument);
  const sfzDisplayName = sfzName(sfzEntry, lang);
  const openInstrumentPicker = (kind) => {
    const items = kind === "fm"
      ? fmOthers.map((k) => ({ id: k, name: t("inst_" + k) }))
      : sfzOthers.map((e) => ({ id: e.id, name: sfzName(e, lang) }));
    const current = kind === "fm" ? instrument : sfzInstrument;
    setModal({
      icon: <Gear s={24} />, title: t("inst_picker_title"),
      content: (
        <div className="chips wrap">
          {items.map((it) => (
            <button key={it.id} className={"chip " + (current === it.id ? "chip-on" : "")}
              onClick={() => { closeModal(); if (kind === "fm") setInstrument(it.id); else setSfzInstrument(it.id); }}>
              {it.name}
            </button>
          ))}
        </div>
      ),
      actions: [{ label: t("close"), onClick: closeModal }],
    });
  };
  const tempLabel = temperature < 0.34 ? t("temp_soft") : temperature > 0.66 ? t("temp_bright") : t("temp_mid");
  const tempoLabel = tempoScale < 0.9 ? t("tempo_v_slow") : tempoScale > 1.04 ? t("tempo_v_fast") : t("tempo_v_mid");
  const reverbLabel = reverb < 0.25 ? t("rev_dry") : reverb > 0.6 ? t("rev_hall") : t("rev_mid");
  const activeMood = mood === "mix" ? engineRef.current.activeMood() : mood;
  const moodLabel = mood === "mix" ? (t("mix") + " · " + t(activeMood)) : t(mood);
  const statusLabel = playing ? (recording ? t("st_recording") : t("st_playing")) : t("st_paused");

  const noiseOptions = [
    { value: "rain", label: t("noise_rain") },
    { value: "white", label: t("noise_white") },
    { value: "pink", label: t("noise_pink") },
    { value: "brown", label: t("noise_brown") },
    { value: "ocean", label: t("noise_ocean") },
    { value: "wind", label: t("noise_wind") },
    { value: "delta", label: t("noise_delta") },
    { value: "theta", label: t("noise_theta") },
  ];

  // Mantener el puente nativo apuntando a los manejadores actuales.
  ctrlRef.current.toggle = togglePlay;
  ctrlRef.current.setTimer = (m) => {
    if (!m) { setTimerMin(null); setTimeLeft(0); synthRef.current.clearSleepTimer(); return; }
    setTimerMin(m);
    if (playing) synthRef.current.setSleepTimer(m, handleTimerEnd, gradualFade);
  };

  return (
    <div className="app">
      <SkyCanvas />
      <header className="topbar">
        <div className="brand" onPointerDown={onBrandDown} onPointerUp={onBrandUp}
          onPointerLeave={onBrandUp} onContextMenu={(e) => e.preventDefault()}
          style={{ cursor: "pointer" }} title={t("ss_hint")}>
          <span className="brand-moon"><Moon s={22} /></span>
          <span className="brand-text">
            <span className="brand-name">Kdrama</span>
            <span className="brand-by">{t("by")} DSK</span>
          </span>
        </div>
        <div className="topbar-right">
          <div className={"status " + (playing ? "on" : "")}>{statusLabel}</div>
          <div className="topbar-btns" style={{ display: "flex", flexDirection: "row", gap: "7px" }}>
            <button className="icon-btn" onClick={randomize} aria-label={t("random")} title={t("random")}><Dice /></button>
            <button className="icon-btn" onClick={openSaveModal} aria-label={t("save")} title={t("save")}><Bookmark /></button>
            <button className="icon-btn" onClick={openSavedList} aria-label={t("saved_lullabies")} title={t("saved_lullabies")}><FolderIcon /></button>
            <button className="icon-btn" onClick={openOptions} aria-label={t("options")}><Gear /></button>
          </div>
        </div>
      </header>

      <Orb active={playing || noiseType !== "off"} playing={playing} levelRef={levelRef} onToggle={togglePlay} />

      <div className="now-line">
        {playing
          ? <span>{engineMode === "sfz" ? sfzDisplayName : t("inst_" + instrument)} · {moodLabel}</span>
          : <span className="muted">{t("hint")}</span>}
        {timerMin && playing ? <span className="timer-pill">{fmtTime(timeLeft)}</span> : null}
      </div>

      <PianoRoll synth={synthRef.current} active={pianoRoll} />

      <Section title={t("instrument")} open={secInstrument} onToggle={() => setSecInstrument((v) => !v)}>
        <div className="block">
          <span className="block-label">{t("engine")}</span>
          <Segmented value={engineMode} onChange={setEngineMode} options={[
            { value: "fm", label: t("engine_fm") },
            { value: "sfz", label: t("engine_sfz") },
          ]} />
        </div>
        {engineMode === "fm" ? (
          <div className="block">
            <div className="chips wrap">
              {fmPills.map((k) => (
                <button key={k} className={"chip " + (instrument === k ? "chip-on" : "")}
                  onClick={() => setInstrument(k)}>{t("inst_" + k)}</button>
              ))}
              {fmOthers.length > 0 && (
                <button className={"chip " + (fmOthers.includes(instrument) ? "chip-on" : "")}
                  onClick={() => openInstrumentPicker("fm")}>{t("inst_other")}</button>
              )}
            </div>
          </div>
        ) : (
          <div className="block">
            {sfzList.length === 0 ? (
              <p className="rec-help">{t("sfz_empty")}</p>
            ) : (
              <div className="chips wrap">
                {sfzPills.map((e) => (
                  <button key={e.id} className={"chip " + (sfzInstrument === e.id ? "chip-on" : "")}
                    onClick={() => setSfzInstrument(e.id)}>{sfzName(e, lang)}</button>
                ))}
                {sfzOthers.length > 0 && (
                  <button className={"chip " + (sfzOthers.some((e) => e.id === sfzInstrument) ? "chip-on" : "")}
                    onClick={() => openInstrumentPicker("sfz")}>{t("inst_other")}</button>
                )}
              </div>
            )}
          </div>
        )}
      </Section>

      <Section title={t("mood")} open={secMode} onToggle={() => setSecMode((v) => !v)}>
        <div className="block">
          <div className="mode-grid">
            {[
              { value: "hope", label: t("hope"), sub: t("hope_sub") },
              { value: "romance", label: t("romance"), sub: t("romance_sub") },
              { value: "sad", label: t("sad"), sub: t("sad_sub") },
              { value: "drama", label: t("drama"), sub: t("drama_sub") },
            ].map((o) => (
              <button key={o.value}
                className={"seg " + (mood === o.value ? "seg-on " : "") + (heldMode === o.value ? "seg-holding" : "")}
                onPointerDown={onModeDown(o.value)} onPointerUp={onModeUp(o.value)}
                onPointerLeave={onModeCancel} onPointerCancel={onModeCancel}
                onContextMenu={(e) => e.preventDefault()}>
                {o.label}<span className="seg-sub">{o.sub}</span>
              </button>
            ))}
            <button
              className={"seg seg-mix " + (mood === "mix" ? "seg-on " : "") + (heldMode === "mix" ? "seg-holding" : "")}
              onPointerDown={onModeDown("mix")} onPointerUp={onModeUp("mix")}
              onPointerLeave={onModeCancel} onPointerCancel={onModeCancel}
              onContextMenu={(e) => e.preventDefault()}>
              {t("mix")}<span className="seg-sub">{t("mix_sub")}</span>
            </button>
          </div>
        </div>
        <div className="block">
          <span className="block-label">{t("playback")}</span>
          <Segmented value={playbackMode} onChange={setPlaybackMode} options={[
            { value: "continuous", label: t("pb_continuous"), sub: t("pb_continuous_sub") },
            { value: "songs", label: t("pb_songs"), sub: t("pb_songs_sub") },
          ]} />
        </div>
      </Section>

      <Section title={t("advanced")} open={secAdvanced} onToggle={() => setSecAdvanced((v) => !v)}>
        <Slider label={t("output_gain")} valueLabel={Math.round(outputGain * 100) + "%"} min={0.5} max={2.0} step={0.02}
          value={outputGain} onChange={setOutputGain} leftCap={t("gain_lo")} rightCap={t("gain_hi")} defaultValue={DEFAULTS.outputGain} />
        <Slider label={t("complexity")} valueLabel={complexity} min={1} max={10} step={1}
          value={complexity} onChange={setComplexity} leftCap={t("cplx_min")} rightCap={t("cplx_max")} defaultValue={DEFAULTS.complexity} />
        <Slider label={t("temperature")} valueLabel={tempLabel} min={0} max={1} step={0.01}
          value={temperature} onChange={setTemperature} leftCap={t("temp_lo")} rightCap={t("temp_hi")} defaultValue={DEFAULTS.temperature} />
        <Slider label={t("tempo_ctrl")} valueLabel={tempoLabel} min={0.7} max={1.15} step={0.01}
          value={tempoScale} onChange={setTempoScale} leftCap={t("tempo_slow")} rightCap={t("tempo_fast")} defaultValue={DEFAULTS.tempoScale} />
        <Slider label={t("reverb")} valueLabel={reverbLabel} min={0} max={1} step={0.01}
          value={reverb} onChange={setReverb} leftCap={t("rev_lo")} rightCap={t("rev_hi")} defaultValue={DEFAULTS.reverb} />
        <Slider label={t("width")} valueLabel={Math.round(width * 100) + "%"} min={0} max={1} step={0.01}
          value={width} onChange={setWidth} leftCap={t("width_lo")} rightCap={t("width_hi")} defaultValue={DEFAULTS.width} />
        <Slider label={t("delayfx")} valueLabel={Math.round(delay * 100) + "%"} min={0} max={1} step={0.01}
          value={delay} onChange={setDelay} leftCap={t("delay_lo")} rightCap={t("delay_hi")} defaultValue={DEFAULTS.delay} />
        <Slider label={t("lofi")} valueLabel={Math.round(lofi * 100) + "%"} min={0} max={1} step={0.01}
          value={lofi} onChange={setLofi} leftCap={t("lofi_lo")} rightCap={t("lofi_hi")} defaultValue={DEFAULTS.lofi} />
        <Toggle label={t("pianoroll")} sub={t("pianoroll_sub")} checked={pianoRoll} onChange={setPianoRoll} defaultChecked={DEFAULTS.pianoRoll} />
        <Toggle label={t("pad")} sub={t("pad_sub")} checked={padEnabled} onChange={setPadEnabled} defaultChecked={DEFAULTS.padEnabled} />
        {padEnabled && (
          <>
            <Slider label={t("pad_volume")} valueLabel={Math.round(padVolume * 100) + "%"} min={0} max={1} step={0.01}
              value={padVolume} onChange={setPadVolume} defaultValue={DEFAULTS.padVolume} />
            <div className="block">
              <span className="block-label">{t("pad_timbre")}</span>
              <Segmented value={padTimbre} onChange={setPadTimbre} options={[
                { value: "warm", label: t("pad_warm") },
                { value: "strings", label: t("pad_strings") },
                { value: "choir", label: t("pad_choir") },
              ]} />
            </div>
          </>
        )}
      </Section>

      <Section title={t("ambient")} open={secAmbient} onToggle={() => setSecAmbient((v) => !v)} soft>
        <div className="block">
          <div className="chips wrap">
            <button className={"chip " + (noiseType === "off" ? "chip-on" : "")} onClick={() => pickNoise("off")}>
              {t("amb_off")}
            </button>
            {noiseOptions.map((o) => (
              <button key={o.value} className={"chip " + (noiseType === o.value ? "chip-on" : "")}
                onClick={() => pickNoise(o.value)}>{o.label}</button>
            ))}
          </div>
          {noiseType !== "off" && (
            <Slider label={t("amb_vol")} valueLabel={Math.round(noiseVolume * 100) + "%"}
              min={0} max={1} step={0.01} value={noiseVolume} onChange={setNoiseVolume} defaultValue={DEFAULTS.noiseVolume} />
          )}
        </div>
      </Section>

      <Section title={t("sleep")} open={secSleep} onToggle={() => setSecSleep((v) => !v)} soft>
        <div className="block">
          <div className="chips">
            {[15, 30, 60].map((m) => (
              <button key={m} className={"chip " + (timerMin === m ? "chip-on" : "")} onClick={() => pickTimer(m)}>
                {m} min
              </button>
            ))}
          </div>
          <Toggle label={t("gradual")} sub={t("gradual_sub")} checked={gradualFade} onChange={toggleGradual} defaultChecked={DEFAULTS.gradualFade} />
        </div>
        <button className={"rec-btn " + (recording ? "rec-active" : "")}
          onClick={recording ? stopRecordingNow : openRecordModal}>
          <span className="rec-dot" />
          {recording ? t("rec_stop") : t("rec")}
        </button>
        <button className="rec-btn" onClick={triggerMidiSave}>
          {t("midi_title")}
        </button>
      </Section>

      <footer className="footer">
        Made with <span className="heart">❤</span> {t("by")}{" "}
        <a href="https://www.dskmusic.com/dsk_dev_redirect.php" target="_blank" rel="noopener noreferrer">DSK</a>
      </footer>

      {screensaver && ReactDOM.createPortal(
        <div className="screensaver" onClick={exitScreensaver}
          role="button" aria-label={t("ss_hint")} style={{ touchAction: "manipulation" }}>
          <SkyCanvas />
          <div className="screensaver-hint">{t("ss_hint")}</div>
        </div>,
        document.body
      )}

      <ModalUI modal={modal} onClose={closeModal} />
    </div>
  );
}

/* --------------------------------------------------- Configurar grabación */
function RecordSetup({ t, recDur, setRecDur, onStart }) {
  const [val, setVal] = useState(recDur);
  const presets = [30, 60, 120, 300];
  return (
    <div className="rec-setup">
      <p className="rec-help">{t("rec_help")}</p>
      <div className="chips center">
        {presets.map((p) => (
          <button key={p} className={"chip " + (val === p ? "chip-on" : "")}
            onClick={() => { setVal(p); setRecDur(p); }}>
            {p < 60 ? `${p}s` : `${p / 60}m`}
          </button>
        ))}
      </div>
      <div className="rec-custom">
        <input type="number" min="5" max="900" value={val}
          onChange={(e) => { const v = parseInt(e.target.value || "0", 10); setVal(v); setRecDur(v); }} />
        <span>{t("rec_seconds")}</span>
      </div>
      <button className="btn btn-primary dl-btn" onClick={() => onStart(Math.max(5, val))}>{t("rec_start")}</button>
    </div>
  );
}

/* ----------------------------------------------- Guardar nana (nombre) */
function SaveSetup({ t, defaultName, onSave }) {
  const [name, setName] = useState(defaultName);
  return (
    <div className="save-setup">
      <p className="rec-help">{t("save_name_label")}</p>
      <input type="text" value={name} placeholder={t("save_name_placeholder")}
        onChange={(e) => setName(e.target.value)} maxLength={60} />
      <button className="btn btn-primary dl-btn" onClick={() => onSave(name)}>{t("save")}</button>
    </div>
  );
}

/* ------------------------------------------------------- Mis nanas (lista) */
function SavedList({ t, onPlay, onAskDelete, onRename }) {
  const [list] = useState(() => loadSavedList());
  if (!list.length) return <p className="rec-help">{t("saved_empty")}</p>;
  return (
    <div className="saved-list">
      {list.map((e) => (
        <div key={e.id} className="saved-row">
          <div className="saved-info">
            <span className="saved-name">{e.name}</span>
            <span className="saved-date">{new Date(e.ts).toLocaleDateString()}</span>
          </div>
          <div className="saved-actions">
            <button className="icon-btn icon-btn-sm icon-btn-primary" onClick={() => onPlay(e)} aria-label={t("saved_play")} title={t("saved_play")}><Play s={15} /></button>
            <button className="icon-btn icon-btn-sm" onClick={() => onRename(e)} aria-label={t("saved_rename")} title={t("saved_rename")}><PencilIcon s={15} /></button>
            <button className="icon-btn icon-btn-sm icon-btn-danger" onClick={() => onAskDelete(e.id)} aria-label={t("saved_delete")} title={t("saved_delete")}><TrashIcon s={15} /></button>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ------------------------------------------------------- Panel de opciones */
function OptionsPanel({ t, theme, setTheme, octaveOffset, setOctaveOffset, baseOctave, lang, setLang, onReset }) {
  const effective = (baseOctave || 0) + octaveOffset;
  const effectiveLabel = effective > 0 ? "+" + effective : String(effective);
  return (
    <div className="options">
      <div className="opt-row">
        <span className="opt-label">{t("theme")}</span>
        <Segmented value={theme} onChange={setTheme} options={[
          { value: "light", label: t("theme_light") },
          { value: "dark", label: t("theme_dark") },
          { value: "auto", label: t("theme_auto") },
        ]} />
      </div>
      <div className="opt-row">
        <span className="opt-label" onDoubleClick={() => setOctaveOffset(DEFAULTS.octaveOffset)}>{t("octave")}</span>
        <div className="octave-ctrl">
          <button className="icon-btn" onClick={() => setOctaveOffset((v) => Math.max(-2, Math.min(2, v - 1)))}
            disabled={octaveOffset <= -2} aria-label="-1">−</button>
          <span className="octave-value">{effectiveLabel}</span>
          <button className="icon-btn" onClick={() => setOctaveOffset((v) => Math.max(-2, Math.min(2, v + 1)))}
            disabled={octaveOffset >= 2} aria-label="+1">+</button>
        </div>
        <span className="toggle-sub" style={{ textAlign: "center" }}>{t("octave_sub")}</span>
      </div>
      <div className="opt-row">
        <span className="opt-label">{t("language")}</span>
        <Segmented value={lang} onChange={setLang} options={[
          { value: "es", label: "Español" },
          { value: "en", label: "English" },
        ]} />
      </div>
      <button className="btn btn-ghost reset-btn" onClick={onReset}>{t("reset")}</button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);