/* global React */
// StylePanel.jsx — Style modes: Auto · Reference · Manual

function StylePanel(props) {
  const {
    mode, setMode,
    // auto
    autoStyle, autoGenerating, onAutoGenerate, lyrics, setAutoStyle,
    // ref
    refFile, setRefFile, ytUrl, setYtUrl,
    analysis, setAnalysis, analysing, onAnalyse,
    // manual
    manual, setManual,
    // shared
    ragas, taals, vaabs, instruments, voicePresets, suggestedByRaga,
    bpm, setBpm, currentTaal,
    // modify (refinement applied at Generate time)
    modify, setModify, modifying, onModify, onClearModify,
  } = props;

  return (
    <div className="panel">
      <div className="panel-head">
        <span className="num">03</span>
        <span className="title">Style</span>
        <span className="hint">— how should it sound?</span>
      </div>
      <div className="panel-body">
        <div className="style-area">

          <div className="mode-picker three">
            <button className={mode === 'auto' ? 'on' : ''} onClick={() => setMode('auto')}>
              <span className="dot" /> Auto
              <span className="badge">AI</span>
            </button>
            <button className={mode === 'reference' ? 'on' : ''} onClick={() => setMode('reference')}>
              <span className="dot" /> Reference
            </button>
            <button className={mode === 'manual' ? 'on' : ''} onClick={() => setMode('manual')}>
              <span className="dot" /> Manual
            </button>
          </div>

          {mode === 'auto' && (
            <AutoStyleMode
              autoStyle={autoStyle} setAutoStyle={setAutoStyle}
              generating={autoGenerating} onGenerate={onAutoGenerate}
              lyrics={lyrics} />
          )}
          {mode === 'reference' && (
            <ReferenceTrackAnalyzer
              refFile={refFile} setRefFile={setRefFile}
              ytUrl={ytUrl} setYtUrl={setYtUrl}
              analysis={analysis} setAnalysis={setAnalysis}
              analysing={analysing} onAnalyse={onAnalyse} />
          )}
          {mode === 'manual' && (
            <ManualStyleBuilder
              manual={manual} setManual={setManual}
              ragas={ragas} taals={taals} vaabs={vaabs}
              instruments={instruments} voicePresets={voicePresets}
              suggestedByRaga={suggestedByRaga} />
          )}

          <div className="field">
            <div className="lbl">
              <span className="k">Tempo</span>
              <span className="hint">— with taal preview</span>
            </div>
            <TempoPreview bpm={bpm} setBpm={setBpm} taal={currentTaal} taals={taals} />
          </div>

          <ModifyRequest
            modify={modify} setModify={setModify}
            thinking={modifying}
            onSend={onModify}
            onClear={onClearModify} />
        </div>
      </div>
    </div>
  );
}

function ModifyRequest({ modify, setModify, thinking, onSend, onClear }) {
  const QUICK = ['Make it dreamier', 'Add a tabla solo', 'Softer vocals', 'Faster bridge'];
  const setText = (v) => setModify({ ...(modify || {}), text: v });
  const m = modify || { text: '', response: '' };
  return (
    <div className="field" style={{ marginTop: 18 }}>
      <div className="lbl">
        <span className="k">Refine</span>
        <span className="hint">— one short request, applied at Generate</span>
        {m.response && (
          <button onClick={onClear} className="chip"
                  style={{ marginLeft: 'auto', fontSize: 10 }}>clear</button>
        )}
      </div>
      <div style={{ display: 'flex', gap: 6, marginBottom: 6, flexWrap: 'wrap' }}>
        {QUICK.map((q) => (
          <button key={q} className="chip" onClick={() => setText(q)}>{q}</button>
        ))}
      </div>
      <textarea className="text-input"
                style={{ minHeight: 64, padding: '10px 12px', resize: 'vertical' }}
                value={m.text}
                placeholder='e.g. "drop the harmonium in verse 2 and let bansuri answer the melody"'
                onChange={(e) => setText(e.target.value)} />
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 6 }}>
        <button className="btn primary sm" disabled={thinking || !m.text.trim()} onClick={onSend}>
          {thinking ? '…' : 'Send'}
        </button>
      </div>
      {m.response && (
        <div style={{ marginTop: 10, padding: '10px 12px',
                      borderLeft: '2px solid var(--amber)',
                      background: 'var(--bg-1)', borderRadius: 2,
                      fontFamily: 'var(--f-body, Georgia, serif)',
                      fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>
          <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '.12em',
                        textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 4 }}>
            Refinement (will be applied at Generate)
          </div>
          {m.response}
        </div>
      )}
    </div>
  );
}

window.StylePanel = StylePanel;