"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Plus } from "lucide-react";
import { API_KEY_SCOPES } from "@fetcha/core/client";
import { createApiKey, type CreatedKey } from "@/actions/api-keys";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Field, Hint, Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Alert } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { DEFAULT_SCOPES, SCOPE_INFO } from "@/lib/account-snippets";
import { cn } from "@/lib/utils";
import { KeyReveal } from "./key-reveal";

export interface ProjectOption {
  id: string;
  name: string;
  environment: string;
}

const EXPIRATIONS = [
  { value: "0", label: "Never expires" },
  { value: "30", label: "30 days" },
  { value: "90", label: "90 days" },
  { value: "365", label: "1 year" },
];

export function CreateKeyDialog({
  projects,
  defaultProjectId,
  trigger,
  defaultOpen,
  onCreated,
}: {
  projects: ProjectOption[];
  defaultProjectId: string;
  trigger?: React.ReactNode;
  defaultOpen?: boolean;
  onCreated?: (key: CreatedKey) => void;
}) {
  const router = useRouter();
  const [open, setOpen] = React.useState(Boolean(defaultOpen));
  const [created, setCreated] = React.useState<CreatedKey | null>(null);

  function handleOpenChange(next: boolean) {
    // While the plaintext is on screen, closing must go through the explicit "Done" button.
    if (!next && created) return;
    setOpen(next);
    if (!next) setCreated(null);
  }

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        {trigger ?? (
          <Button variant="primary">
            <Plus /> Create API key
          </Button>
        )}
      </DialogTrigger>
      <DialogContent size="lg" onEscapeKeyDown={(e) => created && e.preventDefault()} onPointerDownOutside={(e) => created && e.preventDefault()} onInteractOutside={(e) => created && e.preventDefault()}>
        {created ? (
          <>
            <DialogHeader>
              <DialogTitle>API key created</DialogTitle>
              <DialogDescription>Your new key for {created.name} is ready.</DialogDescription>
            </DialogHeader>
            <KeyReveal
              plaintext={created.plaintext}
              name={created.name}
              onDone={() => {
                setCreated(null);
                setOpen(false);
                router.refresh();
              }}
            />
          </>
        ) : (
          <>
            <DialogHeader>
              <DialogTitle>Create API key</DialogTitle>
              <DialogDescription>Keys authenticate requests to the Fetcha API. The secret is shown once, then stored hashed.</DialogDescription>
            </DialogHeader>
            <CreateKeyForm
              projects={projects}
              defaultProjectId={defaultProjectId}
              onCreated={(k) => {
                setCreated(k);
                onCreated?.(k);
              }}
            />
          </>
        )}
      </DialogContent>
    </Dialog>
  );
}

