import { CodeBlock } from "../components/CodeBlock";
import { Callout } from "../components/Callout";

export function BlueGreenPage() {
  return (
    <div>
      <h1 id="blue-green">Blue/Green Deployment</h1>
      <p>
        Veylant IA supports zero-downtime deployments via blue/green traffic switching with Istio.
        Two Helm releases (<code>veylant-proxy-blue</code> and <code>veylant-proxy-green</code>)
        run simultaneously; traffic is switched via an Istio VirtualService patch.
      </p>

      <Callout type="tip" title="Rollback time">
        Traffic rollback is under <strong>5 seconds</strong> — just patch the VirtualService weight.
        No pod restarts required.
      </Callout>

      <h2 id="architecture">Architecture</h2>
      <div className="my-4 rounded-lg border bg-zinc-950 text-zinc-100 p-4 font-mono text-xs leading-relaxed overflow-x-auto">
        <pre>{`Internet
    │
Istio Gateway
    │
VirtualService (veylant-proxy)
    ├── weight: 100 → Service: veylant-proxy-blue   (ACTIVE)
    └── weight:   0 → Service: veylant-proxy-green  (STANDBY)

Helm releases:
  veylant-proxy-blue:  3 replicas, image: 1.0.0  ← current production
  veylant-proxy-green: 3 replicas, image: 1.1.0  ← new version (deployed but no traffic)`}</pre>
      </div>

      <h2 id="deploy-new-version">Deploying a New Version</h2>
      <CodeBlock
        language="bash"
        code={`# Step 1: Deploy to the inactive slot (green)
make deploy-green IMAGE_TAG=1.1.0

# Step 2: Verify green is healthy
kubectl rollout status deployment/veylant-proxy-green -n veylant
curl http://green.internal.veylant.local/healthz

# Step 3: Switch traffic (blue → green)
kubectl patch virtualservice veylant-proxy -n veylant --type=json -p '[
  {"op":"replace","path":"/spec/http/0/route/0/weight","value":0},
  {"op":"replace","path":"/spec/http/0/route/1/weight","value":100}
]'

# Step 4: Verify production traffic on green
kubectl logs -l app=veylant-proxy,slot=green -n veylant --tail=20`}
      />

      <h2 id="rollback">Rollback</h2>
      <CodeBlock
        language="bash"
        code={`# Instant rollback — switch traffic back to blue
make deploy-rollback ACTIVE_SLOT=blue

# Or manually:
kubectl patch virtualservice veylant-proxy -n veylant --type=json -p '[
  {"op":"replace","path":"/spec/http/0/route/0/weight","value":100},
  {"op":"replace","path":"/spec/http/0/route/1/weight","value":0}
]'`}
      />

      <h2 id="make-commands">Make Commands</h2>
      <div className="overflow-x-auto my-4">
        <table className="w-full text-sm border rounded-lg overflow-hidden">
          <thead>
            <tr className="bg-muted/50 border-b">
              <th className="text-left px-4 py-2.5 font-semibold">Command</th>
              <th className="text-left px-4 py-2.5 font-semibold">Action</th>
            </tr>
          </thead>
          <tbody>
            {[
              { cmd: "make deploy-blue IMAGE_TAG=X.Y.Z", action: "Deploy IMAGE_TAG to blue slot (Helm upgrade)" },
              { cmd: "make deploy-green IMAGE_TAG=X.Y.Z", action: "Deploy IMAGE_TAG to green slot (Helm upgrade)" },
              { cmd: "make deploy-rollback ACTIVE_SLOT=blue", action: "Switch 100% traffic to blue slot" },
              { cmd: "make deploy-rollback ACTIVE_SLOT=green", action: "Switch 100% traffic to green slot" },
              { cmd: "make helm-dry-run", action: "Render Helm templates without deploying" },
              { cmd: "make helm-deploy IMAGE_TAG=X.Y.Z", action: "Deploy to staging (requires KUBECONFIG)" },
            ].map((row) => (
              <tr key={row.cmd} className="border-b last:border-0">
                <td className="px-4 py-2.5 font-mono text-xs">{row.cmd}</td>
                <td className="px-4 py-2.5 text-xs text-muted-foreground">{row.action}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <h2 id="release-pipeline">Release Pipeline</h2>
      <p>
        Tagging a version (<code>v*</code>) triggers the GitHub Actions release pipeline:
      </p>
      <ol>
        <li>Multi-arch Docker build (amd64/arm64) → pushed to GHCR</li>
        <li>Helm chart packaged as OCI artifact → pushed to GHCR</li>
        <li>GitHub Release created with CHANGELOG.md notes extracted automatically</li>
        <li>Trivy image scan (CRITICAL/HIGH blocking)</li>
        <li>gitleaks secret detection</li>
      </ol>
    </div>
  );
}
