API Keys and Webhooks: Building Developer-Friendly Integrations

model ApiKey {
  id             String    @id @default(cuid())
  name           String
  keyPrefix      String    // "sk_live_a1b2..." for display
  hashedKey      String    @unique
  organizationId String
  createdBy      String
  scopes         String[]  // ["read:users", "write:projects"]
  lastUsedAt     DateTime?
  expiresAt      DateTime?
  revokedAt      DateTime?
  ipAllowlist    String[]  // Optional IP restrictions
  rateLimitTier  String    @default("standard")
  createdAt      DateTime  @default(now())
  updatedAt      DateTime  @updatedAt

  organization Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)
  creator      User         @relation(fields: [createdBy], references: [id])
  usageLogs    ApiKeyUsage[]
}

model ApiKeyUsage {
  id        String   @id @default(cuid())
  apiKeyId  String
  endpoint  String
  method    String
  statusCode Int
  ipAddress String
  userAgent String?
  timestamp DateTime @default(now())

  apiKey ApiKey @relation(fields: [apiKeyId], references: [id], onDelete: Cascade)

  @@index([apiKeyId, timestamp])
}

// src/lib/api-keys/generate.ts
import { randomBytes, createHash, timingSafeEqual } from 'crypto';

export interface GeneratedApiKey {
  key: string;         // Full key - show once, never store
  keyPrefix: string;   // Display prefix
  hashedKey: string;   // Store this
}

/**
 * Generate a cryptographically secure API key
 *
 * Security properties:
 * - 192 bits of entropy (24 random bytes)
 * - Collision probability: 1 in 2^192
 * - Brute force infeasible: 10^57 possible keys
 */
export function generateApiKey(
  environment: 'live' | 'test' = 'live'
): GeneratedApiKey {
  // Generate 24 random bytes (192 bits of entropy)
  const randomPart = randomBytes(24).toString('hex');

  // Construct full key with prefix
  const key = `sk_${environment}_${randomPart}`;

  // Create display prefix (first 12 chars + ellipsis)
  const keyPrefix = `${key.slice(0, 16)}...${key.slice(-4)}`;

  // Hash for storage using SHA-256
  const hashedKey = hashApiKey(key);

  return {
    key,
    keyPrefix,
    hashedKey,
  };
}

/**
 * Hash an API key for storage
 * Using SHA-256 - fast enough for validation, secure for storage
 */
export function hashApiKey(key: string): string {
  return createHash('sha256').update(key).digest('hex');
}

/**
 * Timing-safe comparison to prevent timing attacks
 */
export function compareApiKeyHash(
  providedKey: string,
  storedHash: string
): boolean {
  const providedHash = Buffer.from(hashApiKey(providedKey), 'hex');
  const expectedHash = Buffer.from(storedHash, 'hex');

  if (providedHash.length !== expectedHash.length) {
    return false;
  }

  return timingSafeEqual(providedHash, expectedHash);
}

// src/lib/api-keys/service.ts
import { prisma } from '@/lib/prisma';
import { generateApiKey } from './generate';
import { ApiKeyScope, validateScopes } from './scopes';

export interface CreateApiKeyInput {
  name: string;
  organizationId: string;
  createdBy: string;
  scopes?: ApiKeyScope[];
  expiresInDays?: number;
  ipAllowlist?: string[];
  environment?: 'live' | 'test';
}

export interface CreateApiKeyResult {
  id: string;
  name: string;
  key: string;        // Raw key - return ONCE
  keyPrefix: string;
  scopes: string[];
  expiresAt: Date | null;
  createdAt: Date;
}

export async function createApiKey(
  input: CreateApiKeyInput
): Promise<CreateApiKeyResult> {
  const {
    name,
    organizationId,
    createdBy,
    scopes = ['read:all'],
    expiresInDays,
    ipAllowlist = [],
    environment = 'live',
  } = input;

  // Validate scopes
  const validatedScopes = validateScopes(scopes);

  // Generate key
  const { key, keyPrefix, hashedKey } = generateApiKey(environment);

  // Calculate expiration
  const expiresAt = expiresInDays
    ? new Date(Date.now() + expiresInDays * 24 * 60 * 60 * 1000)
    : null;

  // Create database record
  const apiKey = await prisma.apiKey.create({
    data: {
      name,
      keyPrefix,
      hashedKey,
      organizationId,
      createdBy,
      scopes: validatedScopes,
      expiresAt,
      ipAllowlist,
    },
  });

  return {
    id: apiKey.id,
    name: apiKey.name,
    key,  // Raw key - only time it's ever returned
    keyPrefix: apiKey.keyPrefix,
    scopes: apiKey.scopes,
    expiresAt: apiKey.expiresAt,
    createdAt: apiKey.createdAt,
  };
}

