// Stylized HTML recreations of each project's UI — for cards & detail views.
// Each mock is ~fixed aspect; scales via CSS.

const Frame = ({ children, chrome = 'browser', title, accent = '#4a1d96' }) => (
  <div className="mock-frame" data-chrome={chrome} style={{'--mock-accent': accent}}>
    <div className="mock-chrome">
      {chrome === 'browser' && (
        <>
          <span className="dot" style={{background:'#ff5f57'}}/>
          <span className="dot" style={{background:'#febc2e'}}/>
          <span className="dot" style={{background:'#28c840'}}/>
          <div className="url">{title}</div>
        </>
      )}
      {chrome === 'app' && <div className="app-title">{title}</div>}
    </div>
    <div className="mock-body">{children}</div>
  </div>
);

/* ───────── Frontier AI ───────── */
// Fullscreen fog — 5 drifting colored blobs, no orbit, no mask.
// Ported from frontier-next AmbientOrb.tsx (fullscreen mode).
const FrontierOrb = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const c = ref.current; if (!c) return;
    const ctx = c.getContext('2d');
    // Five blobs — one per specialist — so the fog encodes the cast.
    const colors = ['#8000FF', '#FF0057', '#00DCA5', '#FF9400', '#2B8BEA'];
    const basePositions = [
      [-0.28, -0.22], [ 0.30, -0.26],
      [-0.24,  0.28], [ 0.26,  0.22],
      [ 0.00,  0.02],
    ];
    let raf, t0 = performance.now();
    function sync() {
      const r = c.getBoundingClientRect();
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      c.width = Math.max(1, Math.round(r.width * dpr));
      c.height = Math.max(1, Math.round(r.height * dpr));
    }
    sync();
    const ro = new ResizeObserver(sync); ro.observe(c);
    function loop() {
      if (c.offsetParent === null) { raf = requestAnimationFrame(loop); return; }
      const t = (performance.now() - t0) * 0.001;
      const W = c.width, H = c.height, cx = W/2, cy = H/2, dim = Math.min(W, H);
      ctx.clearRect(0,0,W,H);
      for (let i = 0; i < colors.length; i++) {
        const base = basePositions[i];
        const driftX = Math.sin(t * 0.18 + i * 1.37) * 0.10;
        const driftY = Math.cos(t * 0.14 + i * 0.73) * 0.10;
        const bx = cx + (base[0] + driftX) * dim;
        const by = cy + (base[1] + driftY) * dim;
        const r  = dim * (0.36 + 0.05 * Math.sin(t * 0.6 + i));
        const g = ctx.createRadialGradient(bx, by, 0, bx, by, r);
        g.addColorStop(0,    colors[i] + '9e');
        g.addColorStop(0.32, colors[i] + '6a');
        g.addColorStop(0.6,  colors[i] + '2e');
        g.addColorStop(0.85, colors[i] + '12');
        g.addColorStop(1,    colors[i] + '00');
        ctx.fillStyle = g;
        ctx.beginPath(); ctx.arc(bx, by, r, 0, Math.PI*2); ctx.fill();
      }
      raf = requestAnimationFrame(loop);
    }
    loop();
    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
  }, []);
  return <canvas ref={ref} className="fn-fog-canvas"/>;
};

/* Port of frontier-next active call — screen share + annotated artifact on left,
   Cybersecurity (Charon) chat on right. "Episode 03". */

const MockFrontier = () => (
  <Frame chrome="browser" title="frontier.lokithor.org — active call" accent="#C4602F">
    <img className="fig-img" src="assets/fig-frontier.png" alt="Frontier AI reconstructed interface" />
  </Frame>
);

/* Port of /private/tmp/key-dialog-preview.html — W1 + N1 only.
   Styled in .sm- namespace so it doesn't collide with anything else. */
const MockSecrets = () => (
  <Frame chrome="browser" title="secrets-manager · key dialog preview" accent="#7c3aed">
    <img className="fig-img" src="assets/fig-secrets.png" alt="Secrets manager reconstructed interface" />
  </Frame>
);

/* ───────── UltraViolet Code ───────── */
const MockUVCode = () => (
  <Frame chrome="app" title="UltraViolet Code" accent="#b8965a">
    <div className="uv-inner">
      <div className="uv-top">
        <div><span className="uv-brand">ULTRAVIOLET CODE</span> <i className="uv-sub">NYU Langone Health</i></div>
        <div className="uv-enterprise">ENTERPRISE INSTALLER</div>
      </div>
      <div className="uv-stepper">
        {[0,1,2,3,4,5,6,7].map(i => <span key={i} className={"uv-step " + (i<3?'done':i===3?'cur':'')}/>)}
      </div>
      <div className="uv-body">
        <div className="uv-num">03.</div>
        <h2 className="uv-h">Choose Your Path</h2>
        <div className="uv-rule"/>
        <div className="uv-prompt"><i>Select an operation to begin</i></div>
        <div className="uv-cards">
          {[['⬡','Install','Deploy AI coding agents to your environment'],
            ['✦','Update Configuration','Modify settings for existing installations'],
            ['◈','Modify Models','Add or remove AI models from your suite']].map(([g,t,d])=>(
            <div className="uv-card" key={t}>
              <div className="uv-card-glyph">{g}</div>
              <div className="uv-card-t">{t}</div>
              <div className="uv-card-d"><i>{d}</i></div>
            </div>
          ))}
        </div>
        <div className="uv-foot">
          <span className="uv-prev">← <i>Previous</i></span>
        </div>
        <div className="uv-divider"/>
        <div className="uv-tagline">ULTRAVIOLET CODE · NYU LANGONE HEALTH · ENTERPRISE AI PLATFORM</div>
      </div>
    </div>
  </Frame>
);

