/* Interactive Quantesic mini-demo - faithful recreation of the Omnichannel Inbox.
   Click "Run AI Triage" to watch root cause + execution plan generate live. */

const DEMO_TICKETS = [
  {
    id: "TEST-METER-1778784942279",
    test: true,
    priority: "p1",
    title: "Phase A metering test",
    account: "acme-1",
    age: "6d ago",
    queue: "quantesic / inbox",
    source: "DATADOG",
    payload: [
      "Synthetic ticket created by scripts/test-ai-metering.ts.",
      "Auth gateway p99 spike on Acme tenant after the 2.14 rollout.",
      "Logs show pool exhaustion.",
    ].join(" "),
    diagnosis: {
      confidence: 92,
      rootCause:
        "The 2.14 deployment contains a connection pool leak or misconfigured pool limit in the auth gateway, leading to connection exhaustion under load.",
      plan: [
        "Initiate an immediate rollback of the Acme tenant's auth gateway to the stable 2.13 version.",
        "Inspect the git diff of the 2.14 release specifically looking for database connection handling, client initialization, or connection closing logic.",
        "Verify connection leak telemetry and adjust pool configurations in the staging environment under load.",
      ],
      risk:
        'Auth gateway degradation for key enterprise customer Acme blocks production login access, risking SLA penalties.',
      riskLevel: "COMMERCIAL RISK FLAG",
    },
  },
  {
    id: "ZD-44128",
    priority: "p1",
    title: "API throttling: sustained 429s on /v2/sync",
    account: "stark-industries",
    age: "11h ago",
    queue: "quantesic / inbox",
    source: "ZENDESK",
    payload: [
      "Customer reports sustained HTTP 429 responses on the /v2/sync endpoint",
      "since 14:22 UTC. Affected scope: production tenant stark-1. No related",
      "deployment in the last 24h.",
    ].join(" "),
    diagnosis: {
      confidence: 88,
      rootCause:
        "The stark-1 tenant exceeded its committed RPS quota during a batch reconciliation job. Existing global rate-limit is firing correctly; tenant is not on an exception list for this endpoint.",
      plan: [
        "Confirm batch job is intentional via Slack #stark-prod channel and pause if not.",
        "Temporarily lift the /v2/sync RPS cap for stark-1 to 4x committed for the next 6h.",
        "File a follow-up to negotiate higher committed RPS on contract renewal (2026-04-10).",
      ],
      risk:
        '"Frustrated" appears in 3 of the last 5 inbound comments. Account is At Risk and renews in <60 days.',
      riskLevel: "COMMERCIAL RISK FLAG",
    },
  },
  {
    id: "JR-9821",
    priority: "p2",
    title: "SAML response signature mismatch on Okta IdP",
    account: "wayne-enterprises",
    age: "2d ago",
    queue: "quantesic / inbox",
    source: "JIRA",
    payload: [
      "After Wayne IT rotated their Okta signing cert on 2026-05-14, SAML",
      "responses are returning InvalidSignature on the SSO callback. Customer",
      "rolled back to old cert; works.",
    ].join(" "),
    diagnosis: {
      confidence: 95,
      rootCause:
        "Quantesic's cached SAML metadata for the Wayne tenant still references the previous Okta signing certificate. The metadata refresh interval is 24h and the rotation happened mid-window.",
      plan: [
        "Force a metadata refresh for the wayne-enterprises tenant via the admin console.",
        "Verify the new x509Certificate fingerprint matches what Wayne IT confirmed.",
        "Open ticket against the platform team to make metadata refresh interval configurable per-tenant (15m for high-touch accounts).",
      ],
      risk: null,
      riskLevel: null,
    },
  },
];

function Demo() {
  const [activeId, setActiveId] = useState(DEMO_TICKETS[0].id);
  // states per ticket: 'idle' | 'running' | 'done'
  const [triageState, setTriageState] = useState(() =>
    Object.fromEntries(DEMO_TICKETS.map((t) => [t.id, "idle"]))
  );
  const [timer, setTimer] = useState(null);

  const active = DEMO_TICKETS.find((t) => t.id === activeId);
  const state = triageState[activeId];

  const runTriage = useCallback(() => {
    if (state === "running") return;
    setTriageState((s) => ({ ...s, [activeId]: "running" }));
    setTimer(0);
    const start = performance.now();
    const tick = () => {
      const elapsed = (performance.now() - start) / 1000;
      setTimer(elapsed);
      if (elapsed < 3.8) {
        requestAnimationFrame(tick);
      } else {
        setTriageState((s) => ({ ...s, [activeId]: "done" }));
        setTimer(4.0);
      }
    };
    requestAnimationFrame(tick);
  }, [activeId, state]);

  // Reset timer display when ticket changes
  useEffect(() => {
    setTimer(state === "done" ? 4.0 : null);
  }, [activeId, state]);

  return (
    <div className="demo">
      <DemoChrome />
      <div className="demo-body">
        <DemoRail />
        <DemoSidebar
          tickets={DEMO_TICKETS}
          activeId={activeId}
          setActiveId={setActiveId}
          triageState={triageState}
        />
        <DemoMain
          ticket={active}
          state={state}
          runTriage={runTriage}
          timer={timer}
        />
        <DemoAside ticket={active} state={state} />
      </div>
    </div>
  );
}

