/* global React, Glyph, Icon, motionOff */

const NAV_ICONS = {
  Dashboard: "M3 13h8V3H3v10zM3 21h8v-6H3v6zM13 21h8V11h-8v10zM13 3v6h8V3h-8z",
  Agents: ["M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", "M3.27 6.96L12 12l8.73-5.04M12 22V12"],
  Context: ["M2 3h20v14H2z", "M8 21h8M12 17v4"],
  Vault: ["M3 11l9-8 9 8M5 10v10h14V10M9 20v-6h6v6"],
  Billing: ["M2 7h20v10H2zM2 11h20M6 15h2M11 15h3"],
};

const DASH_METRICS = [
  { l: "Active agents", v: "47", d: "+3" },
  { l: "Skills loaded", v: "5,412", d: "+12" },
  { l: "Audit score", v: "98.7%", d: "+0.2%" },
  { l: "Avg TTFB", v: "3.2s", d: "−0.4s", red: true },
];

const DASH_AGENTS = [
  { n: "crm-orchestrator", r: "Lead routing & qualification", m: "opus-4-6", s: "on", st: "Active" },
  { n: "research-prime", r: "Deep research / sources", m: "gpt-4o", s: "on", st: "Active" },
  { n: "audit-watchdog", r: "ISO 9001 compliance scan", m: "opus-4-6", s: "lav", st: "Learning" },
  { n: "content-mason", r: "Long-form drafting", m: "4o-mini", s: "idle", st: "Idle" },
];

const FEED = [
  ["ctx", "User profile deep-research complete (3.2s)"],
  ["agt", "Spawning crm-agent with 12 skills attached"],
  ["mem", "Memory checkpoint: 2.4GB window saved"],
  ["dep", "Agent v2.4.1 deployed to prod cluster"],
  ["aud", "ISO 9001 audit scan: 98.7% score"],
  ["skl", "Skill repo: +3 community skills merged"],
];

function MissionControl() {
  const [feed, setFeed] = React.useState(FEED);
  React.useEffect(() => {
    if (motionOff()) return;
    const id = setInterval(() => {
      setFeed(prev => {
        const next = FEED[Math.floor(Math.random() * FEED.length)];
        return [...prev, next].slice(-6);
      });
    }, 2600);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="mission" id="dashboard">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Mission control</span>
          <h2 className="sec-title h2">The dashboard is<br/>the product<span style={{ color: "rgb(var(--accent-red))" }}>.</span></h2>
          <p className="sec-sub">
            Sign in and this is home: every agent, skill, deploy and dollar across your surfaces,
            on one glass control plane. Here's a live look.
          </p>
        </div>

        <div className="browser reveal" style={{ transitionDelay: "0.06s" }}>
          <div className="br-chrome">
            <span className="br-dots"><i /><i /><i /></span>
            <span className="br-url">
              <Icon d={["M5 11V7a5 5 0 0110 0v4", "M3 11h14v9H3z"]} size={11} />
              aaas<b>.company</b>/dashboard
            </span>
          </div>

          <div className="dash">
            {/* sidebar */}
            <aside className="d-side">
              <div className="d-brand">
                <span className="brand-pulse" />
                <span style={{ fontFamily: "var(--font-jetbrains)", fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.2rem" }}>aaas.company</span>
              </div>
              {Object.keys(NAV_ICONS).map((k, i) => (
                <div className={"d-link " + (i === 0 ? "on" : "")} key={k}>
                  <Icon d={NAV_ICONS[k]} size={14} />{k}
                </div>
              ))}
              <div className="d-side-foot">
                <span className="brand-pulse" style={{ width: 7, height: 7 }} />
                <span style={{ fontFamily: "var(--font-jetbrains)", fontSize: 9, textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--text-muted)" }}>context · online</span>
              </div>
            </aside>

            {/* main */}
            <div className="d-main">
              <div className="d-top">
                <div className="d-search">
                  <Icon d={["M11 4a7 7 0 100 14 7 7 0 000-14z", "M20 20l-3.5-3.5"]} size={13} />
                  Search agents, skills, context…
                  <span className="d-kbd">⌘K</span>
                </div>
                <div className="d-acct">
                  <span className="av">JL</span>
                  <span className="nm">Jay Lindqvist</span>
                </div>
              </div>

              <div className="d-content">
                <div>
                  <div className="d-sub" style={{ color: "rgb(var(--accent-red))", letterSpacing: "0.15rem" }}>WORKSPACE · AAAS-PLATFORM-PROD</div>
                  <h3 className="d-h2">Dashboard<span className="dot">.</span></h3>
                  <div className="d-sub">47 active agents · last deploy 2 minutes ago</div>
                </div>

                <div className="d-metrics">
                  {DASH_METRICS.map(m => (
                    <div className="d-metric" key={m.l}>
                      <div className="ml">{m.l}<span className={"d-delta " + (m.red ? "red" : "")}>{m.d}</span></div>
                      <div className="mv">{m.v}</div>
                      <div className="mbar"><div className="mfill" style={{ width: (40 + Math.random() * 50) + "%", ...(m.red ? { background: "rgb(var(--accent-red))", boxShadow: "0 0 8px rgb(var(--accent-red))" } : {}) }} /></div>
                    </div>
                  ))}
                </div>

                <div className="d-two">
                  <div className="d-panel">
                    <div className="d-panel-head">
                      <span className="d-panel-title">Agent roster</span>
                      <span className="d-sub">12 of 47</span>
                    </div>
                    <div className="d-roster">
                      {DASH_AGENTS.map(a => (
                        <div className="d-agent" key={a.n}>
                          <span className={"sd " + a.s} />
                          <div>
                            <div className="anm">{a.n}</div>
                            <div className="arl">{a.r}</div>
                          </div>
                          <span className="amd">{a.m}</span>
                          <span className="ast">{a.st}</span>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className="d-panel d-feed">
                    <div className="d-panel-head">
                      <span className="d-panel-title">Deploy feed</span>
                      <span className="term-live"><span className="brand-pulse" style={{ width: 6, height: 6 }} /> live</span>
                    </div>
                    <div className="d-feed-term">
                      <div className="d-feed-body">
                        {feed.map((l, i) => (
                          <div className="t-row" key={i}>
                            <span className="t-dim" style={{ width: 44, flexShrink: 0 }}>12:4{i % 9}</span>
                            <span className={"t-pfx " + l[0]}>[{l[0]}]</span>
                            <span className="t-msg">{l[1]}</span>
                          </div>
                        ))}
                        <div className="t-row"><span className="t-prompt">›</span><span className="t-cursor" /></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* three supporting features */}
        <div className="mission-feats">
          {[
            { i: ["M12 2L2 7l10 5 10-5-10-5z", "M2 17l10 5 10-5M2 12l10 5 10-5"], h: "Unified context", p: "Research, memory and preferences follow your agents across every surface — zero re-explaining." },
            { i: ["M13 2L3 14h9l-1 8 10-12h-9l1-8z"], h: "Spawn in minutes", p: "5,400+ vault skills pre-indexed. Compose an agent, attach skills, deploy to prod." },
            { i: ["M9 12l2 2 4-4", "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], h: "One bill, one audit", p: "Billing and ISO-grade compliance roll up across all 17 surfaces into a single view." },
          ].map(f => (
            <div className="feat glass reveal" key={f.h}>
              <span className="fi"><Icon d={f.i} size={19} /></span>
              <h4>{f.h}</h4>
              <p>{f.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.MissionControl = MissionControl;