export async function revokeApiKey(
  keyId: string,
  organizationId: string
): Promise<void> {
  await prisma.apiKey.update({
    where: {
      id: keyId,
      organizationId, // Ensure ownership
    },
    data: {
      revokedAt: new Date(),
    },
  });
}

export async function listApiKeys(
  organizationId: string
) {
  return prisma.apiKey.findMany({
    where: {
      organizationId,
      revokedAt: null,
    },
    select: {
      id: true,
      name: true,
      keyPrefix: true,
      scopes: true,
      lastUsedAt: true,
      expiresAt: true,
      createdAt: true,
      creator: {
        select: {
          name: true,
          email: true,
        },
      },
    },
    orderBy: {
      createdAt: 'desc',
    },
  });
}

// src/lib/api-keys/validate.ts
import { prisma } from '@/lib/prisma';
import { hashApiKey, compareApiKeyHash } from './generate';
import { LRUCache } from 'lru-cache';

// In-memory cache for validated keys
// TTL: 5 minutes, Max: 10,000 entries
const keyCache = new LRUCache<string, CachedApiKey>({
  max: 10000,
  ttl: 1000 * 60 * 5, // 5 minutes
});

interface CachedApiKey {
  id: string;
  organizationId: string;
  scopes: string[];
  expiresAt: Date | null;
  revokedAt: Date | null;
  ipAllowlist: string[];
  rateLimitTier: string;
}

export interface ValidatedApiKey extends CachedApiKey {
  hashedKey: string;
}

export async function validateApiKey(
  key: string,
  clientIp?: string
): Promise<ValidatedApiKey | null> {
  // Check format
  if (!key.startsWith('sk_')) {
    return null;
  }

  const hashedKey = hashApiKey(key);

  // Check cache first
  const cached = keyCache.get(hashedKey);
  if (cached) {
    // Validate cached entry
    if (!isKeyValid(cached, clientIp)) {
      return null;
    }
    return { ...cached, hashedKey };
  }

  // Query database
  const apiKey = await prisma.apiKey.findFirst({
    where: { hashedKey },
    select: {
      id: true,
      organizationId: true,
      scopes: true,
      expiresAt: true,
      revokedAt: true,
      ipAllowlist: true,
      rateLimitTier: true,
    },
  });

  if (!apiKey) {
    return null;
  }

  // Validate key
  if (!isKeyValid(apiKey, clientIp)) {
    return null;
  }

  // Cache valid key
  keyCache.set(hashedKey, apiKey);

  // Update last used (async, non-blocking)
  updateLastUsed(apiKey.id).catch(console.error);

  return { ...apiKey, hashedKey };
}

function isKeyValid(
  key: CachedApiKey,
  clientIp?: string
): boolean {
  // Check if revoked
  if (key.revokedAt) {
    return false;
  }

  // Check expiration
  if (key.expiresAt && key.expiresAt < new Date()) {
    return false;
  }

  // Check IP allowlist
  if (key.ipAllowlist.length > 0 && clientIp) {
    if (!key.ipAllowlist.includes(clientIp)) {
      return false;
    }
  }

  return true;
}

async function updateLastUsed(keyId: string): Promise<void> {
  await prisma.apiKey.update({
    where: { id: keyId },
    data: { lastUsedAt: new Date() },
  });
}

/**
 * Invalidate cache when key is revoked or updated
 */
export function invalidateKeyCache(hashedKey: string): void {
  keyCache.delete(hashedKey);
}

// src/lib/api-keys/scopes.ts

/**
 * Available API key scopes
 * Format: action:resource
 */
