// Mini live-output previews for each AIDD agent.
// Each preview is a stylised, abstract artifact — not a screenshot.

const AgentPreview = ({ kind, color }) => {
  const View = previews[kind];
  if (!View) return null;
  return (
    <div className="rounded-lg border border-token overflow-hidden"
         style={{background: 'var(--bg)'}}>
      <View color={color}/>
    </div>
  );
};

const Mono = ({ children, c }) => (
  <span style={{fontFamily: 'Geist Mono', fontSize: 11.5, color: c || 'var(--muted)'}}>
    {children}
  </span>
);

const previews = {
  // 01 — Requirements
  requirements: ({ color }) => (
    <div className="p-4 grid grid-cols-2 gap-3 text-[12px]" style={{minHeight: 180}}>
      <div className="space-y-1.5">
        <Mono>PRD.parsed</Mono>
        <div className="rounded p-2.5 text-[11.5px] leading-relaxed border border-token" style={{background: 'var(--surface)'}}>
          User wants to <span style={{color}}>track invoices</span> and trigger a notification when one is overdue by 7 days.
        </div>
        <Mono>entities.detected</Mono>
        <div className="flex flex-wrap gap-1.5">
          {['Invoice', 'User', 'Notification', 'Vendor'].map((e) => (
            <span key={e} className="px-2 py-0.5 rounded font-mono text-[10.5px]"
                  style={{background: color + '12', color, border: `1px solid ${color}30`}}>
              {e}
            </span>
          ))}
        </div>
      </div>
      <div className="space-y-1.5">
        <Mono>jira.stories — 7 generated</Mono>
        {[
          { id: 'WBV-101', t: 'Invoice list view', p: 'M' },
          { id: 'WBV-102', t: 'Overdue detection job', p: 'L' },
          { id: 'WBV-103', t: 'Email + in-app alert', p: 'S' },
          { id: 'WBV-104', t: 'Vendor profile page', p: 'M' },
        ].map((s) => (
          <div key={s.id} className="flex items-center gap-2 px-2 py-1.5 rounded border border-token text-[11px]"
               style={{background: 'var(--surface)'}}>
            <span style={{fontFamily: 'Geist Mono', color, fontWeight: 600}}>{s.id}</span>
            <span className="flex-1 truncate">{s.t}</span>
            <span className="font-mono text-[9.5px] px-1.5 py-0.5 rounded"
                  style={{background: 'var(--bg)', color: 'var(--muted)', border: '1px solid var(--border)'}}>
              {s.p}
            </span>
          </div>
        ))}
      </div>
    </div>
  ),

  // 02 — Architecture
  architecture: ({ color }) => (
    <div className="p-4" style={{minHeight: 180}}>
      <Mono>system.diagram</Mono>
      <svg viewBox="0 0 360 130" className="w-full mt-2">
        <defs>
          <marker id="ar-arr" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <path d="M0,0 L6,3 L0,6 z" fill="var(--muted)"/>
          </marker>
        </defs>
        {/* Web */}
        <g transform="translate(20 20)">
          <rect width="80" height="36" rx="6" fill="var(--surface)" stroke={color}/>
          <text x="40" y="16" fontSize="10" fontFamily="Geist Mono" fontWeight="600" fill={color} textAnchor="middle">Next.js</text>
          <text x="40" y="28" fontSize="8" fontFamily="Geist Mono" fill="var(--muted)" textAnchor="middle">edge · ssr</text>
        </g>
        <g transform="translate(140 20)">
          <rect width="80" height="36" rx="6" fill="var(--surface)" stroke="var(--border)"/>
          <text x="40" y="16" fontSize="10" fontFamily="Geist Mono" fontWeight="600" fill="var(--text)" textAnchor="middle">API</text>
          <text x="40" y="28" fontSize="8" fontFamily="Geist Mono" fill="var(--muted)" textAnchor="middle">tRPC · Node 20</text>
        </g>
        <g transform="translate(260 20)">
          <rect width="80" height="36" rx="6" fill="var(--surface)" stroke="var(--border)"/>
          <text x="40" y="16" fontSize="10" fontFamily="Geist Mono" fontWeight="600" fill="var(--text)" textAnchor="middle">Postgres</text>
          <text x="40" y="28" fontSize="8" fontFamily="Geist Mono" fill="var(--muted)" textAnchor="middle">RLS · pgvector</text>
        </g>
        <line x1="100" y1="38" x2="140" y2="38" stroke="var(--muted)" markerEnd="url(#ar-arr)"/>
        <line x1="220" y1="38" x2="260" y2="38" stroke="var(--muted)" markerEnd="url(#ar-arr)"/>
        <g transform="translate(80 76)">
          <rect width="80" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" strokeDasharray="3 3"/>
          <text x="40" y="16" fontSize="10" fontFamily="Geist Mono" fontWeight="600" fill="var(--text)" textAnchor="middle">Worker</text>
          <text x="40" y="28" fontSize="8" fontFamily="Geist Mono" fill="var(--muted)" textAnchor="middle">cron · queue</text>
        </g>
        <g transform="translate(200 76)">
          <rect width="80" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" strokeDasharray="3 3"/>
          <text x="40" y="16" fontSize="10" fontFamily="Geist Mono" fontWeight="600" fill="var(--text)" textAnchor="middle">LLM Gateway</text>
          <text x="40" y="28" fontSize="8" fontFamily="Geist Mono" fill="var(--muted)" textAnchor="middle">cache · eval</text>
        </g>
        <line x1="180" y1="56" x2="180" y2="76" stroke="var(--muted)" strokeDasharray="2 2"/>
        <line x1="240" y1="56" x2="240" y2="76" stroke="var(--muted)" strokeDasharray="2 2"/>
      </svg>
      <div className="flex flex-wrap gap-1.5 mt-2">
        {['Vercel', 'Supabase', 'Upstash', 'Stripe', 'Resend'].map((t) => (
          <span key={t} className="px-2 py-0.5 rounded font-mono text-[10.5px] border border-token text-muted">
            {t}
          </span>
        ))}
      </div>
    </div>
  ),

  // 03 — Design
  design: ({ color }) => (
    <div className="p-4 grid grid-cols-3 gap-3" style={{minHeight: 180}}>
      {[
        { l: 'Dashboard', x1: 60, x2: 30, x3: 80 },
        { l: 'Detail',    x1: 80, x2: 50, x3: 60 },
        { l: 'Settings',  x1: 40, x2: 70, x3: 50 },
      ].map((s, i) => (
        <div key={i} className="rounded-md border border-token overflow-hidden" style={{background: 'var(--surface)'}}>
          <div className="h-5 flex items-center px-1.5 gap-1" style={{background: 'var(--bg)'}}>
            <span className="w-1.5 h-1.5 rounded-full" style={{background: '#E63329'}}/>
            <span className="w-1.5 h-1.5 rounded-full" style={{background: '#F5C518'}}/>
            <span className="w-1.5 h-1.5 rounded-full" style={{background: '#14A04A'}}/>
          </div>
          <div className="p-2 space-y-1.5">
            <div className="h-1.5 rounded" style={{background: color, width: `${s.x1}%`}}/>
            <div className="h-1 rounded" style={{background: 'var(--border)', width: `${s.x2 + 20}%`}}/>
            <div className="h-1 rounded" style={{background: 'var(--border)', width: `${s.x3}%`}}/>
            <div className="grid grid-cols-2 gap-1 mt-2">
              <div className="h-7 rounded" style={{background: color, opacity: 0.12}}/>
              <div className="h-7 rounded" style={{background: 'var(--border)'}}/>
            </div>
            <div className="h-5 rounded mt-1" style={{background: color}}/>
          </div>
          <div className="px-2 py-1 border-t border-token font-mono text-[9.5px] uppercase tracking-[0.12em] text-muted">
            {s.l}
          </div>
        </div>
      ))}
      <div className="col-span-3 flex items-center gap-3 pt-1 border-t border-token mt-1">
        <Mono c={color}>figma.kit · 24 components</Mono>
        <span className="flex gap-1 ml-auto">
          {['#E63329', '#F5C518', '#14A04A', '#1B7BD6'].map((c) => (
            <span key={c} className="w-3.5 h-3.5 rounded-full border" style={{background: c, borderColor: 'var(--border)'}}/>
          ))}
        </span>
      </div>
    </div>
  ),

  // 04 — Tech Lead
  techlead: ({ color }) => (
    <div className="p-4" style={{minHeight: 180}}>
      <Mono>impl.plan · sprint 14</Mono>
      <div className="mt-2 space-y-1.5">
        {[
          { id: 'WBV-101', t: 'Invoice list view',         eta: '6h',  dep: '—',     p: 0 },
          { id: 'WBV-102', t: 'Overdue detection cron',    eta: '4h',  dep: 'WBV-101', p: 1 },
          { id: 'WBV-103', t: 'Notification dispatcher',   eta: '3h',  dep: 'WBV-102', p: 2 },
          { id: 'WBV-104', t: 'Vendor profile page',       eta: '5h',  dep: 'WBV-101', p: 1 },
          { id: 'WBV-105', t: 'Audit log writer',          eta: '2h',  dep: '—',     p: 0 },
        ].map((s, i) => (
          <div key={s.id} className="flex items-center gap-2 text-[11.5px]">
            <span style={{fontFamily: 'Geist Mono', color, fontWeight: 600, width: 70}}>{s.id}</span>
            <span className="flex-1 truncate">{s.t}</span>
            <span className="font-mono text-[10px] text-muted" style={{width: 70}}>dep: {s.dep}</span>
            <div className="w-16 h-1.5 rounded-full overflow-hidden" style={{background: 'var(--border)'}}>
              <div className="h-full rounded-full" style={{
                background: color,
                width: `${[80, 60, 30, 50, 90][i]}%`,
              }}/>
            </div>
            <span className="font-mono text-[10px] text-muted" style={{width: 30, textAlign: 'right'}}>{s.eta}</span>
          </div>
        ))}
      </div>
      <div className="mt-3 flex items-center gap-3 text-[11px]">
        <Mono>critical path</Mono>
        <span style={{fontFamily: 'Geist Mono', color, fontSize: 11}}>
          101 → 102 → 103
        </span>
        <span className="ml-auto" style={{fontFamily: 'Geist Mono', color: 'var(--muted)', fontSize: 11}}>
          total · 20h
        </span>
      </div>
    </div>
  ),

  // 05 — Coding
  coding: ({ color }) => (
    <div className="text-[11.5px]" style={{minHeight: 180, fontFamily: 'Geist Mono'}}>
      <div className="flex items-center gap-2 px-3 py-1.5 border-b border-token text-[10.5px] uppercase tracking-[0.12em] text-muted">
        <span>invoices.service.ts</span>
        <span className="ml-auto" style={{color}}>+24 −6</span>
      </div>
      <div className="px-3 py-2.5 leading-[1.7] space-y-0">
        <div><span style={{color: 'var(--muted)'}}>1</span>  <span style={{color: '#1B7BD6'}}>export async function</span> <span style={{color}}>findOverdue</span>() {'{'}</div>
        <div><span style={{color: 'var(--muted)'}}>2</span>  &nbsp;&nbsp;<span style={{color: '#1B7BD6'}}>const</span> cutoff = <span style={{color: '#14A04A'}}>subDays</span>(<span style={{color: '#1B7BD6'}}>new</span> Date(), 7);</div>
        <div style={{background: '#14A04A14'}}><span style={{color: '#14A04A'}}>+</span> <span style={{color: 'var(--muted)'}}>3</span>  &nbsp;&nbsp;<span style={{color: '#1B7BD6'}}>return</span> db.invoice.findMany({'{'}</div>
        <div style={{background: '#14A04A14'}}><span style={{color: '#14A04A'}}>+</span> <span style={{color: 'var(--muted)'}}>4</span>  &nbsp;&nbsp;&nbsp;&nbsp;where: {'{'} dueDate: {'{'} lt: cutoff {'}'}, status: <span style={{color: '#F5C518'}}>'OPEN'</span> {'}'},</div>
        <div style={{background: '#14A04A14'}}><span style={{color: '#14A04A'}}>+</span> <span style={{color: 'var(--muted)'}}>5</span>  &nbsp;&nbsp;&nbsp;&nbsp;include: {'{'} vendor: <span style={{color: '#1B7BD6'}}>true</span> {'}'},</div>
        <div style={{background: '#14A04A14'}}><span style={{color: '#14A04A'}}>+</span> <span style={{color: 'var(--muted)'}}>6</span>  &nbsp;&nbsp;{'}'});</div>
        <div><span style={{color: 'var(--muted)'}}>7</span>  {'}'}</div>
      </div>
      <div className="flex items-center gap-3 px-3 py-2 border-t border-token" style={{background: 'var(--surface)'}}>
        <Mono c={color}>● PR #847 — opened</Mono>
        <Mono>tests · 12/12</Mono>
        <Mono>lint · clean</Mono>
        <Mono c="#14A04A">build · ✓</Mono>
      </div>
    </div>
  ),

  // 06 — Code Review
  review: ({ color }) => (
    <div className="p-4 space-y-2" style={{minHeight: 180}}>
      <div className="flex items-center gap-2">
        <Mono c={color}>PR #847</Mono>
        <Mono>· feat: overdue invoices</Mono>
        <span className="ml-auto px-1.5 py-0.5 rounded font-mono text-[10px]"
              style={{background: '#14A04A12', color: '#14A04A', border: '1px solid #14A04A40'}}>
          APPROVED
        </span>
      </div>
      <div className="space-y-1.5">
        {[
          { sev: 'pass', t: 'Architecture standards · 12/12 checks pass' },
          { sev: 'warn', t: 'Add @ts-expect-error context in line 42' },
          { sev: 'pass', t: 'Test coverage · 94% on changed lines' },
          { sev: 'pass', t: 'No N+1 queries detected' },
          { sev: 'info', t: 'Suggestion: extract cutoff calc into util' },
        ].map((c, i) => {
          const dot = c.sev === 'pass' ? '#14A04A' : c.sev === 'warn' ? '#F5C518' : '#1B7BD6';
          return (
            <div key={i} className="flex items-start gap-2 px-2.5 py-2 rounded border border-token text-[11.5px]"
                 style={{background: 'var(--surface)'}}>
              <span className="mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0" style={{background: dot}}/>
              <span>{c.t}</span>
            </div>
          );
        })}
      </div>
    </div>
  ),

  // 07 — Testing
  testing: ({ color }) => (
    <div className="p-4 grid grid-cols-2 gap-4" style={{minHeight: 180}}>
      <div>
        <Mono>test.results</Mono>
        <div className="mt-2 space-y-1.5">
          {[
            { l: 'Functional', pass: 28, fail: 0 },
            { l: 'Regression', pass: 142, fail: 1 },
            { l: 'Integration', pass: 18, fail: 0 },
            { l: 'E2E (Playwright)', pass: 9, fail: 0 },
          ].map((r) => {
            const total = r.pass + r.fail;
            const pct = (r.pass / total) * 100;
            return (
              <div key={r.l}>
                <div className="flex justify-between text-[11px]">
                  <span>{r.l}</span>
                  <span style={{fontFamily: 'Geist Mono', color: r.fail ? '#F5C518' : '#14A04A'}}>
                    {r.pass}/{total}
                  </span>
                </div>
                <div className="h-1.5 rounded-full mt-1 overflow-hidden flex" style={{background: 'var(--border)'}}>
                  <div style={{background: '#14A04A', width: `${pct}%`}}/>
                  {r.fail > 0 && <div style={{background: '#F5C518', width: `${100 - pct}%`}}/>}
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <div>
        <Mono>defects · 1 open</Mono>
        <div className="mt-2 rounded border border-token p-2.5 text-[11px] space-y-1"
             style={{background: 'var(--surface)'}}>
          <div className="flex items-center gap-1.5">
            <span className="w-1.5 h-1.5 rounded-full" style={{background: '#F5C518'}}/>
            <span style={{fontFamily: 'Geist Mono', color}}>BUG-2401</span>
            <span className="ml-auto font-mono text-[9.5px] text-muted">P2</span>
          </div>
          <div className="text-[11px] leading-relaxed">
            Notification fires twice when invoice is reopened then re-overdue.
          </div>
          <div className="font-mono text-[10px] text-muted pt-1 border-t border-token">
            assigned · coding-agent
          </div>
        </div>
        <div className="mt-3 flex items-center gap-2">
          <Mono>coverage</Mono>
          <span style={{fontFamily: 'Geist Mono', color: '#14A04A', fontSize: 14, fontWeight: 600}}>
            91.4%
          </span>
        </div>
      </div>
    </div>
  ),

  // 08 — Deployment
  deployment: ({ color }) => (
    <div className="p-4" style={{minHeight: 180}}>
      <div className="flex items-center gap-2">
        <Mono c={color}>release · v1.14.0</Mono>
        <span className="ml-auto font-mono text-[10.5px] px-2 py-0.5 rounded"
              style={{background: '#14A04A12', color: '#14A04A', border: '1px solid #14A04A40'}}>
          ● LIVE
        </span>
      </div>
      <div className="mt-3 space-y-1.5">
        {[
          { l: 'build · production',    s: 'done', t: '0:42' },
          { l: 'image · pushed',        s: 'done', t: '0:18' },
          { l: 'canary · 5% traffic',   s: 'done', t: '0:30' },
          { l: 'health · green 4/4',    s: 'done', t: '0:15' },
          { l: 'rollout · 100%',        s: 'done', t: '0:45' },
          { l: 'monitor · attached',    s: 'live', t: '—'    },
        ].map((step, i) => (
          <div key={i} className="flex items-center gap-2 text-[11.5px]">
            <span className="w-1.5 h-1.5 rounded-full"
                  style={{background: step.s === 'live' ? color : '#14A04A'}}/>
            <span className="flex-1">{step.l}</span>
            <span className="font-mono text-[10px] text-muted">{step.t}</span>
          </div>
        ))}
      </div>
      <div className="mt-4 grid grid-cols-3 gap-2 pt-3 border-t border-token">
        <div>
          <div className="font-mono text-[9.5px] uppercase tracking-[0.14em] text-muted">P95</div>
          <div className="text-[13px]" style={{fontFamily: 'Geist Mono', color}}>184ms</div>
        </div>
        <div>
          <div className="font-mono text-[9.5px] uppercase tracking-[0.14em] text-muted">Error rate</div>
          <div className="text-[13px]" style={{fontFamily: 'Geist Mono', color: '#14A04A'}}>0.02%</div>
        </div>
        <div>
          <div className="font-mono text-[9.5px] uppercase tracking-[0.14em] text-muted">Rollback ready</div>
          <div className="text-[13px]" style={{fontFamily: 'Geist Mono'}}>1-click</div>
        </div>
      </div>
    </div>
  ),
};

window.AgentPreview = AgentPreview;
