import { useMemo, useState, Suspense } from "react";
import { useAtomValue, useAtomSet } from "@effect/atom-react";
import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
import * as Exit from "effect/Exit";
import * as Option from "effect/Option";
import * as Schema from "effect/Schema";
import { toast } from "sonner";
import { removeSecretOptimistic, secretsOptimisticAtom, secretUsagesAtom } from "../api/atoms";
import { secretWriteKeys } from "../api/reactivity-keys";
import { useSecretProviderPlugins } from "@executor-js/sdk/client";
import { SecretId, SecretInUseError, type ScopeId } from "@executor-js/sdk";
import { SecretForm } from "../plugins/secret-form";
import { useScope } from "../hooks/use-scope";
import { useScopeStack } from "../api/scope-context";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from "../components/dialog";
import { Button } from "../components/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "../components/dropdown-menu";
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" },
];

const isSecretInUseError = Schema.is(SecretInUseError);

// ---------------------------------------------------------------------------
// Add secret dialog
//
// Form state, derived id, dup detection, and submit lifecycle live in
// `<SecretForm.Provider>` and are shared with the inline create flow in
// secret-header-auth.tsx. Dialog content remounts on each open via `key` so
// state always starts fresh — no manual reset.
// ---------------------------------------------------------------------------

function AddSecretDialog(props: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  description: string;
  storageOptions: readonly SecretStorageOption[];
  existingSecretIds: readonly string[];
  scopeId: ScopeId;
}) {
  return (
    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
      {props.open && (
        <AddSecretDialogContent
          key="open"
          description={props.description}
          storageOptions={props.storageOptions}
          existingSecretIds={props.existingSecretIds}
          scopeId={props.scopeId}
          onClose={() => props.onOpenChange(false)}
        />
      )}
    </Dialog>
  );
}

function AddSecretDialogContent(props: {
  description: string;
  storageOptions: readonly SecretStorageOption[];
  existingSecretIds: readonly string[];
  scopeId: ScopeId;
  onClose: () => void;
}) {
  const initialProvider = props.storageOptions[0]?.value ?? "auto";

  return (
    <SecretForm.Provider
      existingSecretIds={props.existingSecretIds}
      initialProvider={initialProvider}
      scopeId={props.scopeId}
      onCreated={props.onClose}
    >
      <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">
            <SecretForm.NameField />
            <SecretForm.IdField />
          </div>
          <SecretForm.ValueField />
          <SecretForm.ProviderField options={props.storageOptions} />
          <SecretForm.ErrorBanner />
        </div>

        <DialogFooter>
          <DialogClose asChild>
            <Button variant="ghost" size="sm">
              Cancel
            </Button>
          </DialogClose>
          <SecretForm.SubmitButton size="sm">Save secret</SecretForm.SubmitButton>
        </DialogFooter>
      </DialogContent>
    </SecretForm.Provider>
  );
}

// ---------------------------------------------------------------------------
// Used-by footer — fetched per-secret. Keeps the list compact: shows the
// count plus the first few owner names, with a "+N more" tail. Empty
// state collapses to nothing so secrets that aren't referenced anywhere
// don't get a noisy "Used by 0" line.
// ---------------------------------------------------------------------------

function SecretUsageFooter(props: { scopeId: ScopeId; secretId: SecretId }) {
  const usages = useAtomValue(secretUsagesAtom(props.scopeId, props.secretId));
  return AsyncResult.match(usages, {
    onInitial: () => null,
    onFailure: () => null,
    onSuccess: ({ value }) => {
      if (value.length === 0) return null;
      const labels = value
        .map((u) => u.ownerName ?? u.ownerId)
        .filter((s, i, a) => a.indexOf(s) === i);
      const visible = labels.slice(0, 3);
      const hidden = labels.length - visible.length;
      return (
        <CardStackEntryDescription className="mt-1 text-xs text-muted-foreground">
          Used by {visible.join(", ")}
          {hidden > 0 ? ` +${hidden} more` : ""}
        </CardStackEntryDescription>
      );
    },
  });
}

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

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

  return (
    <CardStackEntry>
      <CardStackEntryContent>
        <CardStackEntryTitle className="flex min-w-0 items-center gap-2">
          <span className="min-w-0 shrink truncate" title={secret.name}>
            {secret.name}
          </span>
          <span
            className="max-w-40 shrink truncate font-mono text-xs text-muted-foreground"
            title={secret.id}
          >
            {secret.id}
          </span>
        </CardStackEntryTitle>
        <Suspense fallback={null}>
          <SecretUsageFooter scopeId={props.usageScopeId} secretId={SecretId.make(secret.id)} />
        </Suspense>
      </CardStackEntryContent>
      <CardStackEntryActions>
        <Badge variant="secondary">{props.scopeLabel}</Badge>
        {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;
  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 = useSecretProviderPlugins();
  const [addOpen, setAddOpen] = useState(false);
  const scopeId = useScope();
  const scopeStack = useScopeStack();
  const secrets = useAtomValue(secretsOptimisticAtom(scopeId));
  const scopeLabel = (secretScopeId: ScopeId): string => {
    const index = scopeStack.findIndex((entry) => entry.id === secretScopeId);
    if (index === 0) return "Personal";
    if (index > 0) return scopeStack[index]?.name || "Organization";
    return "Scoped";
  };
  const existingSecretIds = useMemo(
    () =>
      AsyncResult.match(secrets, {
        onInitial: () => [] as string[],
        onFailure: () => [] as string[],
        onSuccess: ({ value }) => value.map((secret) => secret.id),
      }),
    [secrets],
  );
  const doRemove = useAtomSet(removeSecretOptimistic(scopeId), {
    mode: "promiseExit",
  });

  const handleRemove = async (secret: { readonly id: string; readonly scopeId: ScopeId }) => {
    const exit = await doRemove({
      params: {
        scopeId: secret.scopeId,
        secretId: SecretId.make(secret.id),
      },
      reactivityKeys: secretWriteKeys,
    });
    if (Exit.isFailure(exit)) {
      const error = Exit.findErrorOption(exit);
      if (Option.isSome(error) && isSecretInUseError(error.value)) {
        const count = error.value.usageCount;
        toast.error(
          `Secret is used by ${count} ${count === 1 ? "source" : "sources"}. Detach it before removing it.`,
        );
      } else {
        toast.error("Failed to remove secret");
      }
    }
  };

  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 */}
        {AsyncResult.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: {
                      readonly id: string;
                      readonly scopeId: ScopeId;
                      readonly name: string;
                      readonly provider: string;
                    }) => (
                      <SecretRow
                        key={`${s.scopeId}:${s.id}`}
                        usageScopeId={scopeId}
                        showProvider={showProviderInfo}
                        secret={{
                          id: s.id,
                          scopeId: s.scopeId,
                          name: s.name,
                          provider: s.provider ? String(s.provider) : undefined,
                        }}
                        scopeLabel={scopeLabel(s.scopeId)}
                        onRemove={() => handleRemove(s)}
                      />
                    ),
                  )
                )}
              </CardStackContent>
            </CardStack>
          ),
        })}

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