export const API_SCOPES = {
  // User scopes
  'read:users': 'Read user profiles',
  'write:users': 'Create and update users',
  'delete:users': 'Delete users',

  // Project scopes
  'read:projects': 'Read project data',
  'write:projects': 'Create and update projects',
  'delete:projects': 'Delete projects',

  // Billing scopes
  'read:billing': 'Read invoices and subscriptions',
  'write:billing': 'Update payment methods',

  // Webhook scopes
  'read:webhooks': 'List webhook configurations',
  'write:webhooks': 'Create and update webhooks',

  // Admin scopes
  'admin:all': 'Full administrative access',

  // Convenience scopes
  'read:all': 'Read access to all resources',
  'write:all': 'Write access to all resources',
} as const;

export type ApiKeyScope = keyof typeof API_SCOPES;

/**
 * Validate and expand scopes
 */
export function validateScopes(scopes: string[]): ApiKeyScope[] {
  const validScopes: ApiKeyScope[] = [];

  for (const scope of scopes) {
    if (scope in API_SCOPES) {
      validScopes.push(scope as ApiKeyScope);
    }
  }

  return validScopes.length > 0 ? validScopes : ['read:all'];
}

/**
 * Check if a key has required scope
 */
export function hasScope(
  keyScopes: string[],
  requiredScope: ApiKeyScope
): boolean {
  // Admin has all scopes
  if (keyScopes.includes('admin:all')) {
    return true;
  }

  // Check exact match
  if (keyScopes.includes(requiredScope)) {
    return true;
  }

  // Check wildcard scopes
  const [action, resource] = requiredScope.split(':');

  if (action === 'read' && keyScopes.includes('read:all')) {
    return true;
  }

  if (action === 'write' && keyScopes.includes('write:all')) {
    return true;
  }

  return false;
}

/**
 * Middleware helper to require specific scope
 */
export function requireScope(scope: ApiKeyScope) {
  return (keyScopes: string[]): boolean => {
    return hasScope(keyScopes, scope);
  };
}

// src/lib/api-keys/rate-limit.ts
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_URL!,
  token: process.env.UPSTASH_REDIS_TOKEN!,
});

// Rate limit tiers
const RATE_LIMITS = {
  free: { requests: 100, window: '1m' },
  standard: { requests: 1000, window: '1m' },
  professional: { requests: 5000, window: '1m' },
  enterprise: { requests: 50000, window: '1m' },
} as const;

type RateLimitTier = keyof typeof RATE_LIMITS;

// Create rate limiters for each tier
const rateLimiters = Object.entries(RATE_LIMITS).reduce(
  (acc, [tier, config]) => {
    acc[tier as RateLimitTier] = new Ratelimit({
      redis,
      limiter: Ratelimit.slidingWindow(
        config.requests,
        config.window as '1m'
      ),
      prefix: `ratelimit:api:${tier}`,
    });
    return acc;
  },
  {} as Record<RateLimitTier, Ratelimit>
);

export interface RateLimitResult {
  success: boolean;
  limit: number;
  remaining: number;
  reset: number;
  retryAfter?: number;
}

export async function checkRateLimit(
  identifier: string,
  tier: string = 'standard'
): Promise<RateLimitResult> {
  const limiter = rateLimiters[tier as RateLimitTier] || rateLimiters.standard;
  const config = RATE_LIMITS[tier as RateLimitTier] || RATE_LIMITS.standard;

  const result = await limiter.limit(identifier);

  return {
    success: result.success,
    limit: config.requests,
    remaining: result.remaining,
    reset: result.reset,
    retryAfter: result.success ? undefined : Math.ceil((result.reset - Date.now()) / 1000),
  };
}

/**
 * Add rate limit headers to response
 */
export function addRateLimitHeaders(
  headers: Headers,
  result: RateLimitResult
): void {
  headers.set('X-RateLimit-Limit', result.limit.toString());
  headers.set('X-RateLimit-Remaining', result.remaining.toString());
  headers.set('X-RateLimit-Reset', result.reset.toString());

  if (result.retryAfter) {
    headers.set('Retry-After', result.retryAfter.toString());
  }
}

// src/lib/api-keys/middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import { validateApiKey, ValidatedApiKey } from './validate';
import { hasScope, ApiKeyScope } from './scopes';
import { checkRateLimit, addRateLimitHeaders } from './rate-limit';

export interface ApiContext {
  apiKey: ValidatedApiKey;
  organizationId: string;
}

export type ApiHandler = (
  request: NextRequest,
  context: ApiContext
) => Promise<NextResponse>;

