/* azure-devops.jsx — "Azure DevOps": AIRS across the CI/CD pipeline, the twin of
   ship-happens.jsx (route #/azuredevops, constant key="azuredevops"). The hub card
   is just a card; ALL the pipeline detail lives HERE, opened when you click it —
   exactly like Ship Happens! / GCP Cloud Build.

   The same SkyHR lifecycle on Azure DevOps with Prisma AIRS at every gate. The page
   reads its stages straight from the PILLARS data (single source of truth) and hands
   off to the real Azure DevOps pipeline via ONE primary link-out, read from the
   window.LASTROSE_BACKENDS.azureDevopsUrl SEAM — never a hardcoded URL. With no
   overlay wired the button renders DISABLED, so the export stays self-contained.
   Azure-blue theme; the AIRS gates run a brighter blue, the two failure points run
   red. */

/* ---- Azure-blue palette ---- */
const AZ = {
  mono: "'JetBrains Mono', ui-monospace, monospace",
  sans: "'Manrope', system-ui, sans-serif",
  serif: "'Spectral', serif",
  page: "#eef3fb",
  surface: "#ffffff",
  surfaceAlt: "#f3f7fd",
  raised: "#e7f0fb",
  line: "rgba(0,90,180,0.16)",
  lineSoft: "rgba(0,90,180,0.09)",
  ink: "#10243f",
  sub: "#42597a",
  faint: "#8492ad",
  blue: "#0078D4",
  blueDeep: "#106EBE",
  blueInk: "#ffffff",
  blueSoft: "rgba(0,120,212,0.10)",
  blueBorder: "rgba(0,120,212,0.42)",
  danger: "#dc2626",
  dangerSoft: "rgba(220,38,38,0.08)",
  dangerBorder: "rgba(220,38,38,0.4)",
  ambient: "radial-gradient(900px 380px at 50% -10%, rgba(0,120,212,0.16), transparent 70%), radial-gradient(720px 320px at 92% 112%, rgba(16,110,190,0.10), transparent 70%)",
};

function AzSectionLabel({ children }) {
  return (
    <div className="mb-3 flex items-center gap-2.5 text-[11px] font-bold uppercase tracking-[0.18em]" style={{ color: AZ.faint, fontFamily: AZ.mono }}>
      <span className="inline-block h-px w-7" style={{ background: AZ.line }} /> {children}
    </div>
  );
}

/* one step in the vertical pipeline timeline */
function AzPipelineStep({ s, last }) {
  const guarded = s.airs || s.gate;
  const nodeBg = s.blocked ? AZ.danger : s.gate ? AZ.surface : s.airs ? AZ.blue : AZ.surface;
  const nodeFg = s.blocked || s.airs ? "#fff" : AZ.sub;
  const nodeBorder = s.blocked ? AZ.danger : s.airs ? AZ.blue : AZ.line;
  return (
    <div className="relative flex gap-4 pb-5 last:pb-0">
      {/* rail */}
      <div className="relative flex w-9 shrink-0 flex-col items-center">
        <span className="flex h-9 w-9 items-center justify-center rounded-full text-[13px] font-bold" style={{ background: nodeBg, color: nodeFg, border: `1.5px solid ${nodeBorder}`, fontFamily: AZ.mono }}>{s.n}</span>
        {!last && <span className="mt-1 w-px flex-1" style={{ background: AZ.line }} />}
      </div>
      {/* card */}
      <div className="min-w-0 flex-1 rounded-2xl px-4 py-3.5" style={{ background: s.blocked ? AZ.dangerSoft : AZ.surface, border: `1px solid ${s.blocked ? AZ.dangerBorder : guarded ? AZ.blueBorder : AZ.line}` }}>
        <div className="flex flex-wrap items-center gap-2.5">
          <span className="text-[15.5px] font-extrabold tracking-[-0.01em]" style={{ color: AZ.ink, fontFamily: AZ.sans }}>{s.label}</span>
          {s.sub && <span className="text-[11px] font-semibold uppercase tracking-[0.1em]" style={{ color: AZ.faint, fontFamily: AZ.mono }}>{s.sub}</span>}
          {s.airs && (
            <span className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.1em]" style={{ background: AZ.blueSoft, color: AZ.blue, border: `1px solid ${AZ.blueBorder}`, fontFamily: AZ.mono }}>🛡️ AIRS</span>
          )}
          {s.gate && (
            <span className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.1em]" style={{ background: AZ.raised, color: AZ.sub, border: `1px solid ${AZ.line}`, fontFamily: AZ.mono }}>⛔ Gate</span>
          )}
        </div>
        {s.note && (
          <p className="mt-1.5 text-[13px] leading-relaxed" style={{ color: s.blocked ? AZ.danger : AZ.sub }}>
            {s.blocked && <span className="font-bold">⛔ </span>}{s.note}
          </p>
        )}
      </div>
    </div>
  );
}