function DemoChrome() {
  return (
    <div className="demo-chrome">
      <div className="demo-dots">
        <span style={{ background: "var(--blue-q)" }}></span>
        <span style={{ background: "var(--gold-q)" }}></span>
        <span style={{ background: "var(--green-q)" }}></span>
      </div>
      <div className="demo-url">
        <span className="scheme">https://app.</span>
        <span style={{ color: "var(--purple)" }}>quantesic</span>
        <span className="path">.com/inbox</span>
      </div>
      <div className="demo-status">
        <span className="pulse"></span>
        Live demo
      </div>
    </div>
  );
}

function DemoRail() {
  return (
    <div className="demo-rail">
      <div className="logo-q">Q</div>
      <div className="rail-btn active" title="Omnichannel Inbox"><Icons.inbox /></div>
      <div className="rail-btn" title="Client Accounts"><Icons.user /></div>
      <div className="rail-btn" title="Command Center"><Icons.bar /></div>
      <div className="rail-btn" title="Knowledge Assets"><Icons.book /></div>
      <div className="rail-btn" title="Tenant Settings"><Icons.cog /></div>
    </div>
  );
}

function DemoSidebar({ tickets, activeId, setActiveId, triageState }) {
  return (
    <div className="demo-sidebar">
      <div className="demo-sidebar-title">Queue / {tickets.length} tickets</div>
      {tickets.map((t) => (
        <div
          key={t.id}
          className={`ticket-row ${t.id === activeId ? "active" : ""}`}
          onClick={() => setActiveId(t.id)}
        >
          <div className="ticket-top">
            <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
              {t.test && <span className="ticket-pill test">TEST</span>}
              <span className={`ticket-pill ${t.priority}`}>{t.priority.toUpperCase()}</span>
            </div>
            <span className="ticket-time">{t.age}</span>
          </div>
          <div className="ticket-title">{t.title}</div>
          <div className="ticket-acct">
            {t.account}
            {triageState[t.id] === "done" && (
              <span style={{ color: "var(--purple)", marginLeft: 8 }}>/ triaged</span>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}

function DemoMain({ ticket, state, runTriage, timer }) {
  const pills = [
    { label: "STATUS: IN PROGRESS", color: "blue" },
    { label: "TIER 2 SUPPORT", color: "purple" },
  ];

  return (
    <div className="demo-main">
      <div>
        <div className="demo-ticket-id">{ticket.id}</div>
        <h3 className="demo-h">{ticket.title}</h3>
      </div>

      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        {pills.map((p) => (
          <span key={p.label} className={`status-pill ${p.color}`}>{p.label}</span>
        ))}
      </div>

      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
          <span style={{ fontFamily: "var(--mono)", fontSize: "0.7rem", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-3)" }}>
            Inbound payload
          </span>
          <span className="demo-source">{ticket.source}</span>
        </div>
        <div className="demo-payload">
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8, opacity: 0.7 }}>
            <span style={{ display: "inline-flex", gap: 4 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--blue-q)" }}></span>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--gold-q)" }}></span>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--green-q)" }}></span>
            </span>
            <span>{ticket.queue}<span style={{ color: "var(--fg-3)" }}> / {ticket.id}</span></span>
          </div>
          <div style={{ marginBottom: 6 }}>
            <span className="k">$ </span>
            <span>cat inbound_payload.txt</span>
          </div>
          <div>{ticket.payload}</div>
          <div style={{ marginTop: 6 }}>
            <span className="k">$ </span>
            <span style={{ display: "inline-block", width: 8, height: 14, background: "var(--gold-q)", verticalAlign: "middle", animation: "blink 1s steps(2) infinite" }}></span>
          </div>
        </div>
      </div>

      <div className="demo-action">
        <button
          className="btn-triage"
          onClick={runTriage}
          disabled={state === "running"}
        >
          <span className="qmark">Q</span>
          {state === "idle" && "Run AI Triage"}
          {state === "running" && "Synthesizing..."}
          {state === "done" && "Re-run AI Triage"}
        </button>
        {timer !== null && (
          <span className="demo-timer">
            <span className="num">{timer.toFixed(1)}s</span> / Gemini 2.5 Flash + Vertex RAG
          </span>
        )}
      </div>

      {state === "idle" && (
        <div className="diagnosis">
          <div className="diagnosis-empty">
            <div className="glyph">Q</div>
            <p>Click <strong style={{ color: "var(--fg)" }}>Run AI Triage</strong> to watch Quantesic synthesize a root-cause hypothesis, execution plan, and commercial risk flag from the payload above.</p>
          </div>
        </div>
      )}

      {state === "running" && (
        <div className="diagnosis">
          <div className="diagnosis-head">
            <span className="label"><span className="qmark">Q</span>AI Diagnosis</span>
            <span className="diagnosis-confidence" style={{ color: "var(--purple)" }}>Computing...</span>
          </div>
          <div className="diagnosis-loading">
            <div className="spinner"></div>
            <div style={{ fontFamily: "var(--mono)", fontSize: "0.72rem", letterSpacing: "0.10em", textTransform: "uppercase", color: "var(--fg-3)" }}>
              Retrieving similar resolved tickets...
            </div>
            <div style={{ width: "100%", maxWidth: 320, display: "flex", flexDirection: "column", gap: 8, marginTop: 4 }}>
              <div className="shimmer" style={{ width: "90%" }}></div>
              <div className="shimmer" style={{ width: "75%" }}></div>
              <div className="shimmer" style={{ width: "60%" }}></div>
            </div>
          </div>
        </div>
      )}

      {state === "done" && <Diagnosis diagnosis={ticket.diagnosis} />}
    </div>
  );
}

function Diagnosis({ diagnosis }) {
  return (
    <div className="diagnosis">
      <div className="diagnosis-head">
        <span className="label">
          <span className="qmark">Q</span>AI Diagnosis
        </span>
        <span className="diagnosis-confidence">{diagnosis.confidence}% confidence</span>
      </div>
      <div className="diagnosis-body">
        <div className="diagnosis-section">
          <h6>Root cause hypothesis</h6>
          <p>{diagnosis.rootCause}</p>
        </div>
        <div className="diagnosis-section">
          <h6>Execution plan / 0/{diagnosis.plan.length} complete</h6>
          <ul className="diagnosis-plan">
            {diagnosis.plan.map((step, i) => (
              <li key={i}>
                <div className="box"></div>
                <span>{step}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
      {diagnosis.risk && (
        <div className="risk-flag">
          <span className="pill">Warning {diagnosis.riskLevel}</span>
          <p>{diagnosis.risk}</p>
        </div>
      )}
    </div>
  );
}

function DemoAside({ ticket, state }) {
  return (
    <div className="demo-aside">
      <div className="aside-section">
        <h6>AI Copilot</h6>
        <div style={{ fontSize: "0.85rem", color: "var(--fg-2)", lineHeight: 1.5 }}>
          Synthesizes across {ticket.source.toLowerCase()}, support history, and account context. Every output is
          editable and trains on your overrides.
        </div>
      </div>

      <div className="aside-section">
        <h6>One-click escalations</h6>
        <div className="aside-escalation">
          <div className="escalate-card">
            <Icons.mail className="icon" />
            <div className="label">Draft Client Update</div>
          </div>
          <div className="escalate-card">
            <Icons.send className="icon" />
            <div className="label">Push to Engineering</div>
          </div>
        </div>
      </div>

      <div className="aside-section">
        <h6>Account context</h6>
        <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: "0.85rem" }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span style={{ color: "var(--fg-3)" }}>ARR</span>
            <span style={{ color: "var(--fg)" }}>{ticket.account === "stark-industries" ? "$125k" : ticket.account === "wayne-enterprises" ? "$310k" : "$87k"}</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span style={{ color: "var(--fg-3)" }}>Health</span>
            <span style={{ color: ticket.account === "stark-industries" ? "var(--red-q)" : "var(--green-q)" }}>
              {ticket.account === "stark-industries" ? "At Risk" : "Healthy"}
            </span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span style={{ color: "var(--fg-3)" }}>Renews</span>
            <span style={{ color: "var(--fg)" }}>{ticket.account === "stark-industries" ? "2026-04-10" : ticket.account === "wayne-enterprises" ? "2026-09-18" : "2027-01-15"}</span>
          </div>
        </div>
      </div>

      <div style={{ marginTop: "auto", paddingTop: 14, borderTop: "1px solid var(--rule)", fontFamily: "var(--mono)", fontSize: "0.65rem", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-3)" }}>
        Stack: Gemini 2.5 / Vertex AI / Firestore
      </div>
    </div>
  );
}

Object.assign(window, { Demo });