import { useState, type ChangeEvent, type FocusEvent } from "react";
import { PlusIcon } from "lucide-react";

import type { Owner } from "@executor-js/sdk/shared";

import { Input } from "../components/input";
import { Badge } from "../components/badge";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "../components/command";
import { Popover, PopoverAnchor, PopoverContent } from "../components/popover";
import { ownerLabel, useOwnerDisplay } from "../api/owner-display";

// ---------------------------------------------------------------------------
// Connection / provider-item picker (v2) — successor to v1's secret picker.
//
// v1 picked a stored secret by (scopeId, secretId); v2 picks a value source —
// either an existing owner-scoped connection or a provider item — keyed by an
// opaque `id` and an `owner`. The export names are kept so the plugin `/react`
// dirs keep importing `SecretPicker` / `SecretPickerSecret`, adapted to v2.
// ---------------------------------------------------------------------------

export interface SecretPickerSecret {
  /** Opaque value id — a connection name or a provider item id. */
  readonly id: string;
  /** Which owner this entry belongs to (org | user). */
  readonly owner: Owner;
  readonly name: string;
  /** Credential provider key (e.g. "default", "1password"). */
  readonly provider?: string;
}

const PROVIDER_LABELS: Record<string, string> = {
  default: "Default",
  keychain: "Keychain",
  file: "Local",
  memory: "Memory",
  onepassword: "1Password",
};

const providerLabel = (key: string | undefined): string => {
  if (!key) return "Default";
  return PROVIDER_LABELS[key] ?? key;
};

export function SecretPicker(props: {
  readonly value: string | null;
  readonly valueOwner?: Owner;
  readonly onSelect: (id: string, owner: Owner) => void;
  readonly secrets: readonly SecretPickerSecret[];
  readonly placeholder?: string;
  /** When provided, renders a "+ New" row at the top of the dropdown. */
  readonly onCreateNew?: () => void;
}) {
  const {
    value,
    valueOwner,
    onSelect,
    secrets,
    placeholder = "Search credentials…",
    onCreateNew,
  } = props;
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const ownerDisplay = useOwnerDisplay();

  const selected =
    secrets.find(
      (secret) => secret.id === value && (valueOwner === undefined || secret.owner === valueOwner),
    ) ??
    secrets.find((secret) => secret.id === value) ??
    null;

  const grouped = new Map<string, SecretPickerSecret[]>();
  for (const secret of secrets) {
    const key = providerLabel(secret.provider);
    const group = grouped.get(key);
    if (group) {
      group.push(secret);
    } else {
      grouped.set(key, [secret]);
    }
  }

  const groups: [string, SecretPickerSecret[]][] = [...grouped.entries()]
    .map(([label, items]): [string, SecretPickerSecret[]] => [
      label,
      [...items].sort((a, b) => a.name.localeCompare(b.name)),
    ])
    .sort(([a], [b]) => a.localeCompare(b));
  const showGroupHeadings = groups.length > 1;

  return (
    <div className="relative w-full">
      <Popover open={open} onOpenChange={setOpen} modal={false}>
        <PopoverAnchor asChild>
          <Input
            value={open ? query : selected ? selected.name : (value ?? "")}
            onChange={(event: ChangeEvent<HTMLInputElement>) => {
              setQuery(event.target.value);
              if (!open) setOpen(true);
            }}
            onFocus={() => setOpen(true)}
            onBlur={(event: FocusEvent<HTMLInputElement>) => {
              const related = event.relatedTarget as HTMLElement | null;
              if (related?.closest("[data-slot=popover-content]")) return;
              setOpen(false);
            }}
            placeholder={placeholder}
            className="text-sm"
          />
        </PopoverAnchor>
        <PopoverContent
          className="w-(--radix-popover-trigger-width) p-0"
          align="start"
          onOpenAutoFocus={(event: Event) => event.preventDefault()}
          onCloseAutoFocus={(event: Event) => event.preventDefault()}
          onInteractOutside={(event: Event) => {
            const target = event.target as HTMLElement | null;
            if (target?.closest("[data-slot=popover-anchor]")) {
              event.preventDefault();
            }
          }}
        >
          <Command shouldFilter={false}>
            <CommandList>
              <CommandEmpty>No credentials found</CommandEmpty>
              {onCreateNew && (
                <>
                  <CommandGroup>
                    <CommandItem
                      value="__create_new__"
                      onSelect={() => {
                        onCreateNew();
                        setOpen(false);
                        setQuery("");
                      }}
                      className="text-muted-foreground data-[selected=true]:text-foreground"
                    >
                      <PlusIcon aria-hidden className="size-3.5" />
                      <span>New credential</span>
                    </CommandItem>
                  </CommandGroup>
                  {secrets.length > 0 && <CommandSeparator />}
                </>
              )}
              {groups.map(([label, items]) => {
                const lowerQuery = query.toLowerCase();
                const filtered = lowerQuery
                  ? items.filter(
                      (secret) =>
                        secret.name.toLowerCase().includes(lowerQuery) ||
                        secret.id.toLowerCase().includes(lowerQuery),
                    )
                  : items;
                if (filtered.length === 0) return null;
                return (
                  <CommandGroup key={label} heading={showGroupHeadings ? label : undefined}>
                    {filtered.map((secret) => (
                      <CommandItem
                        key={`${secret.owner}:${secret.id}`}
                        value={`${secret.name} ${secret.id} ${secret.owner}`}
                        onSelect={() => {
                          onSelect(secret.id, secret.owner);
                          setOpen(false);
                          setQuery("");
                        }}
                      >
                        <span className="min-w-0 flex-1 truncate">{secret.name}</span>
                        {ownerDisplay.showOwnerLabels ? (
                          <Badge variant="outline" className="ml-2 shrink-0 text-[10px]">
                            {ownerLabel(secret.owner)}
                          </Badge>
                        ) : null}
                      </CommandItem>
                    ))}
                  </CommandGroup>
                );
              })}
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    </div>
  );
}