/* global React */
// ReferenceTrackAnalyzer.jsx — Feature 3: upload track / paste YT, Gemini-style analyse → JSON

const { useRef: useRefR, useState: useStateR } = React;

function ReferenceTrackAnalyzer({
  refFile, setRefFile,
  ytUrl, setYtUrl,
  analysis, setAnalysis,
  analysing, onAnalyse,
}) {
  const inp = useRefR(null);

  const updateField = (key, value) => setAnalysis({ ...analysis, [key]: value });

  return (
    <div className="manual">
      <div className="ref-zone">
        <input ref={inp} type="file" accept="audio/*" style={{ display: 'none' }}
               onChange={(e) => {
                 const f = e.target.files?.[0];
                 if (f) setRefFile({ name: f.name, size: Math.round(f.size/1024), file: f });
               }} />
        <div className="upload-row" onClick={() => inp.current?.click()}>
          <div className="icn">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
              <path d="M9 2v9M9 2L5.5 5.5M9 2l3.5 3.5M3 12v2.5A1.5 1.5 0 004.5 16h9a1.5 1.5 0 001.5-1.5V12"/>
            </svg>
          </div>
          <div className="meta">
            {refFile ? (
              <>
                <div className="t">{refFile.name}</div>
                <div className="s">{refFile.size} KB · click to replace</div>
              </>
            ) : (
              <>
                <div className="t">Upload audio file</div>
                <div className="s">MP3 / WAV / M4A — drop or click</div>
              </>
            )}
          </div>
        </div>

        <div className="divider-or">or paste a youtube link</div>

        <div className="url-input">
          <svg width="14" height="14" viewBox="0 0 16 16" fill="#E13B3B" style={{flexShrink:0}}>
            <path d="M14.5 4.5a1.8 1.8 0 00-1.3-1.3C12 3 8 3 8 3s-4 0-5.2.2A1.8 1.8 0 001.5 4.5C1.3 5.7 1.3 8 1.3 8s0 2.3.2 3.5a1.8 1.8 0 001.3 1.3C4 13 8 13 8 13s4 0 5.2-.2a1.8 1.8 0 001.3-1.3c.2-1.2.2-3.5.2-3.5s0-2.3-.2-3.5zM6.6 10.2V5.8L10.4 8l-3.8 2.2z"/>
          </svg>
          <input value={ytUrl} onChange={(e) => setYtUrl(e.target.value)}
                 placeholder="youtube.com/watch?v=…" />
        </div>

        <button className="btn primary full" onClick={onAnalyse}
                disabled={analysing || (!refFile && !ytUrl.trim())}>
          {analysing ? <><span className="spin" style={{margin:0,width:11,height:11,borderWidth:1.2}} /> Analysing with Gemini</> : '↗ Analyse style'}
        </button>
      </div>

      {analysing && (
        <div className="inline-loading">
          <span className="spin" />
          <div>
            <div className="t">Listening to your reference…</div>
            <div className="s">Detecting genre · voice · raga · taal · tempo · instruments</div>
          </div>
        </div>
      )}

      {analysis && !analysing && (
        <div className="analysis-card">
          <div className="head">
            <span className="ttl">Detected style</span>
            <span className="by">— editable</span>
          </div>

          <div className="analysis-words">
            <em>In words ·</em> {analysis.description}
          </div>

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

function EditableRow({ 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.ReferenceTrackAnalyzer = ReferenceTrackAnalyzer;