import { useState, Suspense } from "react";
import { useAtomValue, useAtomSet, Result } from "@effect-atom/atom-react";
import { secretsAtom, setSecret, removeSecret } from "../api/atoms";
import { secretWriteKeys } from "../api/reactivity-keys";
import type { SecretProviderPlugin } from "../plugins/secret-provider-plugin";
import { SecretId } from "@executor/sdk";
import { useScope } from "../hooks/use-scope";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from "../components/dialog";
import { Button } from "../components/button";
import { Input } from "../components/input";
import { Label } from "../components/label";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "../components/dropdown-menu";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../components/select";
import {
  CardStack,
  CardStackContent,
  CardStackEntry,
  CardStackEntryActions,
  CardStackEntryContent,
  CardStackEntryDescription,
  CardStackEntryTitle,
  CardStackHeader,
} from "../components/card-stack";
import { Badge } from "../components/badge";

type SecretStorageOption = {
  readonly label: string;
  readonly value: string;
};

const defaultStorageOptions: readonly SecretStorageOption[] = [
  { value: "auto", label: "Auto" },
  { value: "keychain", label: "Keychain" },
  { value: "file", label: "File" },
];

// ---------------------------------------------------------------------------
// Add secret dialog
// ---------------------------------------------------------------------------

function AddSecretDialog(props: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  description: string;
  storageOptions: readonly SecretStorageOption[];
}) {
  const initialProvider = props.storageOptions[0]?.value ?? "auto";
  const [id, setId] = useState("");
  const [name, setName] = useState("");
  const [value, setValue] = useState("");
  const [provider, setProvider] = useState(initialProvider);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const scopeId = useScope();
  const doSet = useAtomSet(setSecret, { mode: "promise" });

  const reset = () => {
    setId("");
    setName("");
    setValue("");
    setProvider(initialProvider);
    setError(null);
    setSaving(false);
  };

  const handleSave = async () => {
    if (!id.trim() || !name.trim() || !value.trim()) return;
    setSaving(true);
    setError(null);
    try {
      await doSet({
        path: { scopeId },
        payload: {
          id: SecretId.make(id.trim()),
          name: name.trim(),
          value: value.trim(),
          provider: provider === "auto" ? undefined : provider,
        },
        reactivityKeys: secretWriteKeys,
      });
      reset();
      props.onOpenChange(false);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to save secret");
      setSaving(false);
    }
  };

  return (
    <Dialog
      open={props.open}
      onOpenChange={(v) => {
        if (!v) reset();
        props.onOpenChange(v);
      }}
    >
      <DialogContent className="sm:max-w-[440px]">
        <DialogHeader>
          <DialogTitle className="font-display text-xl">New secret</DialogTitle>
          <DialogDescription className="text-sm leading-relaxed">
            {props.description}
          </DialogDescription>
        </DialogHeader>

        <div className="grid gap-5 py-3">
          <div className="grid grid-cols-2 gap-3">
            <div className="grid gap-1.5">
              <Label
                htmlFor="secret-id"
                className="text-sm font-medium uppercase tracking-wider text-muted-foreground"
              >
                ID
              </Label>
              <Input
                id="secret-id"
                placeholder="github-token"
                value={id}
                onChange={(e) => setId((e.target as HTMLInputElement).value)}
                className="font-mono text-xs h-9"
              />
            </div>
            <div className="grid gap-1.5">
              <Label
                htmlFor="secret-name"
                className="text-sm font-medium uppercase tracking-wider text-muted-foreground"
              >
                Name
              </Label>
              <Input
                id="secret-name"
                placeholder="GitHub PAT"
                value={name}
                onChange={(e) => setName((e.target as HTMLInputElement).value)}
                className="text-sm h-9"
              />
            </div>
          </div>

          <div className="grid gap-1.5">
            <Label
              htmlFor="secret-value"
              className="text-sm font-medium uppercase tracking-wider text-muted-foreground"
            >
              Value
            </Label>
            <Input
              id="secret-value"
              type="password"
              placeholder="ghp_xxxxxxxxxxxxxxxxxxxx"
              value={value}
              onChange={(e) => setValue((e.target as HTMLInputElement).value)}
              className="font-mono text-xs h-9"
            />
          </div>

          <div className="grid gap-3">
            {props.storageOptions.length > 1 && (
              <div className="grid gap-1.5">
                <Label
                  htmlFor="secret-provider"
                  className="text-sm font-medium uppercase tracking-wider text-muted-foreground"
                >
                  Storage
                </Label>
                <Select value={provider} onValueChange={setProvider}>
                  <SelectTrigger id="secret-provider" className="h-9 text-sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {props.storageOptions.map((option) => (
                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}
          </div>

          {error && (
            <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
              <p className="text-sm text-destructive">{error}</p>
            </div>
          )}
        </div>

        <DialogFooter>
          <DialogClose asChild>
            <Button variant="ghost" size="sm">
              Cancel
            </Button>
          </DialogClose>
          <Button
            size="sm"
            onClick={handleSave}
            disabled={!id.trim() || !name.trim() || !value.trim() || saving}
          >
            {saving ? "Saving…" : "Save secret"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// ---------------------------------------------------------------------------
// Secret row
// ---------------------------------------------------------------------------

function SecretRow(props: {
  showProvider: boolean;
  secret: { id: string; name: string; provider?: string };
  onRemove: () => void;
}) {
  const { secret, showProvider } = props;

  return (
    <CardStackEntry>
      <CardStackEntryContent>
        <CardStackEntryTitle className="flex items-center gap-2">
          <span className="truncate">{secret.name}</span>
        </CardStackEntryTitle>
      </CardStackEntryContent>
      <CardStackEntryActions>
        {showProvider && secret.provider && <Badge variant="outline">{secret.provider}</Badge>}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="size-7 opacity-0 transition-opacity group-hover/card-stack-entry:opacity-100 group-focus-within/card-stack-entry:opacity-100 data-[state=open]:opacity-100"
            >
              <svg viewBox="0 0 16 16" className="size-3">
                <circle cx="8" cy="3" r="1.2" fill="currentColor" />
                <circle cx="8" cy="8" r="1.2" fill="currentColor" />
                <circle cx="8" cy="13" r="1.2" fill="currentColor" />
              </svg>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-40">
            <DropdownMenuItem
              className="text-destructive focus:text-destructive text-sm"
              onClick={props.onRemove}
            >
              Remove secret
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </CardStackEntryActions>
    </CardStackEntry>
  );
}

// ---------------------------------------------------------------------------
// Page
// ---------------------------------------------------------------------------

export function SecretsPage(props: {
  addSecretDescription?: string;
  showProviderInfo?: boolean;
  secretProviderPlugins: readonly SecretProviderPlugin[];
  storageOptions?: readonly SecretStorageOption[];
}) {
  const storageOptions = props.storageOptions ?? defaultStorageOptions;
  const showProviderInfo = props.showProviderInfo ?? true;
  const addSecretDescription =
    props.addSecretDescription ??
    "Store a credential or API key. Values are kept in your system keychain when available, with a local encrypted file fallback.";
  const { secretProviderPlugins } = props;
  const [addOpen, setAddOpen] = useState(false);
  const scopeId = useScope();
  const secrets = useAtomValue(secretsAtom(scopeId));
  const doRemove = useAtomSet(removeSecret, { mode: "promise" });

  const handleRemove = async (secretId: string) => {
    try {
      await doRemove({
        path: {
          scopeId,
          secretId: SecretId.make(secretId),
        },
        reactivityKeys: secretWriteKeys,
      });
    } catch {
      // TODO: toast
    }
  };

  return (
    <div className="min-h-0 flex-1 overflow-y-auto">
      <div className="mx-auto max-w-3xl px-6 py-10 lg:px-8 lg:py-14">
        {/* Header */}
        <div className="flex items-end justify-between mb-10">
          <div>
            <h1 className="font-display text-[2rem] tracking-tight text-foreground leading-none">
              Secrets
            </h1>
            <p className="mt-2 text-sm text-muted-foreground leading-relaxed">
              Credentials and API keys used by your connected sources.
            </p>
          </div>
          <Button size="sm" onClick={() => setAddOpen(true)}>
            Add secret
          </Button>
        </div>

        {/* Provider plugins */}
        {showProviderInfo && secretProviderPlugins.length > 0 && (
          <div className="mb-10">
            <CardStack>
              <CardStackHeader>Providers</CardStackHeader>
              <CardStackContent>
                {secretProviderPlugins.map((plugin) => (
                  <Suspense
                    key={plugin.key}
                    fallback={
                      <div className="px-4 py-3 animate-pulse">
                        <div className="h-4 w-24 rounded bg-muted" />
                      </div>
                    }
                  >
                    <plugin.settings />
                  </Suspense>
                ))}
              </CardStackContent>
            </CardStack>
          </div>
        )}

        {/* Secrets list */}
        {Result.match(secrets, {
          onInitial: () => (
            <div className="flex items-center gap-2 py-8">
              <div className="size-1.5 rounded-full bg-muted-foreground/30 animate-pulse" />
              <p className="text-sm text-muted-foreground">Loading secrets…</p>
            </div>
          ),
          onFailure: () => (
            <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3">
              <p className="text-sm text-destructive">Failed to load secrets</p>
            </div>
          ),
          onSuccess: ({ value }) => (
            <CardStack>
              <CardStackHeader>Secrets</CardStackHeader>
              <CardStackContent>
                {value.length === 0 ? (
                  <CardStackEntry>
                    <CardStackEntryContent>
                      <CardStackEntryDescription>
                        Add API keys and credentials to authenticate your sources.
                      </CardStackEntryDescription>
                    </CardStackEntryContent>
                    <CardStackEntryActions>
                      <Button
                        variant="link"
                        size="sm"
                        className="h-7 px-0 text-xs"
                        onClick={() => setAddOpen(true)}
                      >
                        Add your first secret
                      </Button>
                    </CardStackEntryActions>
                  </CardStackEntry>
                ) : (
                  value.map((s) => (
                    <SecretRow
                      key={s.id}
                      showProvider={showProviderInfo}
                      secret={{
                        id: s.id,
                        name: s.name,
                        provider: s.provider ? String(s.provider) : undefined,
                      }}
                      onRemove={() => handleRemove(s.id)}
                    />
                  ))
                )}
              </CardStackContent>
            </CardStack>
          ),
        })}

        <AddSecretDialog
          open={addOpen}
          onOpenChange={setAddOpen}
          description={addSecretDescription}
          storageOptions={storageOptions}
        />
      </div>
    </div>
  );
}