/* Mellon — Data infrastructure for ML (Garuda-style data loader) */

function MellonPage() {
  const [tab, setTab] = React.useState('overview');

  return (
    <div className="page-content">
      <div className="page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <span className="badge badge-accent">DATA INFRASTRUCTURE</span>
            <span className="badge badge-neutral">DROP-IN</span>
          </div>
          <h1 className="page-title">Mellon</h1>
          <p className="page-subtitle">
            Zero-wrangling video data infrastructure for ML. Hardware decode, zero-copy, no pipeline changes.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-secondary"><Icon.Book size={14} /> Integration guide</button>
          <button className="btn btn-primary"><Icon.Plus size={14} /> Connect dataset</button>
        </div>
      </div>

      {/* Hero stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 24 }}>
        {[
          { label: 'Faster training', val: '4.0×', sub: '9.9d → 39.5d, SmolVLM2', accent: true },
          { label: 'Lower data prep', val: '4.4×', sub: '7.7s vs 33.6s @ 256²' },
          { label: 'Faster inference', val: '4.3×', sub: '207 vs 48 fps @ 1080p' },
        ].map((s, i) => (
          <div key={i} className="card card-padded">
            <div className="eyebrow">{s.label}</div>
            <div className="mono" style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 8, color: s.accent ? 'var(--accent)' : 'var(--text-primary)' }}>
              {s.val}
            </div>
            <div style={{ marginTop: 6, fontSize: 11, color: 'var(--text-tertiary)' }}>{s.sub}</div>
          </div>
        ))}
      </div>

      <div style={{ borderBottom: '1px solid var(--border-default)', marginBottom: 24, display: 'flex', gap: 4 }}>
        {[
          { id: 'overview', label: 'Overview' },
          { id: 'datasets', label: 'Datasets · 4' },
          { id: 'pipelines', label: 'Pipelines · 7' },
        ].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)}
            style={{
              padding: '12px 14px', fontSize: 13,
              color: tab === t.id ? 'var(--text-primary)' : 'var(--text-secondary)',
              fontWeight: tab === t.id ? 500 : 400,
              borderBottom: `2px solid ${tab === t.id ? 'var(--accent)' : 'transparent'}`,
              marginBottom: -1, whiteSpace: 'nowrap',
            }}>{t.label}</button>
        ))}
      </div>

      {tab === 'overview' && (
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 20, alignItems: 'start' }}>
          <div className="card" style={{ overflow: 'hidden' }}>
            <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span className="eyebrow">Drop-in DataLoader</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>python</span>
            </div>
            <pre style={{
              padding: 18, margin: 0, background: 'var(--bg-code)',
              fontFamily: 'var(--font-mono)', fontSize: 12,
              color: 'var(--text-primary)', lineHeight: 1.7, overflowX: 'auto',
            }}>
{`# Before — torchvision
from torch.utils.data import DataLoader
loader = DataLoader(VideoDataset(...))

# After — Mellon (no pipeline changes)
from mellon import MellonLoader
loader = MellonLoader(
    dataset="surveillance-jan-2026",
    batch_size=32,
    decode="hardware",      # NVDEC zero-copy
    sample="uniform",
    transform=clip_transform,
)

for batch in loader:
    out = model(batch)      # 4× faster, same API`}
            </pre>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="card card-padded">
              <div className="eyebrow" style={{ marginBottom: 12 }}>Active pipelines</div>
              {[
                { name: 'smolvlm2-pretraining', tput: '7.2 GB/s', status: 'streaming' },
                { name: 'detection-finetune-yolov8', tput: '4.8 GB/s', status: 'streaming' },
                { name: 'caption-eval', tput: '—', status: 'idle' },
              ].map((p, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderTop: i > 0 ? '1px solid var(--border-subtle)' : 'none' }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: p.status === 'streaming' ? 'var(--positive)' : 'var(--text-tertiary)' }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="mono" style={{ fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.name}</div>
                  </div>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{p.tput}</span>
                </div>
              ))}
            </div>
            <div className="card card-padded">
              <div className="eyebrow" style={{ marginBottom: 8 }}>Throughput · last hour</div>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 80 }}>
                {Array.from({ length: 24 }).map((_, i) => (
                  <div key={i} style={{
                    flex: 1, height: `${20 + Math.sin(i * 0.6) * 30 + 30}%`,
                    background: i > 19 ? 'var(--accent)' : 'var(--accent-subtle)', borderRadius: 2,
                  }} />
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === 'datasets' && (
        <div className="card">
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 110px 100px 100px 90px 30px',
            gap: 12, padding: '12px 20px',
            borderBottom: '1px solid var(--border-default)', background: 'var(--bg-inset)',
          }}>
            {['Dataset', 'Hours', 'Samples', 'Format', 'Status', ''].map((h, i) => (
              <span key={i} className="eyebrow" style={{ fontSize: 10 }}>{h}</span>
            ))}
          </div>
          {[
            { name: 'surveillance-jan-2026', hrs: '312.4', samples: '4.2M', format: '.dwarf', status: 'ready' },
            { name: 'product-demo-archive', hrs: '24.1', samples: '288K', format: '.mp4', status: 'ready' },
            { name: 'dashcam-fleet-q1', hrs: '988.0', samples: '11.2M', format: '.dwarf', status: 'indexing', progress: 0.62 },
            { name: 'ugc-moderation-pool', hrs: '1,820', samples: '21.8M', format: '.mp4', status: 'ready' },
          ].map((d, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1fr 110px 100px 100px 90px 30px',
              gap: 12, padding: '14px 20px', alignItems: 'center',
              borderBottom: i < 3 ? '1px solid var(--border-subtle)' : 'none',
            }}>
              <span style={{ fontSize: 13, fontFamily: 'var(--font-mono)', color: 'var(--text-primary)' }}>{d.name}</span>
              <span className="mono" style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{d.hrs}</span>
              <span className="mono" style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{d.samples}</span>
              <span className="badge badge-neutral">{d.format}</span>
              <StatusPill status={d.status} progress={d.progress} />
              <Icon.More size={14} color="var(--text-tertiary)" />
            </div>
          ))}
        </div>
      )}

      {tab === 'pipelines' && (
        <div style={{ padding: '64px 32px', textAlign: 'center', maxWidth: 460, margin: '0 auto' }}>
          <div style={{ width: 56, height: 56, borderRadius: 12, margin: '0 auto 20px', background: 'var(--bg-inset)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon.Layers size={24} color="var(--text-tertiary)" />
          </div>
          <h3 style={{ fontSize: 16, fontWeight: 600, margin: '0 0 6px' }}>Pipeline view coming soon</h3>
          <p style={{ fontSize: 13, color: 'var(--text-secondary)' }}>Visualize your training/inference pipelines and trace decode→model latency end-to-end.</p>
        </div>
      )}
    </div>
  );
}

/* Anvesha — Agentic search */

function AnveshaPage() {
  const [query, setQuery] = React.useState('Show me every time a person crossed the perimeter after sunset, then linger near the gate for >30s');
  const [running, setRunning] = React.useState(false);
  const [done, setDone] = React.useState(false);

  const run = () => {
    setRunning(true); setDone(false);
    setTimeout(() => { setRunning(false); setDone(true); }, 1800);
  };

  const trace = [
    { step: 1, agent: 'Planner', action: 'Decompose query into 3 sub-tasks', detail: 'detect persons → temporal filter → spatial dwell-time', t: '0.4s' },
    { step: 2, agent: 'Retriever', action: 'Search Marengo embeddings', detail: 'index: surveillance-jan-2026 · 1,284 videos', t: '1.2s' },
    { step: 3, agent: 'Filter', action: 'Apply astronomical sunset filter', detail: 'lat/lon: 37.77, -122.42 · jan 2026', t: '0.2s' },
    { step: 4, agent: 'Reasoner', action: 'Compute dwell time near gate region', detail: 'bbox tracking + IoU > 0.4', t: '3.1s' },
    { step: 5, agent: 'Verifier', action: 'Cross-reference with door-sensor logs', detail: 'no entry events — strong signal', t: '0.9s' },
  ];

  return (
    <div className="page-content">
      <div className="page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <span className="badge badge-accent">APPLICATION INFRASTRUCTURE</span>
            <span className="badge badge-neutral">AGENTIC</span>
          </div>
          <h1 className="page-title">Anvesha</h1>
          <p className="page-subtitle">
            Agentic video search and curation with multi-hop reasoning. Bring your queries — get a bespoke agent.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-secondary"><Icon.Book size={14} /> Walkthrough</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 24 }}>
        {[
          { label: 'R@1 BodycamBench', val: '50%', sub: 'vs 19% baseline', accent: true },
          { label: 'R@1 agentic queries', val: '61%', sub: 'vs 9% baseline', accent: true },
          { label: 'Time to custom agent', val: '< 2 min', sub: 'one index, any app' },
        ].map((s, i) => (
          <div key={i} className="card card-padded">
            <div className="eyebrow">{s.label}</div>
            <div className="mono" style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 8, color: s.accent ? 'var(--accent)' : 'var(--text-primary)' }}>
              {s.val}
            </div>
            <div style={{ marginTop: 6, fontSize: 11, color: 'var(--text-tertiary)' }}>{s.sub}</div>
          </div>
        ))}
      </div>

      {/* Query box */}
      <div className="card" style={{ padding: 20, marginBottom: 20 }}>
        <label className="label">Multi-hop natural-language query</label>
        <textarea className="input" rows={3} value={query}
          onChange={(e) => setQuery(e.target.value)}
          style={{ fontFamily: 'var(--font-mono)', fontSize: 13, lineHeight: 1.55, resize: 'vertical' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12, flexWrap: 'wrap', gap: 8 }}>
          <div style={{ display: 'flex', gap: 8, fontSize: 12, color: 'var(--text-tertiary)', flexWrap: 'wrap' }}>
            <span className="badge badge-neutral">index: surveillance-jan-2026</span>
            <span className="badge badge-neutral">multi-hop · 5 agents</span>
          </div>
          <button className="btn btn-primary" onClick={run} disabled={running}>
            {running ? <span className="spinner" style={{ borderTopColor: 'white' }} /> : <>Run agent <Icon.ArrowRight size={13} /></>}
          </button>
        </div>
      </div>

      {/* Agent trace + results */}
      {(running || done) && (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 20, alignItems: 'start' }}>
          <div className="card">
            <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span className="eyebrow">Agent trace</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>{running ? 'running…' : 'complete · 5.8s'}</span>
            </div>
            <div style={{ padding: '12px 0' }}>
              {trace.map((t, i) => {
                const showStep = !running || i < (Date.now() / 400) % 6;
                return (
                  <div key={i} style={{ padding: '12px 18px', display: 'flex', gap: 12, opacity: showStep ? 1 : 0.4, transition: 'opacity 0.3s' }}>
                    <div style={{
                      width: 22, height: 22, borderRadius: '50%',
                      background: 'var(--accent-subtle)', color: 'var(--accent-text)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 11, fontWeight: 600, flexShrink: 0, fontFamily: 'var(--font-mono)',
                    }}>{t.step}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, marginBottom: 2 }}>
                        <span style={{ fontSize: 13, fontWeight: 500 }}>{t.agent}</span>
                        <span className="mono" style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{t.t}</span>
                      </div>
                      <div style={{ fontSize: 12.5, color: 'var(--text-secondary)' }}>{t.action}</div>
                      <div className="mono" style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 3 }}>{t.detail}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {done && (
            <div className="card">
              <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span className="eyebrow">Results · 4 matches</span>
                <button className="btn btn-ghost btn-sm"><Icon.Download size={12} /> Export</button>
              </div>
              <div>
                {[
                  { v: 'cam-04 / east-perimeter / 2026-01-15', t: '21:42:16', dwell: '47s', score: 0.91 },
                  { v: 'cam-12 / north-gate / 2026-01-18', t: '22:08:53', dwell: '38s', score: 0.87 },
                  { v: 'cam-04 / east-perimeter / 2026-01-22', t: '20:14:09', dwell: '32s', score: 0.82 },
                  { v: 'cam-07 / parking-lot / 2026-01-26', t: '23:31:42', dwell: '54s', score: 0.78 },
                ].map((r, i) => (
                  <div key={i} style={{ padding: '12px 18px', borderTop: i > 0 ? '1px solid var(--border-subtle)' : 'none', display: 'flex', gap: 12, alignItems: 'center' }}>
                    <div style={{
                      width: 80, aspectRatio: '16 / 9', flexShrink: 0,
                      background: 'linear-gradient(135deg, #1e1e1c, #3c3a36)',
                      borderRadius: 4, position: 'relative', overflow: 'hidden',
                    }}>
                      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 60% 50%, rgba(255, 200, 150, 0.18), transparent 50%)' }} />
                      <span className="mono" style={{ position: 'absolute', bottom: 3, right: 3, fontSize: 9, color: 'white', background: 'rgba(0,0,0,0.6)', padding: '1px 4px', borderRadius: 2 }}>{r.t}</span>
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="mono" style={{ fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.v}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 2 }}>dwell {r.dwell} · timestamp {r.t}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div className="mono" style={{ fontSize: 13, color: 'var(--accent)', fontWeight: 500 }}>{r.score.toFixed(2)}</div>
                      <div style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>score</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {!running && !done && (
        <div style={{ padding: '40px 20px', textAlign: 'center', color: 'var(--text-tertiary)', fontSize: 13 }}>
          <Icon.Search size={24} color="var(--text-tertiary)" />
          <div style={{ marginTop: 10 }}>Run an agentic query to see the trace and matches.</div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { MellonPage, AnveshaPage });