interface WithApiKeyOptions {
  requiredScopes?: ApiKeyScope[];
}

/**
 * Middleware wrapper for API key authentication
 */
export function withApiKey(
  handler: ApiHandler,
  options: WithApiKeyOptions = {}
) {
  return async (request: NextRequest): Promise<NextResponse> => {
    // Extract API key from header
    const authHeader = request.headers.get('authorization');

    if (!authHeader?.startsWith('Bearer ')) {
      return NextResponse.json(
        {
          error: {
            code: 'MISSING_API_KEY',
            message: 'Authorization header with Bearer token required',
          },
        },
        { status: 401 }
      );
    }

    const key = authHeader.replace('Bearer ', '');

    // Get client IP for allowlist check
    const clientIp = request.headers.get('x-forwarded-for')?.split(',')[0]
      || request.headers.get('x-real-ip')
      || 'unknown';

    // Validate key
    const apiKey = await validateApiKey(key, clientIp);

    if (!apiKey) {
      return NextResponse.json(
        {
          error: {
            code: 'INVALID_API_KEY',
            message: 'API key is invalid, expired, or revoked',
          },
        },
        { status: 401 }
      );
    }

    // Check required scopes
    if (options.requiredScopes) {
      for (const scope of options.requiredScopes) {
        if (!hasScope(apiKey.scopes, scope)) {
          return NextResponse.json(
            {
              error: {
                code: 'INSUFFICIENT_SCOPE',
                message: `This action requires the '${scope}' scope`,
                required_scope: scope,
              },
            },
            { status: 403 }
          );
        }
      }
    }

    // Check rate limit
    const rateLimitResult = await checkRateLimit(
      apiKey.id,
      apiKey.rateLimitTier
    );

    if (!rateLimitResult.success) {
      const response = NextResponse.json(
        {
          error: {
            code: 'RATE_LIMIT_EXCEEDED',
            message: 'Too many requests. Please slow down.',
            retry_after: rateLimitResult.retryAfter,
          },
        },
        { status: 429 }
      );

      addRateLimitHeaders(response.headers, rateLimitResult);
      return response;
    }

    // Execute handler
    const response = await handler(request, {
      apiKey,
      organizationId: apiKey.organizationId,
    });

    // Add rate limit headers to successful response
    addRateLimitHeaders(response.headers, rateLimitResult);

    return response;
  };
}

// src/app/api/v1/users/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { withApiKey } from '@/lib/api-keys/middleware';
import { prisma } from '@/lib/prisma';

export const GET = withApiKey(
  async (request, { organizationId }) => {
    const users = await prisma.user.findMany({
      where: { organizationId },
    });

    return NextResponse.json({ data: users });
  },
  { requiredScopes: ['read:users'] }
);

export const POST = withApiKey(
  async (request, { organizationId }) => {
    const body = await request.json();

    const user = await prisma.user.create({
      data: {
        ...body,
        organizationId,
      },
    });

    return NextResponse.json({ data: user }, { status: 201 });
  },
  { requiredScopes: ['write:users'] }
);

// src/components/developer/api-key-manager.tsx
'use client';

import { useState } from 'react';
import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Copy, Key, Trash2, Clock, Shield } from 'lucide-react';
import { mode } from '@/design-system';
import { cn } from '@/lib/utils';
import { formatDistanceToNow } from 'date-fns';

interface ApiKey {
  id: string;
  name: string;
  keyPrefix: string;
  scopes: string[];
  lastUsedAt: Date | null;
  expiresAt: Date | null;
  createdAt: Date;
  creator: {
    name: string;
    email: string;
  };
}

const AVAILABLE_SCOPES = [
  { value: 'read:all', label: 'Read All', description: 'Read access to all resources' },
  { value: 'write:all', label: 'Write All', description: 'Write access to all resources' },
  { value: 'read:users', label: 'Read Users', description: 'Read user profiles' },
  { value: 'write:users', label: 'Write Users', description: 'Create and update users' },
  { value: 'read:projects', label: 'Read Projects', description: 'Read project data' },
  { value: 'write:projects', label: 'Write Projects', description: 'Create and update projects' },
  { value: 'read:billing', label: 'Read Billing', description: 'Read invoices and subscriptions' },
  { value: 'read:webhooks', label: 'Read Webhooks', description: 'List webhook configurations' },
  { value: 'write:webhooks', label: 'Write Webhooks', description: 'Create and update webhooks' },
];

