/* global React */
// AutoStyleMode.jsx — AI-driven style: reads lyrics, picks everything itself

function AutoStyleMode({ autoStyle, setAutoStyle, generating, onGenerate, lyrics }) {
  const updateField = (key, value) => setAutoStyle({ ...autoStyle, [key]: value });

  return (
    <div className="manual">
      <div className="auto-hero">
        <div className="auto-glyph">✦</div>
        <div className="auto-copy">
          <div className="t">Let the AI choose</div>
          <div className="s">Reads your lyrics, infers the right genre, voice, raga, taal, instruments and tempo. You can still tweak any field afterwards.</div>
        </div>
      </div>

      <button className="btn primary full" onClick={onGenerate}
              disabled={generating || !lyrics.trim()}>
        {generating
          ? <><span className="spin" style={{margin:0,width:11,height:11,borderWidth:1.2}} /> Composing the style</>
          : (autoStyle ? '↻ Regenerate style' : '✦ Auto-generate style')}
      </button>

      {!lyrics.trim() && !autoStyle && (
        <div className="auto-empty">
          Write some lyrics first — the AI needs a seed.
        </div>
      )}

      {generating && (
        <div className="inline-loading">
          <span className="spin" />
          <div>
            <div className="t">Reading the lyrics…</div>
            <div className="s">Inferring mood, genre, raga, taal, instruments, tempo</div>
          </div>
        </div>
      )}

      {autoStyle && !generating && (
        <div className="analysis-card">
          <div className="head">
            <span className="ttl">AI-chosen style</span>
            <span className="by">— editable</span>
          </div>

          <div className="analysis-words">
            <em>The AI says ·</em> {autoStyle.description}
          </div>

          <div className="analysis-grid">
            <AlternatesRow k="Genre"
                           value={autoStyle.genre} note={autoStyle.genreNote}
                           alternates={autoStyle.genres}
                           onChange={({ value, note }) => setAutoStyle({ ...autoStyle, genre: value, genreNote: note })} />
            <AlternatesRow k="Voice"
                           value={autoStyle.voice} note={autoStyle.voiceNote}
                           alternates={autoStyle.voices}
                           onChange={({ value, note }) => setAutoStyle({ ...autoStyle, voice: value, voiceNote: note })} />
            <AlternatesRow k="Raga"
                           value={autoStyle.raga} note={autoStyle.ragaNote}
                           alternates={autoStyle.ragas}
                           onChange={({ value, note }) => setAutoStyle({ ...autoStyle, raga: value, ragaNote: note })} />
            <AlternatesRow k="Taal"
                           value={autoStyle.taal} note={autoStyle.taalNote}
                           alternates={autoStyle.taals}
                           onChange={({ value, note }) => setAutoStyle({ ...autoStyle, taal: value, taalNote: note })} />
            <BpmSliderRow value={autoStyle.bpm} note={autoStyle.bpmNote}
                          onChange={(n) => updateField('bpm', n)} />
            <AlternatesRow k="Vaab"
                           value={autoStyle.vaab} note={autoStyle.vaabNote}
                           alternates={autoStyle.vaabs}
                           onChange={({ value, note }) => setAutoStyle({ ...autoStyle, vaab: value, vaabNote: note })} />
            <AlternatesRow k="Key"
                           value={autoStyle.key} note={autoStyle.keyNote}
                           alternates={autoStyle.keys}
                           onChange={({ value, note }) => setAutoStyle({ ...autoStyle, key: value, keyNote: note })} />
            <AutoRow k="Instruments" v={(autoStyle.instruments || []).join(', ')}
                     onChange={(v) => updateField('instruments', v.split(',').map((x) => x.trim()).filter(Boolean))} />
          </div>
        </div>
      )}
    </div>
  );
}

function AutoRow({ k, v, note, onChange }) {
  return (
    <div className="analysis-row">
      <div className="k">{k}</div>
      <div className="v">
        <input value={v || ''} onChange={(e) => onChange(e.target.value)} />
        {note && <span className="note">{note}</span>}
      </div>
    </div>
  );
}

window.AutoStyleMode = AutoStyleMode;