/* global React */
// ManualStyleBuilder.jsx — Feature 4: manual style — instruments / raga / taal / vaab / voice / tempo

function ManualStyleBuilder({
  manual, setManual,
  ragas, taals, vaabs, instruments, voicePresets, suggestedByRaga,
}) {
  const set = (k, v) => setManual({ ...manual, [k]: v });
  const toggleInst = (id) => {
    const has = manual.instruments.includes(id);
    set('instruments', has ? manual.instruments.filter((x) => x !== id) : [...manual.instruments, id]);
  };

  const suggested = suggestedByRaga[manual.raga] || [];
  const suggestedSet = new Set(suggested);
  const sortedInst = [
    ...instruments.filter((i) => suggestedSet.has(i.id)),
    ...instruments.filter((i) => !suggestedSet.has(i.id)),
  ];

  const subMode = manual.subMode || 'parameters';
  const setSubMode = (m) => set('subMode', m);

  return (
    <div className="manual">

      {/* Sub-mode picker — Text instruction vs Parameters */}
      <div className="mode-picker" style={{ marginBottom: 12 }}>
        <button className={subMode === 'text' ? 'on' : ''} onClick={() => setSubMode('text')}>
          <span className="dot" />Text instruction
        </button>
        <button className={subMode === 'parameters' ? 'on' : ''} onClick={() => setSubMode('parameters')}>
          <span className="dot" />Parameters
        </button>
      </div>

      {subMode === 'text' && (
        <div className="field">
          <div className="lbl">
            <span className="k">Instruction</span>
            <span className="hint">— passed verbatim to Lyria along with the lyrics</span>
          </div>
          <textarea
            className="text-input"
            style={{ minHeight: 220, padding: '12px 14px', lineHeight: 1.55, resize: 'vertical' }}
            value={manual.text || ''}
            onChange={(e) => set('text', e.target.value)}
            placeholder={"Describe the song you want in plain language.\n\ne.g. \"A sparse late-night Hindustani ghazal. Female alto, very close microphone, soft tabla on Dadra. Sarangi answering the vocal in the second verse. No claps, no harmonium. Light reverb, dry vocal, intimate and unhurried.\""}
          />
          <div style={{ marginTop: 6, fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--f-body, Georgia, serif)', fontStyle: 'italic' }}>
            Tempo, structure and lyrics are still controlled by their own fields — your text takes priority over everything else.
          </div>
        </div>
      )}

      {subMode === 'parameters' && (
      <>
      {/* Raga */}
      <div className="field">
        <div className="lbl">
          <span className="k">Raga</span>
          <span className="hint">— melodic mode</span>
        </div>
        <select className="text-input" value={manual.raga} onChange={(e) => set('raga', e.target.value)}>
          {ragas.map((r) => (
            <option key={r.name} value={r.name}>{r.name} — {r.time}, {r.mood.toLowerCase()}</option>
          ))}
        </select>
      </div>

      {/* Taal */}
      <div className="field">
        <div className="lbl">
          <span className="k">Taal</span>
          <span className="hint">— rhythmic cycle</span>
        </div>
        <select className="text-input" value={manual.taal} onChange={(e) => set('taal', e.target.value)}>
          {taals.map((t) => (
            <option key={t.name} value={t.name}>{t.name} — {t.beats} beats, {t.desc.toLowerCase()}</option>
          ))}
        </select>
      </div>

      {/* Vaab */}
      <div className="field">
        <div className="lbl">
          <span className="k">Vaab</span>
          <span className="hint">— emotional flavour</span>
        </div>
        <div className="card-grid">
          {vaabs.map((v) => (
            <button key={v.name}
                    className={`pick-card${manual.vaab === v.name ? ' on' : ''}`}
                    onClick={() => set('vaab', v.name)}>
              <span className="check"></span>
              <span className="glyph">{v.glyph}</span>
              <span className="name">{v.name}</span>
              <span className="sub">{v.meaning}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Voice style */}
      <div className="field">
        <div className="lbl">
          <span className="k">Voice style</span>
          <span className="hint">— describe in words</span>
        </div>
        <input className="text-input" value={manual.voice}
               onChange={(e) => set('voice', e.target.value)}
               placeholder="e.g. Female alto, breathy, ghazal-leaning" />
        <div className="preset-row" style={{marginTop: 4}}>
          {voicePresets.slice(0, 4).map((p) => (
            <button key={p} className="chip" onClick={() => set('voice', p)}>{p.split(',')[0]}</button>
          ))}
        </div>
      </div>

      {/* Instruments */}
      <div className="field">
        <div className="lbl">
          <span className="k">Instruments</span>
          <span className="hint">— pick any number</span>
          <span className="v">{manual.instruments.length} selected</span>
        </div>

        {suggested.length > 0 && (
          <div className="subhead">★ Suggested for {manual.raga}</div>
        )}
        <div className="card-grid">
          {sortedInst.map((i, idx) => {
            const isSugg = suggestedSet.has(i.id);
            const isFirstNonSugg = idx === suggested.length;
            return (
              <React.Fragment key={i.id}>
                {isFirstNonSugg && suggested.length > 0 && (
                  <div className="subhead" style={{ gridColumn: '1 / -1' }}>Other</div>
                )}
                <button
                  className={`pick-card${manual.instruments.includes(i.id) ? ' on' : ''}${isSugg ? ' suggested' : ''}`}
                  onClick={() => toggleInst(i.id)}>
                  <span className="check"></span>
                  <span className="glyph">{i.glyph}</span>
                  <span className="name">{i.name}</span>
                  <span className="sub">{i.origin}</span>
                </button>
              </React.Fragment>
            );
          })}
        </div>
      </div>
      </>
      )}

    </div>
  );
}

window.ManualStyleBuilder = ManualStyleBuilder;