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, 8080, 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:
ANTHROPIC_API_KEY=sk-ant-...`}
      />

      <Callout type="tip" title="Development mode">
        In <code>server.env=development</code> (the default), all external services degrade
        gracefully. Keycloak is bypassed (mock JWT), PostgreSQL failures disable routing, ClickHouse
        failures disable audit logs. This means you can start the proxy even if some services
        haven't fully 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 9 services: PostgreSQL, Redis, ClickHouse, Keycloak, the Go proxy, PII
        detection service, Prometheus, Grafana, and the React dashboard.
      </p>
      <p>
        Wait for the proxy to print <code>server listening on :8090</code>. First startup takes
        ~2 minutes while Keycloak initializes and database migrations run.
      </p>

      <h2 id="step-4-verify">Step 4 — Verify the stack</h2>
      <CodeBlock
        language="bash"
        code={`# Health check
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: "dev mode (no auth)" },
              { service: "Keycloak Admin", url: "http://localhost:8080", creds: "admin / admin" },
              { service: "Grafana", url: "http://localhost:3001", creds: "admin / admin" },
              { service: "Prometheus", url: "http://localhost:9090", creds: "—" },
              { service: "API Docs", url: "http://localhost:8090/docs", creds: "—" },
              { service: "Playground", url: "http://localhost:8090/playground", 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 — Make your first AI call</h2>
      <p>
        In development mode, the proxy uses a mock JWT verifier. Pass any Bearer token and the
        request will be authenticated as <code>admin@veylant.dev</code>.
      </p>
      <CodeBlock
        language="bash"
        code={`curl http://localhost:8090/v1/chat/completions \\
  -H "Authorization: Bearer dev-token" \\
  -H "Content-Type: application/json" \\
  -d '{
    "model": "gpt-4o",
    "messages": [{"role": "user", "content": "Hello, Veylant!"}]
  }'`}
      />

      <p>Or use the OpenAI Python SDK with a changed base URL:</p>
      <CodeBlock
        language="python"
        code={`from openai import OpenAI

client = OpenAI(
    base_url="http://localhost:8090/v1",
    api_key="dev-token",  # any string in dev mode
)

response = client.chat.completions.create(
    model="gpt-4o",
    messages=[{"role": "user", "content": "Hello, Veylant!"}],
)
print(response.choices[0].message.content)`}
      />

      <h2 id="step-6-dashboard">Step 6 — Explore the dashboard</h2>
      <p>
        Open <code>http://localhost:3000</code> to see the React dashboard. In development mode,
        you're automatically logged in as <code>Dev Admin</code>. You'll see:
      </p>
      <ul>
        <li>
          <strong>Overview</strong> — request counts, costs, and tokens consumed
        </li>
        <li>
          <strong>Playground IA</strong> — test prompts with live PII detection visualization
        </li>
        <li>
          <strong>Policies</strong> — create and manage routing rules
        </li>
        <li>
          <strong>Compliance</strong> — GDPR Article 30 registry and AI Act questionnaire
        </li>
      </ul>

      <Callout type="tip" title="Next: Configure a routing rule">
        Try creating a routing rule in the dashboard 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>
  );
}
