"use client";
import * as React from "react";
import Link from "next/link";
import { Alert } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { CopyButton } from "@/components/ui/copy-button";
import { CodeBlock } from "@/components/ui/code-block";
import { curlSnippet } from "@/lib/account-snippets";

/**
 * One-time display of a freshly created / rotated key. The plaintext is only ever
 * available in memory here — it is never sent back by the server again.
 */
export function KeyReveal({ plaintext, name, onDone, doneLabel = "Done", compact }: { plaintext: string; name: string; onDone?: () => void; doneLabel?: string; compact?: boolean }) {
  const [ack, setAck] = React.useState(false);
  return (
    <div className="grid gap-4">
      <Alert variant="warning" title="Copy your key now — it will not be shown again.">
        We store only a hash of this key. If you lose it, rotate the key to get a new one.
      </Alert>
      <div className="grid gap-1.5">
        <div className="text-[12px] font-medium text-fg-subtle">{name}</div>
        <div className="flex items-center gap-2 rounded-md border border-border bg-bg-subtle px-3 py-2">
          <code className="min-w-0 flex-1 select-all break-all font-mono text-[13px] tabular">{plaintext}</code>
          <CopyButton value={plaintext} label="Copy" variant="outline" size="sm" />
        </div>
      </div>
      {!compact ? <CodeBlock code={curlSnippet(plaintext)} lang="bash" title="Try it — first request" maxHeight={180} /> : null}
      {onDone ? (
        <div className="flex flex-col gap-3 border-t border-border pt-4 sm:flex-row sm:items-center sm:justify-between">
          <label className="flex items-start gap-2 text-[13px] text-fg-muted">
            <input type="checkbox" checked={ack} onChange={(e) => setAck(e.target.checked)} className="mt-0.5 size-4 rounded border-border accent-[var(--accent)]" />
            I have stored this key somewhere safe.
          </label>
          <div className="flex items-center gap-2">
            <Button asChild variant="ghost" size="sm">
              <Link href="/dashboard/playground">Open Playground</Link>
            </Button>
            <Button size="sm" disabled={!ack} onClick={onDone}>
              {doneLabel}
            </Button>
          </div>
        </div>
      ) : null}
    </div>
  );
}