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

export function RbacGuide() {
  return (
    <div>
      <h1 id="rbac">RBAC & Permissions</h1>
      <p>
        Veylant IA enforces Role-Based Access Control on every request. Roles are embedded in the
        Keycloak JWT and cannot be elevated at runtime.
      </p>

      <h2 id="roles">Roles</h2>
      <div className="space-y-4 my-4">
        {[
          {
            role: "admin",
            color: "bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300",
            description: "Full access. Can manage policies, users, providers, feature flags, and read all compliance/audit data. Has unrestricted model access.",
          },
          {
            role: "manager",
            color: "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300",
            description: "Read-write access to routing policies and users. Can run AI inference with any model. Cannot manage feature flags or access compliance reports.",
          },
          {
            role: "user",
            color: "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300",
            description: "Inference only. Restricted to the model list in rbac.user_allowed_models (default: gpt-4o-mini, mistral-medium). No admin API access.",
          },
          {
            role: "auditor",
            color: "bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300",
            description: "Read-only access to audit logs and compliance data. Cannot call /v1/chat/completions. Intended for compliance officers and DPOs.",
          },
        ].map((item) => (
          <div key={item.role} className="rounded-lg border bg-card p-4 flex items-start gap-3">
            <span className={`text-xs font-bold px-2 py-0.5 rounded font-mono shrink-0 ${item.color}`}>
              {item.role}
            </span>
            <p className="text-sm text-muted-foreground leading-relaxed">{item.description}</p>
          </div>
        ))}
      </div>

      <h2 id="permission-matrix">Permission Matrix</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">Endpoint</th>
              <th className="text-center px-3 py-2.5 font-semibold">admin</th>
              <th className="text-center px-3 py-2.5 font-semibold">manager</th>
              <th className="text-center px-3 py-2.5 font-semibold">user</th>
              <th className="text-center px-3 py-2.5 font-semibold">auditor</th>
            </tr>
          </thead>
          <tbody>
            {[
              { ep: "POST /v1/chat/completions", admin: "✓", manager: "✓", user: "✓ (limited models)", auditor: "✗" },
              { ep: "POST /v1/pii/analyze", admin: "✓", manager: "✓", user: "✓", auditor: "✓" },
              { ep: "GET /v1/admin/policies", admin: "✓", manager: "✓", user: "✗", auditor: "✗" },
              { ep: "POST/PUT/DELETE /v1/admin/policies", admin: "✓", manager: "✓", user: "✗", auditor: "✗" },
              { ep: "GET/POST/PUT /v1/admin/users", admin: "✓", manager: "read only", user: "✗", auditor: "✗" },
              { ep: "GET /v1/admin/logs", admin: "✓", manager: "✓", user: "✗", auditor: "✓" },
              { ep: "GET /v1/admin/costs", admin: "✓", manager: "✓", user: "✗", auditor: "✓" },
              { ep: "GET /v1/admin/compliance/*", admin: "✓", manager: "✗", user: "✗", auditor: "✓" },
              { ep: "POST /v1/admin/compliance/*", admin: "✓", manager: "✗", user: "✗", auditor: "✗" },
              { ep: "GET/PUT/DELETE /v1/admin/flags", admin: "✓", manager: "✗", user: "✗", auditor: "✗" },
              { ep: "GET /v1/admin/providers/status", admin: "✓", manager: "✓", user: "✗", auditor: "✗" },
            ].map((row) => (
              <tr key={row.ep} className="border-b last:border-0">
                <td className="px-4 py-2.5 font-mono text-xs">{row.ep}</td>
                {[row.admin, row.manager, row.user, row.auditor].map((v, i) => (
                  <td key={i} className={`px-3 py-2.5 text-xs text-center ${v === "✗" ? "text-muted-foreground" : v === "✓" ? "text-green-600 dark:text-green-400 font-medium" : "text-amber-600 dark:text-amber-400"}`}>
                    {v}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <h2 id="model-restrictions">Model Restrictions</h2>
      <p>
        Users with the <code>user</code> role can only access models listed in{" "}
        <code>rbac.user_allowed_models</code>. Requests to other models are rejected with 403:
      </p>
      <CodeBlock
        language="yaml"
        code={`# config.yaml
rbac:
  user_allowed_models:
    - "gpt-4o-mini"
    - "mistral-medium-latest"
    - "claude-3-haiku-20240307"`}
      />
      <CodeBlock
        language="json"
        code={`// 403 response when user requests gpt-4o:
{
  "error": {
    "type": "permission_error",
    "message": "role 'user' does not have access to model 'gpt-4o'. Allowed: gpt-4o-mini, mistral-medium-latest, claude-3-haiku-20240307",
    "code": "permission_denied"
  }
}`}
      />

      <Callout type="tip" title="Admin and manager bypass model restrictions">
        The <code>admin</code> and <code>manager</code> roles have unrestricted model access —{" "}
        <code>user_allowed_models</code> does not apply to them.
      </Callout>

      <h2 id="keycloak-setup">Setting Up Roles in Keycloak</h2>
      <p>Assign roles to users in Keycloak:</p>
      <ol>
        <li>Log in to Keycloak Admin Console (http://localhost:8080, admin/admin)</li>
        <li>Go to <strong>Realm: veylant</strong> → <strong>Users</strong></li>
        <li>Select a user → <strong>Role Mappings</strong> → <strong>Realm Roles</strong></li>
        <li>Assign one of: <code>admin</code>, <code>manager</code>, <code>user</code>, <code>auditor</code></li>
      </ol>
    </div>
  );
}
