// ml-screens-cover.jsx — Cover/sample/interpolation detection tab
(function () {
  if (typeof window === 'undefined') return;
  const { useState: _S, useMemo: _M } = React;

  const KIND_LABELS = { cover: 'Cover', sample: 'Sample', interpolation: 'Interpolation' };
  const KIND_COLORS = { cover: '#0070d6', sample: '#a32a18', interpolation: '#a35418' };

  function MLCoversTab() {
    const [kind, setKind] = _S(null);
    const [statusFilter, setStatusFilter] = _S(null);
    const [active, setActive] = _S(null);

    const items = _M(() => {
      if (window.__COVER_DISCOVERY) return window.__COVER_DISCOVERY;
      const x = window.CoverEngine ? window.CoverEngine.buildDiscoveryPool() : [];
      window.__COVER_DISCOVERY = x;
      return x;
    }, []);

    const summary = _M(() => window.CoverEngine ? window.CoverEngine.summarize(items) : { total: 0, cover: 0, sample: 0, interp: 0, unregistered: 0, recoveryEstimate: 0 }, [items]);

    const filtered = _M(() => items.filter(i =>
      (!kind || i.kind === kind) && (!statusFilter || i.status === statusFilter)
    ), [items, kind, statusFilter]);

    return (
      <div>
        <div style={{ padding: '0 0 18px', display: 'flex', alignItems: 'center', gap: 14 }}>
          <div className="ff-mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '.14em' }}>COVER / SAMPLE / INTERPOLATION DETECTION</div>
          <span style={{ flex: 1 }} />
          <button style={{ padding: '7px 12px', border: '1px solid var(--rule)', background: 'transparent', fontSize: 10, fontWeight: 600, cursor: 'pointer', letterSpacing: '.1em' }} className="ff-mono upper">RE-SCAN ALL</button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
          <div style={{ padding: '20px 22px', borderRight: '1px solid var(--rule)' }}>
            <div className="ff-mono upper" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '.12em' }}>RECOVERABLE</div>
            <div className="ff-mono num" style={{ fontSize: 28, fontWeight: 600, color: '#0a8754', marginTop: 6 }}>${summary.recoveryEstimate >= 1000 ? (summary.recoveryEstimate/1000).toFixed(1)+'k' : summary.recoveryEstimate.toFixed(0)}</div>
          </div>
          <div style={{ padding: '20px 22px', borderRight: '1px solid var(--rule)' }}>
            <div className="ff-mono upper" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '.12em' }}>UNREGISTERED</div>
            <div className="ff-mono num" style={{ fontSize: 28, fontWeight: 600, color: '#a32a18', marginTop: 6 }}>{summary.unregistered}</div>
          </div>
          <div style={{ padding: '20px 22px', borderRight: '1px solid var(--rule)' }}>
            <div className="ff-mono upper" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '.12em' }}>COVERS</div>
            <div className="ff-mono num" style={{ fontSize: 28, fontWeight: 600, marginTop: 6 }}>{summary.cover}</div>
          </div>
          <div style={{ padding: '20px 22px', borderRight: '1px solid var(--rule)' }}>
            <div className="ff-mono upper" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '.12em' }}>SAMPLES</div>
            <div className="ff-mono num" style={{ fontSize: 28, fontWeight: 600, marginTop: 6 }}>{summary.sample}</div>
          </div>
          <div style={{ padding: '20px 22px' }}>
            <div className="ff-mono upper" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '.12em' }}>INTERPS</div>
            <div className="ff-mono num" style={{ fontSize: 28, fontWeight: 600, marginTop: 6 }}>{summary.interp}</div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--rule)' }}>
          {[null, 'cover', 'sample', 'interpolation'].map(k => (
            <button key={k || 'all'} onClick={() => setKind(k)} className="ff-mono upper" style={{
              padding: '12px 16px', background: 'transparent', border: 0,
              borderBottom: '2px solid ' + (kind === k ? 'var(--ink)' : 'transparent'),
              cursor: 'pointer', fontSize: 10, letterSpacing: '.12em',
              color: kind === k ? 'var(--ink)' : 'var(--ink-3)', fontWeight: kind === k ? 600 : 400,
            }}>{k ? KIND_LABELS[k].toUpperCase() : 'ALL'}</button>
          ))}
          <span style={{ flex: 1 }} />
          {[null, 'unregistered', 'flagged', 'monitored'].map(s => (
            <button key={s || 'all'} onClick={() => setStatusFilter(s)} className="ff-mono upper" style={{
              padding: '12px 12px', background: 'transparent', border: 0,
              borderBottom: '2px solid ' + (statusFilter === s ? 'var(--ink)' : 'transparent'),
              cursor: 'pointer', fontSize: 10, letterSpacing: '.12em',
              color: statusFilter === s ? 'var(--ink)' : 'var(--ink-3)', fontWeight: statusFilter === s ? 600 : 400,
            }}>{s ? s.toUpperCase() : 'ALL STATUS'}</button>
          ))}
        </div>

        <div>
          <div className="ff-mono upper" style={{
            display: 'grid', gridTemplateColumns: '90px 1fr 1fr 100px 90px 80px 110px 90px',
            gap: 10, padding: '10px 14px', fontSize: 9, color: 'var(--ink-3)',
            background: 'var(--bg-2)', borderBottom: '1px solid var(--rule)', letterSpacing: '.12em',
          }}>
            <span>KIND</span><span>YOUR WORK</span><span>DISCOVERED</span><span>PLATFORM</span>
            <span style={{ textAlign: 'right' }}>STREAMS</span><span style={{ textAlign: 'right' }}>DETECT</span>
            <span style={{ textAlign: 'right' }}>RECOVERY</span><span>STATUS</span>
          </div>
          {filtered.slice(0, 80).map(it => (
            <div key={it.id} onClick={() => setActive(it)} style={{
              display: 'grid', gridTemplateColumns: '90px 1fr 1fr 100px 90px 80px 110px 90px',
              gap: 10, padding: '12px 14px', borderBottom: '1px solid var(--rule-soft)',
              alignItems: 'center', fontSize: 13, cursor: 'pointer',
            }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-2)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              <span className="ff-mono upper" style={{
                fontSize: 9, padding: '2px 7px', border: '1px solid ' + KIND_COLORS[it.kind],
                color: KIND_COLORS[it.kind], letterSpacing: '.12em', fontWeight: 600, justifySelf: 'start',
              }}>{KIND_LABELS[it.kind].toUpperCase()}</span>
              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: 500 }}>{it.workTitle}</span>
              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                <span style={{ fontWeight: 500 }}>{it.discoveredTitle}</span>
                <span style={{ color: 'var(--ink-3)' }}> · {it.discoveredArtist}</span>
              </span>
              <span className="ff-mono" style={{ fontSize: 11, color: 'var(--ink-2)' }}>{it.platform}</span>
              <span className="ff-mono num" style={{ textAlign: 'right' }}>{it.streams.toLocaleString()}</span>
              <span className="ff-mono num" style={{ textAlign: 'right', fontWeight: 600 }}>{it.detection}%</span>
              <span className="ff-mono num" style={{ textAlign: 'right', fontWeight: 600, color: it.credited ? 'var(--ink-3)' : '#0a8754' }}>${it.recoveryEstimate.toFixed(2)}</span>
              <span className="ff-mono upper" style={{ fontSize: 9, letterSpacing: '.1em', color: it.status === 'unregistered' ? '#a32a18' : it.status === 'flagged' ? '#a35418' : 'var(--ink-3)', fontWeight: 600 }}>{it.status}</span>
            </div>
          ))}
        </div>

        {active && (
          <div onClick={() => setActive(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(15,12,8,.32)', zIndex: 70 }}>
            <div onClick={e => e.stopPropagation()} style={{
              position: 'absolute', top: 0, right: 0, width: 540, height: '100%',
              background: 'var(--bg)', borderLeft: '1px solid var(--rule)', overflowY: 'auto',
            }}>
              <div style={{ padding: '18px 24px', borderBottom: '1px solid var(--rule)' }}>
                <div className="ff-mono upper" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '.14em' }}>{KIND_LABELS[active.kind].toUpperCase()} DETECTION</div>
                <div style={{ fontSize: 22, fontWeight: 600, marginTop: 6 }}>{active.discoveredTitle}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 2 }}>{active.discoveredArtist} · {active.platform}</div>
              </div>
              <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--rule)' }}>
                <div className="ff-mono upper" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '.12em', marginBottom: 8 }}>YOUR WORK</div>
                <div style={{ fontSize: 15, fontWeight: 500 }}>{active.workTitle}</div>
              </div>
              <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--rule)' }}>
                <div className="ff-mono upper" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '.12em', marginBottom: 12 }}>DETECTION SIGNALS</div>
                {[
                  { l: 'Audio fingerprint', v: active.fpMatch },
                  { l: 'Lyric similarity', v: active.lyricSim },
                  { l: 'Melody contour', v: active.melodySim },
                  { l: 'Title match', v: active.titleSim },
                ].map(s => (
                  <div key={s.l} style={{ display: 'grid', gridTemplateColumns: '1fr 200px 50px', gap: 12, padding: '8px 0', alignItems: 'center', fontSize: 12 }}>
                    <span>{s.l}</span>
                    <span style={{ height: 6, background: 'var(--rule-soft)', position: 'relative' }}>
                      <span style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: s.v + '%', background: 'var(--ink)' }}></span>
                    </span>
                    <span className="ff-mono num" style={{ textAlign: 'right' }}>{s.v}%</span>
                  </div>
                ))}
              </div>
              <div style={{ padding: '20px 24px' }}>
                <div className="ff-mono upper" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '.12em', marginBottom: 8 }}>RECOVERY</div>
                <div className="ff-mono num" style={{ fontSize: 30, fontWeight: 600, color: '#0a8754' }}>${active.recoveryEstimate.toFixed(2)}</div>
                <div className="ff-mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4 }}>{active.streams.toLocaleString()} streams · {active.ageMonths}mo since release</div>
                <div style={{ marginTop: 18, display: 'flex', gap: 10 }}>
                  <button style={{ padding: '10px 16px', background: 'var(--ink)', color: 'var(--bg)', border: 0, fontSize: 12, fontWeight: 600, cursor: 'pointer', flex: 1 }}>FILE CLAIM</button>
                  <button style={{ padding: '10px 16px', background: 'transparent', border: '1px solid var(--rule)', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>SEND TAKEDOWN</button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

  function CoverScorecard({ work }) {
    const items = _M(() => work && window.CoverEngine ? window.CoverEngine.forWork(work.id) : [], [work && work.id]);
    if (!items.length) return null;
    const total = items.reduce((s,i) => s + i.recoveryEstimate, 0);
    return (
      <div style={{ border: '1px solid var(--rule)', background: 'var(--bg)' }}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--rule)', display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <span className="ff-mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '.12em' }}>COVERS / SAMPLES / INTERPS</span>
          <span style={{ flex: 1 }} />
          <span className="ff-mono num" style={{ fontSize: 16, fontWeight: 600, color: '#0a8754' }}>${total.toFixed(2)}</span>
        </div>
        {items.map(it => (
          <div key={it.id} style={{ padding: '10px 18px', borderBottom: '1px solid var(--rule-soft)', display: 'flex', alignItems: 'center', gap: 10 }}>
            <span className="ff-mono upper" style={{ fontSize: 9, padding: '2px 6px', border: '1px solid ' + KIND_COLORS[it.kind], color: KIND_COLORS[it.kind], letterSpacing: '.1em', fontWeight: 600 }}>{KIND_LABELS[it.kind].toUpperCase()}</span>
            <div style={{ flex: 1, fontSize: 12 }}>
              <div style={{ fontWeight: 500 }}>{it.discoveredTitle}</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>{it.discoveredArtist} · {it.platform}</div>
            </div>
            <span className="ff-mono num" style={{ fontSize: 12, fontWeight: 600, color: it.credited ? 'var(--ink-3)' : '#0a8754' }}>${it.recoveryEstimate.toFixed(0)}</span>
          </div>
        ))}
      </div>
    );
  }

  window.MLCoversTab = MLCoversTab;
  window.CoverScorecard = CoverScorecard;
})();