/* the PRIMARY CTA — "Open in Azure DevOps" (seam-backed, mock-safe-disabled) */
function OpenInAzureDevops({ item }) {
  const url = (window.LASTROSE_BACKENDS && window.LASTROSE_BACKENDS.azureDevopsUrl) || null;
  const live = !!url;
  return (
    <div className="rounded-2xl px-6 py-6" style={{ background: live ? AZ.blueSoft : AZ.surfaceAlt, border: `1px solid ${live ? AZ.blueBorder : AZ.line}` }}>
      <div className="text-[17px] font-extrabold" style={{ color: AZ.ink, fontFamily: AZ.sans }}>Watch the pipeline run</div>
      <p className="mt-1 text-[13px] leading-relaxed" style={{ color: AZ.sub }}>
        The button opens the <span className="font-semibold">live Azure DevOps pipeline</span>, where every stage above runs as a real job — a poisoned model is blocked before it can train, and a tampered build never reaches prod.
      </p>
      <div className="mt-4">
        {live ? (
          <a href={url} target="_blank" rel="noopener noreferrer"
            className="flex w-full items-center justify-center gap-2.5 rounded-xl px-5 py-3.5 text-[15px] font-bold transition-all hover:-translate-y-0.5 active:scale-[0.99]"
            style={{ background: AZ.blue, color: AZ.blueInk, boxShadow: "0 14px 32px -16px rgba(0,120,212,0.7)" }}>
            {item.titleImg && <img src={item.titleImg} alt="" className="h-5 w-5" style={{ filter: "brightness(0) invert(1)" }} />}
            {item.cta || "View pipeline in Azure DevOps"} <window.Icon name="ArrowUpRight" size={18} />
          </a>
        ) : (
          <div className="flex w-full cursor-not-allowed items-center justify-center gap-2.5 rounded-xl px-5 py-3.5 text-[15px] font-bold opacity-60" style={{ background: AZ.raised, color: AZ.sub, border: `1px solid ${AZ.line}` }} aria-disabled="true" title="No Azure DevOps URL wired — running as the self-contained demo">
            <window.Icon name="Lock" size={17} /> Not yet connected
          </div>
        )}
      </div>
      {!live && (
        <p className="mt-3 text-[11.5px] leading-relaxed" style={{ color: AZ.faint }}>
          No pipeline wired — this export runs as the self-contained demo. Set <span style={{ fontFamily: AZ.mono }}>LASTROSE_BACKENDS.azureDevopsUrl</span> in the release overlay to light the button up.
        </p>
      )}
    </div>
  );
}

