import cx from '@src/cx.mjs';
import { useSettings } from '@src/settings.mjs';

// Documentación rápida de sonidos para tener a mano mientras se pincha.
const SYNTHS = [
  ['sawtooth', 'la onda del ácido — rica en armónicos, brilla al filtrarla'],
  ['square / pulse', 'hueca y nasal — leads, bleeps, acid alternativo'],
  ['triangle', 'suave, casi seno — sub y tonos redondos'],
  ['sine', 'seno puro — sub-bajo limpio bajo el ácido'],
  ['supersaw', 'muro de sierras — stabs de rave, hoover, trance'],
  ['.fm(i).fmh(r)', 'síntesis FM — campanas, metales, bajos tipo DX'],
  ['white / pink / brown', 'ruido — risers, hats, texturas, sweeps'],
];

const DRUMS = [
  ['RolandTR909', 'techno/house — bombo potente, hats metálicos. LA caja del techno'],
  ['RolandTR808', 'electro/hip-hop — sub-bombo largo, cowbell, claps secos'],
  ['RolandTR707', 'house — limpia y seca, muy digital 80s'],
  ['RolandTR606', 'acid/electro — pequeña, hats finos (pareja de la TB-303)'],
  ['RolandTR727', 'percusión latina — congas, bongos, timbales'],
  ['RolandTR505', 'synthpop — samples cortos y funcionales'],
  ['LinnDrum', 'pop 80s — samples reales gated (Prince, Depeche Mode)'],
  ['LinnLM1', 'el primer drum-sampler icónico'],
  ['OberheimDMX', 'hip-hop old school, electro-funk'],
  ['EmuSP12 / AkaiMPC60', 'boom-bap — swing y crujido legendarios'],
  ['CasioRZ1 / CasioSK1', 'lo-fi barato con mucho carácter'],
  ['KorgKR55 / KorgMinipops', 'preset-box vintage, dub y exotica (Boards of Canada)'],
  ['SimmonsSDS5', 'toms electrónicos 80s (pium-pium)'],
  ['YamahaRX5 / RX21', 'FM digital 80s'],
  ['BossDR110 / DR55', 'analógicas minúsculas, hats brillantes'],
  ['RhythmAce', 'órgano-ritmo vintage, muy lo-fi'],
];

const INSTR = [
  ['piano', 'piano acústico sampleado (real, muy bueno)'],
  ['gm_epiano1 · gm_epiano2', 'Rhodes / e-piano — detroit, deep house'],
  ['gm_acoustic_piano · gm_bright_acoustic_piano', 'pianos GM'],
  ['gm_pad_warm · gm_pad_halo · gm_pad_new_age', 'pads atmosféricos que envuelven'],
  ['gm_choir_aahs · gm_voice_oohs · gm_synth_choir', 'coros y voces etéreas'],
  ['gm_string_ensemble_1 · gm_synth_strings_1', 'cuerdas'],
  ['gm_vibraphone · gm_marimba · gm_xylophone · gm_kalimba', 'láminas/mallets cristalinos'],
  ['gm_church_organ · gm_drawbar_organ', 'órganos'],
  ['gm_synth_bass_1 · gm_acoustic_bass', 'bajos melódicos'],
  ['gm_lead_1_square · gm_lead_2_sawtooth', 'leads de synth'],
];

const SYNTAX = [
  ['.bank("RolandTR909")', 'elige la caja de ritmos (¡71 disponibles!)'],
  ['s("bd sd hh oh cp rim lt mt ht")', 'sonidos de batería'],
  ['note("c2 eb2 g2")  ·  n("0 3 5").scale("C:minor")', 'notas / grados de escala'],
  ['.lpf() .lpq() .lpenv() .lpd()', 'filtro: corte · resonancia · envolvente · decay = EL ÁCIDO'],
  ['.distort("2:.4") .crush() .shape()', 'suciedad: distorsión (drive:volumen), bitcrush'],
  ['.room() .delay() .dt() .dfb()', 'espacio: reverb · delay (tiempo, feedback)'],
  ['.mask("<1 1 0 1>")', 'que algo aparezca/desaparezca por ciclos'],
  ['.every(8, x=>...) .degradeBy() .ply() .chunk()', 'variación y mutación'],
  ['sine.range(300,3000).slow(32)', 'movimiento lento y continuo (respira)'],
];

function Table({ rows, headL, headR }) {
  return (
    <table className="w-full border-collapse mb-4">
      <thead>
        <tr className="text-left border-b border-foreground/40">
          <th className="py-1 pr-3 font-bold align-top whitespace-nowrap">{headL}</th>
          <th className="py-1 font-bold">{headR}</th>
        </tr>
      </thead>
      <tbody>
        {rows.map(([a, b]) => (
          <tr key={a} className="border-b border-muted align-top">
            <td className="py-1 pr-3 font-mono text-xs whitespace-nowrap text-blue-400">{a}</td>
            <td className="py-1 opacity-90">{b}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function Section({ title, children }) {
  return (
    <div className="mb-5">
      <h2 className="text-base font-bold mb-2 text-foreground">{title}</h2>
      {children}
    </div>
  );
}

export function GuideTab() {
  const { fontFamily } = useSettings();
  return (
    <div className="w-full h-full overflow-auto px-4 py-3 text-sm text-foreground" style={{ fontFamily }}>
      <p className="opacity-80 mb-4">
        Guía rápida de sonidos para construir y pinchar. Todo esto se combina con <code>.</code> encadenando:
        p.ej. <span className="font-mono text-xs text-blue-400">s("bd*4").bank("RolandTR909").lpf(800)</span>.
      </p>

      <Section title="🎛️ Fuentes de synth (.s)">
        <Table rows={SYNTHS} headL="sonido" headR="carácter / uso" />
      </Section>

      <Section title="🥁 Cajas de ritmo — .bank(...)  ·  71 en total">
        <p className="opacity-70 text-xs mb-2">
          Se usan con los sonidos de batería: <span className="font-mono text-blue-400">s("bd sd hh cp").bank("RolandTR808")</span>.
          Las más icónicas:
        </p>
        <Table rows={DRUMS} headL="bank" headR="carácter / estilo" />
        <p className="opacity-60 text-xs">
          …y ~50 más: Roland (MC202, MC303, R8, TR626…), Korg (KPR77, DDM110, M1…), Yamaha (RY30, TG33…), Emu, Alesis,
          Sequential, Simmons, Casio, Moog, Serge… Prueba cualquiera.
        </p>
      </Section>

      <Section title="🎹 Instrumentos melódicos — .s(...) o .sound(...)">
        <p className="opacity-70 text-xs mb-2">
          Con notas: <span className="font-mono text-blue-400">note("c3 eb3 g3").s("gm_epiano2").room(.4)</span>.
          Soundfonts General MIDI (128 instrumentos, prefijo <code>gm_</code>) + samples reales:
        </p>
        <Table rows={INSTR} headL="instrumento" headR="uso" />
      </Section>

      <Section title="🔧 Chuleta de funciones">
        <Table rows={SYNTAX} headL="función" headR="qué hace" />
      </Section>

      <p className="opacity-60 text-xs">
        Más en la pestaña <b>reference</b> (todas las funciones) y en <b>sounds</b> (explorar samples cargados).
      </p>
    </div>
  );
}
