Create key

import {
  Alert,
  AlertDescription,
  AlertTitle,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Checkbox,
  CopyButton,
  Input,
  Label,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@cronus-ui/ui";
import { Check, KeyRound, TriangleAlert } from "lucide-react";

interface KeyScope {
  id: string;
  scope: string;
  description: string;
  defaultChecked?: boolean;
}

const keyScopes: KeyScope[] = [
  {
    id: "scope-orders-read",
    scope: "orders:read",
    description: "List and retrieve orders",
    defaultChecked: true,
  },
  {
    id: "scope-orders-write",
    scope: "orders:write",
    description: "Create refunds and updates",
  },
  {
    id: "scope-products-read",
    scope: "products:read",
    description: "Read catalog and pricing",
    defaultChecked: true,
  },
  {
    id: "scope-products-write",
    scope: "products:write",
    description: "Edit products and prices",
  },
  {
    id: "scope-customers-read",
    scope: "customers:read",
    description: "Read customer profiles",
  },
  {
    id: "scope-payouts-read",
    scope: "payouts:read",
    description: "Read payouts and balances",
  },
];

export function ApiKeysCreateBlock() {
  return (
    <section aria-label="Create API key" className="mx-auto flex w-full max-w-xl flex-col gap-6">
      <Card className="shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Create API key</CardTitle>
          <CardDescription>Scope the key to the smallest set of permissions.</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-5">
          <div className="flex flex-col gap-2">
            <Label htmlFor="api-key-name">Key name</Label>
            <Input id="api-key-name" placeholder="e.g. CI deploy bot" />
          </div>
          <fieldset className="flex flex-col">
            <legend className="text-sm font-medium text-fg">Scopes</legend>
            <div className="grid gap-2 pt-3 sm:grid-cols-2">
              {keyScopes.map((scope) => (
                <Label
                  key={scope.id}
                  htmlFor={scope.id}
                  className="flex items-start gap-2.5 rounded-lg border border-border bg-surface-inset p-3 font-normal"
                >
                  <Checkbox
                    id={scope.id}
                    defaultChecked={scope.defaultChecked}
                    className="mt-0.5"
                  />
                  <span className="flex min-w-0 flex-col gap-0.5">
                    <span className="font-mono text-xs font-medium text-fg">{scope.scope}</span>
                    <span className="text-xs text-fg-tertiary">{scope.description}</span>
                  </span>
                </Label>
              ))}
            </div>
          </fieldset>
          <div className="flex flex-col gap-2">
            <Label htmlFor="api-key-expiry">Expires</Label>
            <Select defaultValue="90d">
              <SelectTrigger id="api-key-expiry" aria-label="Key expiry">
                <SelectValue placeholder="Select expiry" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="30d">In 30 days</SelectItem>
                <SelectItem value="90d">In 90 days</SelectItem>
                <SelectItem value="1y">In 1 year</SelectItem>
                <SelectItem value="never">Never expires</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
        <CardFooter className="justify-end gap-3">
          <Button variant="ghost">Cancel</Button>
          <Button variant="primary">
            <KeyRound className="size-4" aria-hidden="true" />
            Generate key
          </Button>
        </CardFooter>
      </Card>

      <Card className="border-success/30 shadow-md">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 font-display text-lg">
            <span className="inline-flex size-7 items-center justify-center rounded-lg bg-success/10 text-success">
              <Check className="size-4" aria-hidden="true" />
            </span>
            Key generated
          </CardTitle>
          <CardDescription>Your new key is ready to use.</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-4">
          <div className="flex items-center gap-1 rounded-lg border border-border bg-surface-inset py-1 pe-1 ps-3">
            <code className="min-w-0 flex-1 truncate font-mono text-xs text-fg">
              ck_live_8f2Km4Qw7Rt1Vx9Zc3Ln5Bd0Hs6J
            </code>
            <CopyButton
              value="ck_live_8f2Km4Qw7Rt1Vx9Zc3Ln5Bd0Hs6J"
              size="icon-sm"
              copyLabel="Copy API key"
              className="shrink-0"
            />
          </div>
          <Alert variant="warning">
            <TriangleAlert aria-hidden="true" />
            <AlertTitle>Copy your key now</AlertTitle>
            <AlertDescription>
              For security, the full key is only shown once. Store it in your secrets manager.
            </AlertDescription>
          </Alert>
        </CardContent>
      </Card>
    </section>
  );
}