/* ============================================================ */
function AzureDevops({ navigate, onBack }) {
  const pillar = (window.PILLARS || []).find((p) => p.id === "cicd-mlops");
  const item = pillar ? pillar.items.find((it) => it.type === "azureDevops") : null;
  const stages = (item && item.stages) || [];
  const failures = stages.filter((s) => s.blocked).length;

  if (!item) return null;

  return (
    <div className="relative flex h-full w-full flex-col overflow-hidden a-fade" style={{ background: AZ.page, fontFamily: AZ.sans }} data-screen-label="Azure DevOps">
      <div className="pointer-events-none absolute inset-0" style={{ background: AZ.ambient }} />

      {/* presenter toolbar */}
      <div className="relative z-10 flex h-12 shrink-0 items-center justify-between px-4" style={{ background: "rgba(238,243,251,0.84)", backdropFilter: "blur(14px)", borderBottom: `1px solid ${AZ.line}` }}>
        <button onClick={onBack} className="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] font-medium" style={{ color: AZ.sub }}>
          <window.Icon name="ArrowLeft" size={16} /> Back to hub
        </button>
        <div className="flex items-center gap-2">
          <window.RoseMark size={18} color={AZ.blue} petals={6} />
          <span className="hidden text-[12px] sm:inline" style={{ color: AZ.faint }}>Last Rose · <span style={{ color: AZ.sub }}>Azure DevOps</span></span>
          <window.OpenInNewTab href="#/azuredevops" size={13} className="h-7 w-7" title="Open Azure DevOps in new tab" style={{ color: AZ.sub, background: AZ.surface, border: `1px solid ${AZ.line}` }} />
        </div>
        <span className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12.5px] font-semibold" style={{ background: AZ.blueSoft, color: AZ.blue, border: `1px solid ${AZ.blueBorder}` }}>
          <window.Icon name="GitBranch" size={14} /> CI/CD · MLOps
        </span>
      </div>

      {/* body */}
      <div className="lr-scroll relative z-10 flex-1 overflow-y-auto">
        <div className="mx-auto max-w-[1100px] px-6 py-8 sm:px-9">
          {/* header */}
          <div className="a-fade-up">
            <div className="flex items-center gap-3">
              {item.titleImg && <img src={item.titleImg} alt="" aria-hidden="true" style={{ width: 36, height: 36 }} className="object-contain" />}
              <h1 style={{ fontFamily: AZ.serif, color: AZ.ink }} className="text-[34px] font-medium leading-none">Azure DevOps</h1>
              <span className="hidden text-[13px] sm:inline" style={{ color: AZ.faint, fontFamily: AZ.mono }}>· SkyHR pipeline</span>
            </div>
            <p className="mt-3 max-w-3xl text-[15.5px] leading-relaxed" style={{ color: AZ.ink }}>
              The same SkyHR lifecycle on Azure DevOps with <span className="font-semibold" style={{ color: AZ.blue }}>Prisma AIRS at every gate</span> — a model-scan gauntlet, a fine-tune on Azure Machine Learning, an artifact gate, a red-team on the deployed app, and a runtime guardrail at the APIM gateway.
            </p>
            <p className="mt-2 text-[13.5px] font-semibold" style={{ color: AZ.sub }}>
              {failures} ways to fail, one way to ship.
            </p>
          </div>

          {/* two-column: timeline + action rail */}
          <div className="mt-8 grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,360px)]" style={{ alignItems: "start" }}>
            {/* timeline */}
            <div className="a-fade-up">
              <AzSectionLabel>The pipeline · top to bottom</AzSectionLabel>
              <div className="rounded-2xl px-5 py-5" style={{ background: AZ.surfaceAlt, border: `1px solid ${AZ.line}` }}>
                {stages.map((s, i) => (
                  <AzPipelineStep key={s.n} s={s} last={i === stages.length - 1} />
                ))}
                {item.stageCaption && (
                  <p className="mt-2 border-t pt-3.5 text-[12.5px] leading-relaxed" style={{ color: AZ.sub, borderColor: AZ.lineSoft }}>{item.stageCaption}</p>
                )}
              </div>
            </div>

            {/* action rail */}
            <div className="space-y-5 a-fade-up lg:sticky lg:top-4">
              <OpenInAzureDevops item={item} />
              <div className="rounded-2xl px-5 py-5" style={{ background: AZ.surface, border: `1px solid ${AZ.line}` }}>
                <AzSectionLabel>Two failures, one ship</AzSectionLabel>
                <ul className="space-y-2.5 text-[13px] leading-relaxed" style={{ color: AZ.sub }}>
                  <li className="flex gap-2"><span style={{ color: AZ.danger }}>⛔</span><span><span className="font-semibold" style={{ color: AZ.ink }}>Poisoned model</span> — a pickle-bomb candidate is caught in the model scan and never trains.</span></li>
                  <li className="flex gap-2"><span style={{ color: AZ.danger }}>⛔</span><span><span className="font-semibold" style={{ color: AZ.ink }}>Tampered artifact</span> — a trained model that's been altered is blocked at the artifact gate.</span></li>
                  <li className="flex gap-2"><span style={{ color: AZ.blue }}>✓</span><span><span className="font-semibold" style={{ color: AZ.ink }}>Clean build</span> — passes every gate, deploys to Azure Container Apps, and runs behind the AIRS runtime guardrail.</span></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AzureDevops });