/* ───────── Lockout Investigator ───────── */
const MockLockout = () => (
  <Frame chrome="browser" title="lockout-investigator · analysis" accent="#6d28d9">
    <img className="fig-img fig-img--fit" src="assets/fig-lockout.png?v=2" alt="Lockout investigator reconstructed interface" />
  </Frame>
);

/* ───────── Multiple MCP — infographic of the protocol itself ───────── */
/* ───────── Multiple MCP — typographic diagram, readable at any scale ───────── */
const MockMCP = () => {
  const tools = [
    { name: 'Active Directory', kind: 'Directory' },
    { name: 'ISE Auth Logs',    kind: 'Identity'  },
    { name: 'Intune MDM',       kind: 'Endpoints' },
    { name: 'ServiceNow',       kind: 'Ticketing' },
    { name: 'Splunk SIEM',      kind: 'Telemetry' },
    { name: 'Asset CMDB',       kind: 'Inventory' },
  ];
  return (
    <Frame chrome="browser" title="model context protocol — topology" accent="#0f766e">
      <div className="mcp2">
        <div className="mcp2-head">
          <div className="mcp2-kicker">Fig. Topology</div>
          <h2 className="mcp2-title">Model Context Protocol</h2>
          <div className="mcp2-sub">One client. One protocol. Many read-only tools.</div>
        </div>

        <div className="mcp2-grid">
          <div className="mcp2-client">
            <div className="mcp2-client-label">AI Client</div>
            <div className="mcp2-client-name">UltraViolet</div>
            <div className="mcp2-client-proto">↔ MCP ↔</div>
          </div>

          <div className="mcp2-lines" aria-hidden="true">
            {tools.map((_, i) => (
              <span key={i} className="mcp2-line" style={{top: `${(i + 0.5) * (100 / tools.length)}%`}}/>
            ))}
          </div>

          <div className="mcp2-servers">
            {tools.map(t => (
              <div className="mcp2-server" key={t.name}>
                <div className="mcp2-server-meta">
                  <div className="mcp2-server-kind">{t.kind}</div>
                  <div className="mcp2-server-name">{t.name}</div>
                </div>
                <div className="mcp2-server-mode">READ</div>
              </div>
            ))}
          </div>
        </div>

        <div className="mcp2-foot">
          <span>◦ Replaces six consoles with one conversation</span>
          <span>◦ Read-only by design</span>
          <span>◦ Audit-logged end-to-end</span>
        </div>
      </div>
    </Frame>
  );
};

/* ───────── Radiology Bench ───────── */
const MockRadiology = () => (
  <Frame chrome="browser" title="radiology-bench · localhost:3015" accent="#b45309">
    <img className="fig-img" src="assets/fig-radiology.png" alt="Radiology bench reconstructed interface" />
  </Frame>
);

/* ───────── UV Inventory ───────── */
const MockInventory = () => (
  <Frame chrome="browser" title="uv-inventory · chat" accent="#7c3aed">
    <div className="inv-inner">
      <div className="inv-head">
        <b>UV Inventory</b><span className="muted">· Ask anything about your assets</span>
        <span className="inv-live">● CONNECTED · 14,302 ITEMS</span>
      </div>
      <div className="inv-body">
        <div className="inv-msg user">
          <div className="inv-bubble user">How many retired laptops are still assigned to Cardiology, and what's the average age?</div>
        </div>
        <div className="inv-msg bot">
          <div className="inv-avatar">◈</div>
          <div className="inv-bubble">
            <div className="inv-answer-head">ANSWER</div>
            <p>There are <b>47 retired laptops</b> still assigned to the Cardiology group across four cost centres. The average age at retirement is <b>5 years 3 months</b>.</p>
            <div className="inv-table">
              <div className="row head"><span>COST CENTRE</span><span>COUNT</span><span>AVG AGE</span></div>
              {[['1PA-CARD',18,'5y 1m'],['MC-CARD',14,'5y 6m'],['HCC-CARD',9,'4y 11m'],['PKG-CARD',6,'5y 8m']].map(r=>(
                <div className="row" key={r[0]}><span>{r[0]}</span><span>{r[1]}</span><span>{r[2]}</span></div>
              ))}
            </div>
            <div className="inv-sources"><b>SOURCES</b> · intune-export-2026-04.xlsx · asset-v7.xlsx · cardio-inv.xlsx</div>
          </div>
        </div>
        <div className="inv-msg user"><div className="inv-bubble user">Mark them for collection.</div></div>
      </div>
      <div className="inv-compose">
        <input placeholder="Ask about your inventory…" />
        <span className="send" style={{background:'#7c3aed'}}>➤</span>
      </div>
    </div>
  </Frame>
);

/* ───────── UV Dashboards (George's Teams) ───────── */
const MockDashboard = () => (
  <Frame chrome="browser" title="george's-teams · oldest tickets" accent="#581c87">
    <img className="fig-img" src="assets/fig-dashboard.png" alt="Dashboard reconstructed interface" />
  </Frame>
);

Object.assign(window, {
  MockFrontier, MockSecrets, MockUVCode, MockLockout,
  MockMCP, MockRadiology, MockInventory, MockDashboard,
});