/** The form alone (also used inline by onboarding). */
export function CreateKeyForm({
  projects,
  defaultProjectId,
  onCreated,
  compact,
  defaultName = "",
  submitLabel = "Create key",
}: {
  projects: ProjectOption[];
  defaultProjectId: string;
  onCreated: (key: CreatedKey) => void;
  compact?: boolean;
  defaultName?: string;
  submitLabel?: string;
}) {
  const [pending, startTransition] = React.useTransition();
  const [name, setName] = React.useState(defaultName);
  const [projectId, setProjectId] = React.useState(defaultProjectId);
  const [mode, setMode] = React.useState<"live" | "test">("live");
  const [scopes, setScopes] = React.useState<string[]>(DEFAULT_SCOPES);
  const [expires, setExpires] = React.useState("0");
  const [error, setError] = React.useState<string | null>(null);

  function toggleScope(s: string) {
    setScopes((cur) => (cur.includes(s) ? cur.filter((x) => x !== s) : [...cur, s]));
  }

  function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    startTransition(async () => {
      const res = await createApiKey({ name, projectId, mode, scopes, expiresInDays: Number(expires) || undefined });
      if (!res.ok) {
        setError(res.error);
        return;
      }
      if (res.data) onCreated(res.data);
    });
  }

  return (
    <form onSubmit={submit} className="grid gap-4" noValidate>
      {error ? <Alert variant="danger">{error}</Alert> : null}
      <div className={cn("grid gap-4", !compact && "sm:grid-cols-2")}>
        <Field>
          <Label htmlFor="key-name">Name</Label>
          <Input id="key-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Production backend" maxLength={64} required autoFocus />
          <Hint>Only for you — appears in the key list and audit log.</Hint>
        </Field>
        <Field>
          <Label htmlFor="key-project">Project</Label>
          <Select value={projectId} onValueChange={setProjectId}>
            <SelectTrigger id="key-project">
              <SelectValue placeholder="Select a project" />
            </SelectTrigger>
            <SelectContent>
              {projects.map((p) => (
                <SelectItem key={p.id} value={p.id}>
                  {p.name} <span className="text-fg-subtle">· {p.environment}</span>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Hint>Requests, usage and limits are tracked per project.</Hint>
        </Field>
      </div>

      <fieldset className="grid gap-2">
        <legend className="mb-1.5 text-[13px] font-medium">Mode</legend>
        <div className={cn("grid gap-2", !compact && "sm:grid-cols-2")}>
          {(
            [
              { v: "live", title: "Live", desc: "fch_live_… — real traffic through the network, billed against your plan." },
              { v: "test", title: "Test", desc: "fch_test_… — for integration tests and CI. Same API, clearly separated in logs and usage." },
            ] as const
          ).map((o) => (
            <label key={o.v} className={cn("flex cursor-pointer items-start gap-2.5 rounded-md border px-3 py-2.5 transition-colors", mode === o.v ? "border-accent bg-accent-soft/40" : "border-border hover:border-border-strong")}>
              <input type="radio" name="mode" value={o.v} checked={mode === o.v} onChange={() => setMode(o.v)} className="mt-0.5 accent-[var(--accent)]" />
              <span className="grid gap-0.5">
                <span className="text-[13px] font-medium">{o.title}</span>
                <span className="text-[12px] leading-relaxed text-fg-muted">{o.desc}</span>
              </span>
            </label>
          ))}
        </div>
      </fieldset>

      <fieldset className="grid gap-2">
        <legend className="mb-1.5 text-[13px] font-medium">Scopes</legend>
        <div className="grid gap-1.5">
          {API_KEY_SCOPES.map((s) => {
            const info = SCOPE_INFO[s];
            const disabled = Boolean(info?.comingSoon);
            return (
              <label key={s} className={cn("flex items-start gap-2.5 rounded-md border border-border px-3 py-2", disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:border-border-strong")}>
                <input type="checkbox" checked={!disabled && scopes.includes(s)} disabled={disabled} onChange={() => toggleScope(s)} className="mt-0.5 size-4 rounded border-border accent-[var(--accent)]" />
                <span className="grid gap-0.5">
                  <span className="flex items-center gap-2 font-mono text-[12.5px]">
                    {info?.label ?? s}
                    {disabled ? <Badge variant="outline">Coming soon</Badge> : null}
                  </span>
                  <span className="text-[12px] text-fg-muted">{info?.description}</span>
                </span>
              </label>
            );
          })}
        </div>
      </fieldset>

      <Field>
        <Label htmlFor="key-expires">Expiration</Label>
        <Select value={expires} onValueChange={setExpires}>
          <SelectTrigger id="key-expires" className="sm:max-w-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {EXPIRATIONS.map((o) => (
              <SelectItem key={o.value} value={o.value}>
                {o.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Hint>Expired keys are rejected with INVALID_API_KEY. Short-lived keys are safer for CI and contractors.</Hint>
      </Field>

      <div className="flex items-center justify-end gap-2 border-t border-border pt-4">
        <Button type="submit" variant="primary" loading={pending} disabled={!name.trim() || scopes.length === 0}>
          {submitLabel}
        </Button>
      </div>
    </form>
  );
}