export function ApiKeyManager() {
  const [keys, setKeys] = useState<ApiKey[]>([]);
  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [newKeyData, setNewKeyData] = useState<{
    key: string;
    name: string;
  } | null>(null);
  const [revokeKeyId, setRevokeKeyId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleCreateKey = async (formData: FormData) => {
    setIsLoading(true);

    try {
      const response = await fetch('/api/v1/api-keys', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: formData.get('name'),
          scopes: formData.getAll('scopes'),
          expiresInDays: formData.get('expiration') || null,
        }),
      });

      const data = await response.json();

      if (response.ok) {
        setNewKeyData({ key: data.key, name: data.name });
        setIsCreateOpen(false);
        // Refresh keys list
        fetchKeys();
      }
    } finally {
      setIsLoading(false);
    }
  };

  const handleRevokeKey = async () => {
    if (!revokeKeyId) return;

    await fetch(`/api/v1/api-keys/${revokeKeyId}`, {
      method: 'DELETE',
    });

    setRevokeKeyId(null);
    fetchKeys();
  };

  const copyToClipboard = async (text: string) => {
    await navigator.clipboard.writeText(text);
  };

  const fetchKeys = async () => {
    const response = await fetch('/api/v1/api-keys');
    const data = await response.json();
    setKeys(data.data || []);
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="font-mono text-lg font-bold uppercase">
            API KEYS
          </h2>
          <p className="text-sm text-muted-foreground">
            Manage API keys for programmatic access
          </p>
        </div>

        <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
          <DialogTrigger asChild>
            <Button className={cn(mode.radius)}>
              <Key className="mr-2 h-4 w-4" />
              {`> CREATE KEY`}
            </Button>
          </DialogTrigger>
          <DialogContent className={cn('sm:max-w-md', mode.radius)}>
            <DialogHeader>
              <DialogTitle className="font-mono uppercase">
                CREATE API KEY
              </DialogTitle>
            </DialogHeader>
            <CreateKeyForm
              onSubmit={handleCreateKey}
              isLoading={isLoading}
            />
          </DialogContent>
        </Dialog>
      </div>

      {/* New Key Display Modal */}
      {newKeyData && (
        <Card className={cn('border-2 border-primary', mode.radius)}>
          <CardHeader className="border-b border-border pb-2">
            <span className="font-mono text-xs text-primary">
              [ NEW API KEY CREATED ]
            </span>
          </CardHeader>
          <CardContent className="pt-4">
            <div className="space-y-4">
              <div className="rounded bg-muted p-4">
                <div className="flex items-center justify-between">
                  <code className="font-mono text-sm break-all">
                    {newKeyData.key}
                  </code>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => copyToClipboard(newKeyData.key)}
                  >
                    <Copy className="h-4 w-4" />
                  </Button>
                </div>
              </div>
              <div className="flex items-start gap-2 rounded border border-destructive/50 bg-destructive/10 p-3">
                <Shield className="mt-0.5 h-4 w-4 text-destructive" />
                <div className="text-sm">
                  <p className="font-medium text-destructive">
                    Save this key now
                  </p>
                  <p className="text-muted-foreground">
                    This is the only time you will see the full key.
                    Store it securely.
                  </p>
                </div>
              </div>
              <Button
                className={cn('w-full', mode.radius)}
                onClick={() => setNewKeyData(null)}
              >
                {`> I'VE SAVED MY KEY`}
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Keys Table */}
      <Card className={cn('border border-border', mode.radius)}>
        <CardHeader className="border-b border-border">
          <span className="font-mono text-xs text-muted-foreground">
            [ ACTIVE KEYS ]
          </span>
        </CardHeader>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>NAME</TableHead>
              <TableHead>KEY</TableHead>
              <TableHead>SCOPES</TableHead>
              <TableHead>LAST USED</TableHead>
              <TableHead>EXPIRES</TableHead>
              <TableHead className="w-[100px]">ACTIONS</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {keys.length === 0 ? (
              <TableRow>
                <TableCell
                  colSpan={6}
                  className="py-8 text-center text-muted-foreground"
                >
                  No API keys yet. Create one to get started.
                </TableCell>
              </TableRow>
            ) : (
              keys.map((key) => (
                <TableRow key={key.id}>
                  <TableCell className="font-medium">{key.name}</TableCell>
                  <TableCell>
                    <code className="font-mono text-xs text-muted-foreground">
                      {key.keyPrefix}
                    </code>
                  </TableCell>
                  <TableCell>
                    <div className="flex flex-wrap gap-1">
                      {key.scopes.slice(0, 2).map((scope) => (
                        <Badge
                          key={scope}
                          variant="secondary"
                          className="text-xs"
                        >
                          {scope}
                        </Badge>
                      ))}
                      {key.scopes.length > 2 && (
                        <Badge variant="outline" className="text-xs">
                          +{key.scopes.length - 2}
                        </Badge>
                      )}
                    </div>
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {key.lastUsedAt
                      ? formatDistanceToNow(new Date(key.lastUsedAt), {
                          addSuffix: true,
                        })
                      : 'Never'}
                  </TableCell>
                  <TableCell>
                    {key.expiresAt ? (
                      <div className="flex items-center gap-1 text-sm">
                        <Clock className="h-3 w-3" />
                        {formatDistanceToNow(new Date(key.expiresAt), {
                          addSuffix: true,
                        })}
                      </div>
                    ) : (
                      <span className="text-sm text-muted-foreground">
                        Never
                      </span>
                    )}
                  </TableCell>
                  <TableCell>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="text-destructive hover:text-destructive"
                      onClick={() => setRevokeKeyId(key.id)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Card>

      {/* Revoke Confirmation */}
      <AlertDialog
        open={!!revokeKeyId}
        onOpenChange={() => setRevokeKeyId(null)}
      >
        <AlertDialogContent className={cn(mode.radius)}>
          <AlertDialogHeader>
            <AlertDialogTitle className="font-mono uppercase">
              REVOKE API KEY
            </AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. Any applications using this key
              will immediately lose access.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel className={cn(mode.radius)}>
              {`> CANCEL`}
            </AlertDialogCancel>
            <AlertDialogAction
              className={cn(mode.radius, 'bg-destructive text-destructive-foreground')}
              onClick={handleRevokeKey}
            >
              {`> REVOKE KEY`}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}

function CreateKeyForm({
  onSubmit,
  isLoading,
}: {
  onSubmit: (formData: FormData) => void;
  isLoading: boolean;
}) {
  const [selectedScopes, setSelectedScopes] = useState<string[]>(['read:all']);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    selectedScopes.forEach((scope) => formData.append('scopes', scope));
    onSubmit(formData);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="name" className="font-mono text-xs uppercase">
          KEY NAME
        </Label>
        <Input
          id="name"
          name="name"
          placeholder="Production API Key"
          required
          className={cn(mode.radius)}
        />
      </div>

      <div className="space-y-2">
        <Label className="font-mono text-xs uppercase">SCOPES</Label>
        <div className="space-y-2 rounded border border-border p-3">
          {AVAILABLE_SCOPES.map((scope) => (
            <div key={scope.value} className="flex items-start gap-2">
              <Checkbox
                id={scope.value}
                checked={selectedScopes.includes(scope.value)}
                onCheckedChange={(checked) => {
                  setSelectedScopes((prev) =>
                    checked
                      ? [...prev, scope.value]
                      : prev.filter((s) => s !== scope.value)
                  );
                }}
              />
              <div className="grid gap-0.5">
                <Label
                  htmlFor={scope.value}
                  className="text-sm font-medium cursor-pointer"
                >
                  {scope.label}
                </Label>
                <p className="text-xs text-muted-foreground">
                  {scope.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor="expiration" className="font-mono text-xs uppercase">
          EXPIRATION
        </Label>
        <Select name="expiration" defaultValue="">
          <SelectTrigger className={cn(mode.radius)}>
            <SelectValue placeholder="Never expires" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="">Never expires</SelectItem>
            <SelectItem value="30">30 days</SelectItem>
            <SelectItem value="90">90 days</SelectItem>
            <SelectItem value="180">180 days</SelectItem>
            <SelectItem value="365">1 year</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <Button
        type="submit"
        className={cn('w-full', mode.radius)}
        disabled={isLoading || selectedScopes.length === 0}
      >
        {isLoading ? 'CREATING...' : `> CREATE API KEY`}
      </Button>
    </form>
  );
}