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

export function QuickStartPage() {
  return (
    <div>
      <h1 id="quick-start">Quick Start</h1>
      <p>
        This guide gets you from zero to a running Veylant IA instance in under 5 minutes using
        Docker Compose.
      </p>

      <Callout type="info" title="Prerequisites">
        You need <strong>Docker 24+</strong> and <strong>Docker Compose v2</strong> installed.
        Clone the repository and ensure ports 8090, 5432, 6379, 8123, 3000, and 3001 are free.
      </Callout>

      <h2 id="step-1-clone">Step 1 — Clone the repository</h2>
      <CodeBlock
        language="bash"
        code={`git clone https://github.com/veylant/ia-gateway.git
cd ia-gateway`}
      />

      <h2 id="step-2-configure">Step 2 — Configure environment</h2>
      <p>
        Copy the sample environment file and add at least one LLM provider API key. For a minimal
        setup, OpenAI is enough.
      </p>
      <CodeBlock
        language="bash"
        code={`cp .env.example .env

# Edit .env and set:
OPENAI_API_KEY=sk-...
# Optional additional providers:
ANTHROPIC_API_KEY=sk-ant-...
# JWT secret for auth (change in production):
VEYLANT_AUTH_JWT_SECRET=change-me-min-32-chars-dev-only`}
      />

      <Callout type="tip" title="Development mode graceful degradation">
        In <code>server.env=development</code> (the default), all external services degrade
        gracefully: PostgreSQL failures disable routing rules, ClickHouse failures fall back to an
        in-memory audit log (data not persisted), and PII failures are silently skipped if{" "}
        <code>pii.fail_open=true</code>. The proxy stays up even if some services haven't
        initialized yet.
      </Callout>

      <h2 id="step-3-start">Step 3 — Start the stack</h2>
      <CodeBlock
        language="bash"
        code={`make dev

# Or directly:
docker compose up --build`}
      />
      <p>
        This starts 8 services: PostgreSQL, Redis, ClickHouse, the Go proxy, PII detection
        service, Prometheus, Grafana, and the React dashboard.
      </p>
      <p>
        Wait for the proxy to print{" "}
        <code>Veylant IA proxy started addr=:8090</code>. First startup takes ~60 seconds while
        PostgreSQL runs migrations.
      </p>

      <h2 id="step-4-verify">Step 4 — Verify the stack</h2>
      <CodeBlock
        language="bash"
        code={`# Health check — no auth required
curl http://localhost:8090/healthz
# {"status":"ok","version":"1.0.0"}`}
      />

      <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">Service</th>
              <th className="text-left px-4 py-2.5 font-semibold">URL</th>
              <th className="text-left px-4 py-2.5 font-semibold">Credentials</th>
            </tr>
          </thead>
          <tbody>
            {[
              { service: "AI Proxy", url: "http://localhost:8090", creds: "—" },
              { service: "React Dashboard", url: "http://localhost:3000", creds: "admin@veylant.dev / admin123" },
              { service: "Documentation", url: "http://localhost:3000/docs", creds: "— (public)" },
              { service: "API Playground", url: "http://localhost:8090/playground", creds: "— (public)" },
              { service: "OpenAPI Docs", url: "http://localhost:8090/docs", creds: "— (public)" },
              { service: "Grafana", url: "http://localhost:3001", creds: "admin / admin" },
              { service: "Prometheus", url: "http://localhost:9090", creds: "—" },
            ].map((row) => (
              <tr key={row.service} className="border-b last:border-0">
                <td className="px-4 py-2.5 font-medium">{row.service}</td>
                <td className="px-4 py-2.5">
                  <code className="text-xs">{row.url}</code>
                </td>
                <td className="px-4 py-2.5 text-muted-foreground text-xs">{row.creds}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <h2 id="step-5-first-call">Step 5 — Authenticate and make your first AI call</h2>
      <p>
        Log in to get a JWT token, then use it as a Bearer token on all <code>/v1/*</code>{" "}
        requests.
      </p>
      <CodeBlock
        language="bash"
        code={`# Step 5a — Login to get a JWT token
TOKEN=$(curl -s -X POST http://localhost:8090/v1/auth/login \\
  -H "Content-Type: application/json" \\
  -d '{"email":"admin@veylant.dev","password":"admin123"}' | jq -r '.token')

echo "Token: $TOKEN"

# Step 5b — Make your first AI call
curl http://localhost:8090/v1/chat/completions \\
  -H "Authorization: Bearer $TOKEN" \\
  -H "Content-Type: application/json" \\
  -d '{
    "model": "gpt-4o-mini",
    "messages": [{"role": "user", "content": "Bonjour depuis Veylant IA !"}]
  }'`}
      />

      <p>Or use the OpenAI Python SDK by simply changing the base URL:</p>
      <CodeBlock
        language="python"
        code={`import httpx
from openai import OpenAI

# Step 1: obtain a token
token = httpx.post("http://localhost:8090/v1/auth/login", json={
    "email": "admin@veylant.dev",
    "password": "admin123",
}).json()["token"]

# Step 2: use the OpenAI SDK with Veylant as the base URL
client = OpenAI(
    base_url="http://localhost:8090/v1",
    api_key=token,          # Veylant uses JWT, not an API key
)

response = client.chat.completions.create(
    model="gpt-4o-mini",
    messages=[{"role": "user", "content": "Résume ce contrat en 3 points."}],
)
print(response.choices[0].message.content)`}
      />

      <Callout type="tip" title="Drop-in replacement for any OpenAI SDK">
        Veylant IA is 100% OpenAI-API compatible. Point any existing SDK (Python, Node.js, Go,
        Rust…) to <code>http://localhost:8090/v1</code> and pass the JWT as the API key.
      </Callout>

      <h2 id="step-6-dashboard">Step 6 — Explore the dashboard</h2>
      <p>
        Open <code>http://localhost:3000</code> and log in with{" "}
        <code>admin@veylant.dev / admin123</code>. You'll find:
      </p>
      <ul>
        <li>
          <strong>Vue d'ensemble</strong> — request counts, costs, tokens consumed, volume chart
          (7d/30d)
        </li>
        <li>
          <strong>Playground IA</strong> — test prompts with live PII detection visualization
        </li>
        <li>
          <strong>Politiques</strong> — create and manage routing rules
        </li>
        <li>
          <strong>Conformité</strong> — GDPR Article 30 registry and EU AI Act questionnaire
        </li>
        <li>
          <strong>Fournisseurs</strong> — configure LLM providers with encrypted API key storage
        </li>
      </ul>

      <Callout type="tip" title="Next: Configure a routing rule">
        Try creating a routing rule that sends all requests from the <code>Legal</code> department
        to Anthropic instead of OpenAI. See{" "}
        <a href="/docs/guides/routing">Routing Rules Engine</a> for the full guide.
      </Callout>

      <h2 id="stop-the-stack">Stop the stack</h2>
      <CodeBlock language="bash" code={`make dev-down\n# Stops all containers and removes volumes`} />
    </div>
  );
}
