/* global React */
// Animated dashboard mock - the hero subject.
// Mirrors the real Agent Studio screenshot but is intentionally
// compact so it fits inside a marketing hero frame.

const { useState, useEffect, useRef } = React;

/* ---------- shared sub-components ---------- */

function MockChip({ kind, children }) {
  return <span className={"chip chip--" + kind}>{children}</span>;
}

function MockDot({ kind = "" }) {
  return <span className={"dot" + (kind ? " dot--" + kind : "")}></span>;
}

function AgentTile({ name, role, accent, status, beads }) {
  return (
    <div className="m-agent">
      <div className="m-agent-row1">
        <div className="m-agent-icon" style={{ background: accent }}></div>
        <div className="m-agent-name">
          <span className="m-agent-title">{name}</span>
          <span className="m-agent-role">{role}</span>
        </div>
        <MockChip kind={status.kind}>{status.label}</MockChip>
      </div>
      <div className="m-agent-sub">{status.task}</div>
      <div className="m-agent-beads">
        {beads.map((b, i) => (
          <span key={i} className={"m-bead m-bead--" + b}></span>
        ))}
      </div>
    </div>
  );
}

/* ---------- the dashboard mock ---------- */

function DashboardMock({ density = "standard" }) {
  // animated state - run timeline + progress
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 1400);
    return () => clearInterval(id);
  }, []);

  const timelineEvents = [
    { t: "13:41:08", label: "Plan approved",       kind: "verified" },
    { t: "13:41:09", label: "Worktree created",    kind: "info" },
    { t: "13:41:14", label: "Worker started",      kind: "running" },
    { t: "13:42:02", label: "Tests passed (24/24)", kind: "verified" },
    { t: "13:42:18", label: "Patch generated",     kind: "running" },
    { t: "13:42:31", label: "Awaiting approval",   kind: "approval" },
  ];

  const visibleCount = Math.min(timelineEvents.length, 2 + (tick % (timelineEvents.length - 1)));
  const visible = timelineEvents.slice(0, visibleCount);

  // running task progress
  const progress = 18 + ((tick * 7) % 70);

  return (
    <div className="m-dash" data-density={density}>
      {/* sidebar */}
      <aside className="m-sidebar">
        <div className="m-side-section">
          <div className="m-side-head">Navigate</div>
          <ul className="m-side-list">
            <li className="is-active"><span className="m-ico">⌂</span>Dashboard</li>
            <li><span className="m-ico">◇</span>Chat</li>
            <li><span className="m-ico">≡</span>Tasks</li>
            <li><span className="m-ico">▤</span>Context</li>
            <li><span className="m-ico">¶</span>Markdown</li>
            <li><span className="m-ico">⌕</span>Research</li>
            <li><span className="m-ico">◐</span>Agents</li>
            <li><span className="m-ico">◉</span>Providers</li>
          </ul>
        </div>
        <div className="m-side-section">
          <div className="m-side-head">Pinned <span className="m-side-count">1</span></div>
          <ul className="m-side-list m-side-list--sub">
            <li className="is-pinned"><span className="m-ico">▸</span>agent-studio</li>
            <li className="m-side-sub">add blue test button <span className="m-side-meta">30d</span></li>
            <li className="m-side-sub">make start task button bigger <span className="m-side-meta">30d</span></li>
            <li className="m-side-sub">add "test" to header <span className="m-side-meta">36d</span></li>
          </ul>
        </div>
      </aside>

      {/* main */}
      <main className="m-main">
        {/* top strip */}
        <header className="m-topbar">
          <div className="m-topbar-left">
            <span className="t-eyebrow" style={{ color: "var(--acp-muted)" }}>Agent Studio</span>
            <span className="m-topbar-title">dashboard</span>
          </div>
          <div className="m-topbar-right">
            <span className="m-topbar-meta"><span className="m-ico" style={{ marginRight: 4 }}>⎇</span>jstxn/redesign</span>
            <span className="m-topbar-meta m-topbar-meta--warn">Dirty</span>
            <span className="m-topbar-meta">May 14, 13:42</span>
          </div>
        </header>

        {/* content grid */}
        <div className="m-content">
          <div className="m-col-main">
            {/* page title */}
            <div className="m-page-title">
              <div className="m-tags">
                <span className="m-tag">agent-studio</span>
                <span className="m-tag">9 agents</span>
                <span className="m-tag">26 context resources</span>
              </div>
              <div className="t-eyebrow" style={{ marginTop: 8 }}>Workspace</div>
              <h3 className="m-h3">Workspace overview</h3>
              <p className="m-page-sub">Live agents, runs, evidence, and adjacent surfaces.</p>
              <div className="m-page-actions">
                <button className="btn btn--primary btn--sm">+ Start task →</button>
                <button className="btn btn--sm">Open task ledger</button>
              </div>
            </div>

            {/* agents panel */}
            <section className="panel m-panel">
              <div className="panel-header">
                <span>Agents · 9</span>
                <span className="ph-meta">1 running · View all</span>
              </div>
              <div className="m-agent-grid">
                <AgentTile
                  name="Orches…" role="Orchestrator"
                  accent="var(--acp-lavender)"
                  status={{ kind: "running", label: "Run", task: "task-2af469 · stage: workers" }}
                  beads={["g","g","g","r","r","r","r","r","r","r"]}
                />
                <AgentTile
                  name="Planner" role="Planner"
                  accent="var(--acp-cyan)"
                  status={{ kind: "verified", label: "Idle", task: "Last plan approved · 2m ago" }}
                  beads={["g","g","g","g","g","g","g","g","g","g"]}
                />
                <AgentTile
                  name="Worker" role="Worker"
                  accent="var(--acp-orange)"
                  status={{ kind: "running", label: "Run", task: "Editing src/components/Header.tsx" }}
                  beads={["g","g","g","g","g","r","r","r","r","r"]}
                />
                <AgentTile
                  name="Worker Rev…" role="Reviewer"
                  accent="var(--acp-yellow)"
                  status={{ kind: "queued", label: "Queued", task: "Waiting for worker output" }}
                  beads={["r","r","r","r","r","r","r","r","r","r"]}
                />
                <AgentTile
                  name="Final…" role="Final review"
                  accent="var(--acp-peach)"
                  status={{ kind: "idle", label: "Idle", task: "No matched runs" }}
                  beads={["r","r","r","r","r","r","r","r","r","r"]}
                />
                <AgentTile
                  name="Reporter" role="Reporter"
                  accent="var(--acp-green)"
                  status={{ kind: "idle", label: "Idle", task: "No matched runs" }}
                  beads={["r","r","r","r","r","r","r","r","r","r"]}
                />
              </div>
            </section>

            {/* task queue */}
            <section className="panel m-panel">
              <div className="panel-header">
                <span>Agent task queue</span>
                <span className="ph-meta">11 tasks</span>
              </div>
              <table className="m-table">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Task</th>
                    <th>Stage</th>
                    <th>Status</th>
                    <th className="m-th-right">Duration</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="density-row">
                    <td className="m-mono">2af469</td>
                    <td>add blue test button to sidebar</td>
                    <td className="muted">Workers</td>
                    <td>
                      <div className="m-progress">
                        <div className="m-progress-track">
                          <div className="m-progress-fill" style={{ width: progress + "%" }}></div>
                        </div>
                        <MockChip kind="running">Running</MockChip>
                      </div>
                    </td>
                    <td className="m-mono m-td-right">{Math.round(progress * 0.36)}s</td>
                  </tr>
                  <tr className="density-row">
                    <td className="m-mono">2efdf3</td>
                    <td>make start task button bigger</td>
                    <td className="muted">Workers</td>
                    <td><MockChip kind="approval">Needs approval</MockChip></td>
                    <td className="m-mono m-td-right">14m 11s</td>
                  </tr>
                  <tr className="density-row">
                    <td className="m-mono">0c95bb</td>
                    <td>add "test" to header</td>
                    <td className="muted">Workers</td>
                    <td><MockChip kind="verified">Completed</MockChip></td>
                    <td className="m-mono m-td-right">25m 23s</td>
                  </tr>
                  <tr className="density-row">
                    <td className="m-mono">df1c91</td>
                    <td>refactor task ledger query</td>
                    <td className="muted">Reporter</td>
                    <td><MockChip kind="verified">Completed</MockChip></td>
                    <td className="m-mono m-td-right">2m 54s</td>
                  </tr>
                  <tr className="density-row">
                    <td className="m-mono">86a1fd</td>
                    <td>tighten provider health timeout</td>
                    <td className="muted">Reporter</td>
                    <td><MockChip kind="failed">Failed</MockChip></td>
                    <td className="m-mono m-td-right">2m 53s</td>
                  </tr>
                </tbody>
              </table>
            </section>
          </div>

          {/* right column */}
          <aside className="m-col-side">
            {/* operator snapshot */}
            <section className="panel m-panel">
              <div className="panel-header">
                <span>Operator snapshot</span>
                <span className="ph-meta">May 14, 13:42</span>
              </div>
              <dl className="kv m-kv">
                <dt>Tasks</dt><dd>11</dd>
                <dt>Live runs</dt><dd>1</dd>
                <dt>Providers ready</dt><dd>3/3</dd>
                <dt>Beads sync</dt><dd>8 ready</dd>
              </dl>
            </section>

            {/* run timeline (animated) */}
            <section className="panel m-panel">
              <div className="panel-header">
                <span>Run timeline</span>
                <span className="ph-meta">task-2af469</span>
              </div>
              <ol className="m-timeline">
                {visible.map((e, i) => (
                  <li key={i} className={"m-timeline-item m-tl-" + e.kind}>
                    <span className="m-tl-marker"></span>
                    <span className="m-tl-time">{e.t}</span>
                    <span className="m-tl-label">{e.label}</span>
                  </li>
                ))}
              </ol>
            </section>

            {/* provider readiness */}
            <section className="panel m-panel">
              <div className="panel-header">
                <span>Engine readiness</span>
                <span className="ph-meta">2/2 healthy</span>
              </div>
              <div className="m-providers">
                <div className="m-provider">
                  <div>
                    <div className="m-prov-name">Studio Engine</div>
                    <div className="m-prov-ver">studio-engine, v1.4 · included</div>
                  </div>
                  <MockChip kind="verified">Healthy</MockChip>
                </div>
                <div className="m-provider">
                  <div>
                    <div className="m-prov-name">Custom provider <span className="chip chip--idle" style={{ marginLeft: 4, fontSize: 8 }}>Pro</span></div>
                    <div className="m-prov-ver">byok · my-cli 0.9</div>
                  </div>
                  <MockChip kind="verified">Healthy</MockChip>
                </div>
              </div>
            </section>
          </aside>
        </div>
      </main>
    </div>
  );
}

window.DashboardMock = DashboardMock;