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

export function AdminUsersPage() {
  return (
    <div>
      <h1 id="admin-users">Admin — Users</h1>
      <p>
        Manage users within a tenant. Users are synchronized from Keycloak but can have additional
        metadata (department, cost overrides) managed through the admin API.
      </p>

      <Callout type="info" title="Required role">
        Requires <code>admin</code> role. Managers can read users but cannot create or delete.
      </Callout>

      <h2 id="list">List Users</h2>
      <ApiEndpoint method="GET" path="/v1/admin/users" description="Return all users for the current tenant." />
      <CodeBlock
        language="bash"
        code={`curl http://localhost:8090/v1/admin/users \\
  -H "Authorization: Bearer $TOKEN"

# Response:
{
  "data": [
    {
      "id": "user-uuid",
      "email": "alice@acme.com",
      "name": "Alice Martin",
      "role": "user",
      "department": "legal",
      "tenant_id": "tenant-uuid",
      "created_at": "2026-01-01T00:00:00Z"
    }
  ]
}`}
      />

      <h2 id="create">Create User</h2>
      <ApiEndpoint method="POST" path="/v1/admin/users" description="Create or sync a user in the tenant database." />
      <ParamTable
        params={[
          { name: "email", type: "string", required: true, description: "User email (must match Keycloak account)." },
          { name: "name", type: "string", required: true, description: "Display name." },
          { name: "role", type: "string", required: true, description: "RBAC role: admin | manager | user | auditor" },
          { name: "department", type: "string", required: false, description: "Department name — used in routing rule conditions." },
        ]}
      />

      <h2 id="get">Get User</h2>
      <ApiEndpoint method="GET" path="/v1/admin/users/{id}" description="Return a single user by ID." />

      <h2 id="update">Update User</h2>
      <ApiEndpoint method="PUT" path="/v1/admin/users/{id}" description="Update user metadata (role, department)." />

      <h2 id="roles">RBAC Role Reference</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">Role</th>
              <th className="text-left px-4 py-2.5 font-semibold">Inference</th>
              <th className="text-left px-4 py-2.5 font-semibold">Models</th>
              <th className="text-left px-4 py-2.5 font-semibold">Admin API</th>
              <th className="text-left px-4 py-2.5 font-semibold">Audit/Compliance</th>
            </tr>
          </thead>
          <tbody>
            {[
              { role: "admin", infer: "Yes", models: "All", admin: "Full", audit: "Read" },
              { role: "manager", infer: "Yes", models: "All", admin: "Read-Write policies/users", audit: "Read" },
              { role: "user", infer: "Yes", models: "rbac.user_allowed_models only", admin: "None", audit: "None" },
              { role: "auditor", infer: "No", models: "—", admin: "None", audit: "Full read + export" },
            ].map((row) => (
              <tr key={row.role} className="border-b last:border-0">
                <td className="px-4 py-2.5 font-mono text-xs font-semibold">{row.role}</td>
                <td className="px-4 py-2.5 text-xs">{row.infer}</td>
                <td className="px-4 py-2.5 text-xs text-muted-foreground">{row.models}</td>
                <td className="px-4 py-2.5 text-xs text-muted-foreground">{row.admin}</td>
                <td className="px-4 py-2.5 text-xs text-muted-foreground">{row.audit}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
