/* Media library — wired to /api/assets. */

function ML_thumbBg(kind) {
  if (kind === 'video') return 'linear-gradient(135deg, oklch(0.30 0.08 220), oklch(0.18 0.05 240))';
  if (kind === '3d-model' || kind === '3d') return 'linear-gradient(135deg, oklch(0.32 0.08 280), oklch(0.20 0.05 300))';
  if (kind === 'audio') return 'linear-gradient(135deg, oklch(0.30 0.06 80), oklch(0.20 0.04 100))';
  return 'linear-gradient(135deg, oklch(0.34 0.08 160), oklch(0.22 0.05 180))';
}

function ML_durationLabel(secs) {
  if (!secs) return null;
  const m = Math.floor(secs / 60);
  const s = Math.round(secs % 60);
  return `${m}:${String(s).padStart(2, '0')}`;
}

function MediaLibraryScreen() {
  const [assets, setAssets] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [selected, setSelected] = useState(null);
  const [filter, setFilter] = useState('All');

  useEffect(() => {
    let cancelled = false;
    apiFetch('/api/assets')
      .then((res) => { if (!cancelled) { setAssets(res.assets || res || []); setLoading(false); } })
      .catch((err) => { if (!cancelled) { setError(err.message); setLoading(false); } });
    return () => { cancelled = true; };
  }, []);

  const filterMap = {
    All: () => true,
    Image: (a) => (a.kind || a.mime_type || '').includes('image'),
    Video: (a) => (a.kind || a.mime_type || '').includes('video'),
    '3D':   (a) => /3d|model|gltf|glb/.test(a.kind || a.mime_type || ''),
    Audio: (a) => (a.kind || a.mime_type || '').includes('audio'),
  };

  const filtered = assets.filter(filterMap[filter] || (() => true));
  const filterCounts = Object.keys(filterMap).reduce((acc, f) => {
    acc[f] = assets.filter(filterMap[f]).length; return acc;
  }, {});

  return (
    <div className="aq-content">
      <div className="aq-content-inner" style={{ maxWidth: 1280 }}>
        <header style={{ marginBottom: 18 }}>
          <div className="aq-eyebrow"><span>Slate</span><span className="aq-sep">·</span><span>Asset library</span></div>
          <h1 style={{
            fontFamily: 'var(--aq-ff-display)', fontSize: 26, fontWeight: 500,
            letterSpacing: '-0.012em', color: 'var(--aq-text)', margin: '4px 0 4px',
          }}>Media library</h1>
          <p style={{ fontSize: 13, color: 'var(--aq-text-faint)', margin: 0 }}>
            All uploaded assets. {assets.length > 0 && <>{assets.length.toLocaleString()} item{assets.length === 1 ? '' : 's'}.</>}
          </p>
        </header>

        {loading && <div style={{ padding: 60, textAlign: 'center', color: 'var(--aq-text-faint)' }}>Loading assets…</div>}
        {error && (
          <div style={{
            padding: '10px 14px',
            background: 'color-mix(in srgb, var(--aq-danger) 12%, transparent)',
            border: '1px solid color-mix(in srgb, var(--aq-danger) 30%, transparent)',
            borderRadius: 6, color: 'var(--aq-danger)', fontSize: 12,
          }}>{error}</div>
        )}

        {!loading && !error && (
          <>
            <div className="x-filter-bar">
              <div className="x-filter-input"><Icon name="search" size={12} /><span>Search by name…</span></div>
              {Object.keys(filterMap).map((f) => (
                <button
                  key={f} className={`x-chip ${filter === f ? 'is-active' : ''}`}
                  onClick={() => setFilter(f)}
                >{f}<span className="x-chip-count">{filterCounts[f]}</span></button>
              ))}
              <div style={{ flex: 1 }} />
              <button className="x-btn"><Icon name="plus" size={12} />Upload</button>
            </div>

            {filtered.length === 0 ? (
              <div className="x-card" style={{ padding: '60px 24px', textAlign: 'center', marginTop: 14 }}>
                <div style={{ fontSize: 13, color: 'var(--aq-text-faint)' }}>
                  {assets.length === 0 ? 'No assets uploaded yet.' : 'No assets match this filter.'}
                </div>
              </div>
            ) : (
              <div className="x-media-split" style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 14, marginTop: 14, alignItems: 'flex-start' }}>
                <div className="x-media-grid">
                  {filtered.map((m) => {
                    const kind = m.kind || (m.mime_type || '').split('/')[0] || 'image';
                    const dur = ML_durationLabel(m.duration_seconds);
                    const dim = m.width && m.height ? `${m.width}×${m.height}` : '—';
                    return (
                      <div key={m.id} className={`x-media-card ${selected === m.id ? 'is-selected' : ''}`} onClick={() => setSelected(m.id)}>
                        <div className="x-media-thumb">
                          {m.url && /image/.test(m.mime_type || kind) ? (
                            <img className="x-media-thumb-img" src={m.url} alt={m.name || ''} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                          ) : (
                            <div className="x-media-thumb-img" style={{ background: ML_thumbBg(kind) }} />
                          )}
                          <span className="x-media-thumb-tag">{(kind || 'asset').toUpperCase()}</span>
                          {dur && <span className="x-media-thumb-dur">{dur}</span>}
                        </div>
                        <div className="x-media-name">{m.name || m.filename || (m.url || '').split('/').pop() || 'Untitled'}</div>
                        <div className="x-media-meta"><span>{dim}</span><span>{m.file_size ? `${Math.round(m.file_size / 1024)}KB` : ''}</span></div>
                      </div>
                    );
                  })}
                </div>

                {selected && (() => {
                  const m = assets.find((x) => x.id === selected);
                  if (!m) return null;
                  return (
                    <aside className="x-card x-media-detail">
                      <div className="x-media-detail-hero" style={{
                        background: m.url && /image/.test(m.mime_type || m.kind) ? `url(${m.url}) center/cover` : ML_thumbBg(m.kind),
                      }} />
                      <div className="x-media-detail-body">
                        <div className="x-eyebrow">Asset detail</div>
                        <h2 style={{
                          margin: '4px 0 12px', fontFamily: 'var(--aq-ff-display)',
                          fontSize: 15, fontWeight: 500, color: 'var(--aq-text)', wordBreak: 'break-all',
                        }}>{m.name || m.filename || 'Untitled'}</h2>
                        <div className="x-kv"><span className="x-k">Kind</span><span className="x-v"><b>{m.kind || m.mime_type || '—'}</b></span></div>
                        {m.width && m.height && <div className="x-kv"><span className="x-k">Dim</span><span className="x-v">{m.width}×{m.height}</span></div>}
                        {m.duration_seconds && <div className="x-kv"><span className="x-k">Duration</span><span className="x-v">{ML_durationLabel(m.duration_seconds)}</span></div>}
                        {m.file_size && <div className="x-kv"><span className="x-k">Size</span><span className="x-v">{Math.round(m.file_size / 1024)} KB</span></div>}
                        {m.created_at && <div className="x-kv"><span className="x-k">Added</span><span className="x-v">{new Date(m.created_at).toLocaleDateString()}</span></div>}
                        <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
                          <button className="x-btn">Insert</button>
                          <button className="x-btn ghost">Replace</button>
                          <button className="x-btn ghost is-danger" style={{ marginLeft: 'auto' }}>Delete</button>
                        </div>
                      </div>
                    </aside>
                  );
                })()}
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

window.MediaLibraryScreen = MediaLibraryScreen;