NetMesh/components/ProxyProfilesManager.tsx

import {
  AlertTriangle,
  ChevronDown,
  Copy,
  Globe,
  KeyRound,
  LayoutGrid,
  List as ListIcon,
  Pencil,
  Plus,
  Route,
  Settings2,
  SquareTerminal,
  Trash2,
} from "lucide-react";
import React, { useMemo, useRef, useState } from "react";
import { useI18n } from "../application/i18n/I18nProvider";
import { useStoredViewMode } from "../application/state/useStoredViewMode";
import {
  formatProxyConfigEndpoint,
  hasIncompleteProxyIdentity,
  hasMissingProxyIdentity,
  hasUnreadableProxyCredential,
  isProxyCommandConfig,
  isValidProxyPort,
  normalizeManualProxyConfig,
  removeProxyProfileReferences,
  updateProxyConfigField,
} from "../domain/proxyProfiles";
import { reorderVaultItems, sortByVaultOrder } from "../domain/vaultOrder";
import {
  STORAGE_KEY_VAULT_PROXY_PROFILES_VIEW_MODE,
} from "../infrastructure/config/storageKeys";
import { cn } from "../lib/utils";
import type { GroupConfig, Host, Identity, ProxyConfig, ProxyProfile } from "../types";
import {
  AsidePanel,
  AsidePanelContent,
  AsidePanelFooter,
} from "./ui/aside-panel";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { Card } from "./ui/card";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "./ui/context-menu";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "./ui/dialog";
import { Dropdown, DropdownContent, DropdownTrigger } from "./ui/dropdown";
import { Input } from "./ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { toast } from "./ui/toast";
import {
  VaultHeaderSearch,
  VaultPageHeader,
  vaultHeaderIconButtonClass,
  vaultHeaderSecondaryButtonClass,
  vaultSectionTitleClass,
} from "./vault/VaultPageHeader";
import {
  VaultEntityIcon,
  vaultProxyCommandIconClass,
  vaultProxyHttpIconClass,
  vaultProxySocksIconClass,
} from "./vault/VaultEntityIcon";
import { useVaultItemReorder } from "./vault/vaultReorderDrag";

interface ProxyProfilesManagerProps {
  proxyProfiles: ProxyProfile[];
  hosts: Host[];
  groupConfigs: GroupConfig[];
  identities: Identity[];
  onUpdateProxyProfiles: (profiles: ProxyProfile[]) => void;
  onUpdateHosts: (hosts: Host[]) => void;
  onUpdateGroupConfigs: (configs: GroupConfig[]) => void;
}

export type ProxyProfileSaveError =
  | "required"
  | "port"
  | "missingIdentity"
  | "incompleteIdentity"
  | "unreadableIdentity";

export const prepareProxyProfileForSave = (
  draft: ProxyProfile,
  identities: Identity[],
  updatedAt = Date.now(),
): { saved?: ProxyProfile; error?: ProxyProfileSaveError } => {
  const label = draft.label.trim();
  const host = draft.config.host.trim();
  const command = draft.config.command?.trim() || "";
  const isCommand = isProxyCommandConfig(draft.config);
  if (!label || (isCommand ? !command : (!host || !draft.config.port))) {
    return { error: "required" };
  }
  if (!isCommand && !isValidProxyPort(draft.config.port)) {
    return { error: "port" };
  }
  if (!isCommand && hasMissingProxyIdentity(draft.config, identities)) {
    return { error: "missingIdentity" };
  }
  if (!isCommand && hasIncompleteProxyIdentity(draft.config, identities)) {
    return { error: "incompleteIdentity" };
  }
  if (!isCommand && hasUnreadableProxyCredential(draft.config, identities)) {
    return { error: "unreadableIdentity" };
  }

  const normalizedConfig = normalizeManualProxyConfig(draft.config);
  if (!normalizedConfig) return { error: "required" };

  return {
    saved: {
      ...draft,
      label,
      config: normalizedConfig,
      updatedAt,
    },
  };
};

const createDraftProfile = (): ProxyProfile => {
  const now = Date.now();
  return {
    id: crypto.randomUUID(),
    label: "",
    config: {
      type: "http",
      host: "",
      port: 8080,
    },
    createdAt: now,
    updatedAt: now,
  };
};

const getProfileUsageCount = (
  profileId: string,
  hosts: Host[],
  groupConfigs: GroupConfig[],
): number =>
  hosts.filter((host) => host.proxyProfileId === profileId).length +
  groupConfigs.filter((config) => config.proxyProfileId === profileId).length;

type ProxyProfilesViewMode = "grid" | "list";

const proxyProtocolMeta = {
  http: {
    label: "HTTP",
    Icon: Globe,
    iconClassName: vaultProxyHttpIconClass,
  },
  socks5: {
    label: "SOCKS5",
    Icon: Route,
    iconClassName: vaultProxySocksIconClass,
  },
  command: {
    labelKey: "hostDetails.proxyPanel.command",
    Icon: SquareTerminal,
    iconClassName: vaultProxyCommandIconClass,
  },
} satisfies Record<ProxyConfig["type"], {
  label?: string;
  labelKey?: string;
  Icon: React.ComponentType<{ size?: number; className?: string }>;
  iconClassName: string;
}>;

interface ProxyProfileCardProps {
  profile: ProxyProfile;
  usageCount: number;
  viewMode: ProxyProfilesViewMode;
  isSelected: boolean;
  reorderProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
  onClick: () => void;
  onEdit: () => void;
  onDuplicate: () => void;
  onDelete: () => void;
}

const ProxyProfileCard: React.FC<ProxyProfileCardProps> = ({
  profile,
  usageCount,
  viewMode,
  isSelected,
  reorderProps,
  onClick,
  onEdit,
  onDuplicate,
  onDelete,
}) => {
  const { t } = useI18n();
  const usageLabel = t("proxyProfiles.usage", { count: usageCount });
  const protocol = proxyProtocolMeta[profile.config.type];
  const protocolLabel = protocol.labelKey ? t(protocol.labelKey) : protocol.label;
  const ProtocolIcon = protocol.Icon;
  const endpoint = formatProxyConfigEndpoint(profile.config);
  const accessibleLabel = `${profile.label}, ${protocolLabel}, ${endpoint}, ${usageLabel}`;

  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <button
          {...reorderProps}
          type="button"
          aria-label={accessibleLabel}
          className={cn(
            reorderProps && "vault-drop-indicator-row",
            "group w-full text-left focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
            viewMode === "grid"
              ? "soft-card elevate rounded-xl h-[68px] px-3 py-2"
              : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors",
            isSelected && "ring-2 ring-primary",
            reorderProps?.className,
          )}
          onClick={onClick}
        >
          <div className="flex items-center gap-3 h-full">
            <VaultEntityIcon
              className={protocol.iconClassName}
              title={protocolLabel}
              icon={<ProtocolIcon size={18} />}
            />
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2 min-w-0">
                <div className="text-sm font-semibold truncate">{profile.label}</div>
              </div>
              <div className="text-[11px] font-mono text-muted-foreground truncate">
                {endpoint} -{" "}
                {protocolLabel}
              </div>
            </div>
          </div>
        </button>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem onClick={onEdit}>
          <Pencil size={14} className="mr-2" />
          {t("action.edit")}
        </ContextMenuItem>
        <ContextMenuItem onClick={onDuplicate}>
          <Copy size={14} className="mr-2" />
          {t("action.duplicate")}
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem onClick={onDelete} className="text-destructive focus:text-destructive">
          <Trash2 size={14} className="mr-2" />
          {t("action.delete")}
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
};

export const ProxyProfilesManager: React.FC<ProxyProfilesManagerProps> = ({
  proxyProfiles,
  hosts,
  groupConfigs,
  identities,
  onUpdateProxyProfiles,
  onUpdateHosts,
  onUpdateGroupConfigs,
}) => {
  const { t } = useI18n();
  const [search, setSearch] = useState("");
  const [viewMode, setViewMode] = useStoredViewMode(
    STORAGE_KEY_VAULT_PROXY_PROFILES_VIEW_MODE,
    "grid",
  );
  const proxyProfilesViewMode: ProxyProfilesViewMode =
    viewMode === "list" ? "list" : "grid";
  const [draft, setDraft] = useState<ProxyProfile | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<ProxyProfile | null>(null);
  const listRef = useRef<HTMLDivElement | null>(null);
  const manualCredentialsValue = "__manual_credentials__";
  const missingIdentityValue = "__missing_identity__";
  const selectedDraftIdentity = useMemo(
    () => identities.find((identity) => identity.id === draft?.config.identityId),
    [draft?.config.identityId, identities],
  );
  const hasMissingDraftIdentity = hasMissingProxyIdentity(draft?.config, identities);
  const hasIncompleteDraftIdentity = hasIncompleteProxyIdentity(draft?.config, identities);
  const hasUnreadableDraftIdentity = hasUnreadableProxyCredential(draft?.config, identities);
  const selectedDraftIdentityValue =
    selectedDraftIdentity?.id ||
    (hasMissingDraftIdentity ? missingIdentityValue : manualCredentialsValue);

  const usageByProfileId = useMemo(() => {
    const map = new Map<string, number>();
    for (const profile of proxyProfiles) {
      map.set(profile.id, getProfileUsageCount(profile.id, hosts, groupConfigs));
    }
    return map;
  }, [groupConfigs, hosts, proxyProfiles]);

  const filteredProfiles = useMemo(() => {
    const q = search.trim().toLowerCase();
    const result = !q ? proxyProfiles : proxyProfiles.filter((profile) =>
      profile.label.toLowerCase().includes(q) ||
      profile.config.host.toLowerCase().includes(q) ||
      (profile.config.command || "").toLowerCase().includes(q) ||
      profile.config.type.toLowerCase().includes(q),
    );
    return sortByVaultOrder(result);
  }, [proxyProfiles, search]);

  const profileReorder = useVaultItemReorder({
    containerRef: listRef,
    viewMode: proxyProfilesViewMode,
    dragType: "proxy-profile-id",
    targetAttribute: "data-proxy-profile-id",
    disabled: search.trim().length > 0,
    onReorder: (sourceId, targetId, position) => {
      onUpdateProxyProfiles(reorderVaultItems(proxyProfiles, sourceId, targetId, position));
    },
  });

  const updateDraftConfig = (field: keyof ProxyConfig, value: ProxyConfig[keyof ProxyConfig]) => {
    setDraft((prev) => {
      if (!prev) return prev;
      return {
        ...prev,
        config: updateProxyConfigField(prev.config, field, value),
      };
    });
  };

  const openCreate = () => {
    setDraft(createDraftProfile());
  };

  const openEdit = (profile: ProxyProfile) => {
    setDraft({
      ...profile,
      config: { ...profile.config },
    });
  };

  const duplicateProfile = (profile: ProxyProfile) => {
    const now = Date.now();
    onUpdateProxyProfiles([
      ...proxyProfiles,
      {
        ...profile,
        id: crypto.randomUUID(),
        label: t("proxyProfiles.copyName", { name: profile.label }),
        config: { ...profile.config },
        createdAt: now,
        updatedAt: now,
      },
    ]);
  };

  const saveDraft = () => {
    if (!draft) return;
    const result = prepareProxyProfileForSave(draft, identities);
    if (!result.saved) {
      const messageKey = result.error === "port"
        ? "proxyProfiles.error.port"
        : result.error === "missingIdentity"
          ? "hostDetails.proxyPanel.missingIdentity"
          : result.error === "incompleteIdentity"
            ? "hostDetails.proxyPanel.incompleteIdentity"
            : result.error === "unreadableIdentity"
              ? "hostDetails.proxyPanel.unreadableIdentity"
              : "proxyProfiles.error.required";
      toast.error(t(messageKey));
      return;
    }
    const saved = result.saved;

    onUpdateProxyProfiles(
      proxyProfiles.some((profile) => profile.id === saved.id)
        ? proxyProfiles.map((profile) => profile.id === saved.id ? saved : profile)
        : [...proxyProfiles, saved],
    );
    setDraft(null);
  };

  const confirmDelete = () => {
    if (!deleteTarget) return;
    const cleaned = removeProxyProfileReferences(deleteTarget.id, {
      hosts,
      groupConfigs,
    });
    onUpdateProxyProfiles(proxyProfiles.filter((profile) => profile.id !== deleteTarget.id));
    onUpdateHosts(cleaned.hosts);
    onUpdateGroupConfigs(cleaned.groupConfigs);
    if (draft?.id === deleteTarget.id) {
      setDraft(null);
    }
    setDeleteTarget(null);
  };

  return (
    <div className="h-full flex relative">
      <div className={cn("flex-1 flex flex-col min-h-0 transition-all duration-200", draft && "mr-[380px]")}>
        <VaultPageHeader>
            <Button
              onClick={openCreate}
              variant="secondary"
              className={vaultHeaderSecondaryButtonClass}
            >
              <Plus size={14} />
              {t("proxyProfiles.action.add")}
            </Button>
            <div className="ml-auto flex items-center gap-2 min-w-0 flex-shrink">
              <VaultHeaderSearch
                aria-label={t("proxyProfiles.search.placeholder")}
                value={search}
                onChange={(event) => setSearch(event.target.value)}
                placeholder={t("proxyProfiles.search.placeholder")}
                className="flex-shrink w-64"
              />
              <Dropdown>
                <DropdownTrigger asChild>
                  <Button
                    aria-label={t("proxyProfiles.viewMode")}
                    variant="ghost"
                    size="icon"
                    className={cn(vaultHeaderIconButtonClass, "flex-shrink-0")}
                  >
                    {proxyProfilesViewMode === "grid" ? (
                      <LayoutGrid size={16} />
                    ) : (
                      <ListIcon size={16} />
                    )}
                    <ChevronDown size={10} className="ml-0.5" />
                  </Button>
                </DropdownTrigger>
                <DropdownContent className="w-32" align="end">
                  <Button
                    variant={proxyProfilesViewMode === "grid" ? "secondary" : "ghost"}
                    className="w-full justify-start gap-2 h-9"
                    onClick={() => setViewMode("grid")}
                  >
                    <LayoutGrid size={14} /> {t("vault.view.grid")}
                  </Button>
                  <Button
                    variant={proxyProfilesViewMode === "list" ? "secondary" : "ghost"}
                    className="w-full justify-start gap-2 h-9"
                    onClick={() => setViewMode("list")}
                  >
                    <ListIcon size={14} /> {t("vault.view.list")}
                  </Button>
                </DropdownContent>
              </Dropdown>
            </div>
        </VaultPageHeader>

        <div
          ref={listRef}
          className="flex-1 overflow-y-auto"
          onDragOverCapture={profileReorder.handleDragOverCapture}
          onDragOver={profileReorder.handleDragOver}
          onDropCapture={profileReorder.handleDropCapture}
          onDragEndCapture={profileReorder.handleDragEndCapture}
        >
          <div className="space-y-3 p-3">
            <div className="flex items-center justify-between">
              <h2 className={vaultSectionTitleClass}>
                {t("proxyProfiles.section.proxies")}
              </h2>
              <span className="text-xs text-muted-foreground">
                {t("proxyProfiles.count.items", { count: filteredProfiles.length })}
              </span>
            </div>

            {filteredProfiles.length === 0 ? (
              <div className="flex flex-col items-center justify-center h-64 text-muted-foreground">
                <div className="h-16 w-16 rounded-2xl bg-secondary/80 flex items-center justify-center mb-4">
                  <Globe size={32} className="opacity-60" />
                </div>
                <h3 className="text-lg font-semibold text-foreground mb-2">
                  {t("proxyProfiles.empty.title")}
                </h3>
                <p className="text-sm text-center max-w-sm mb-4">
                  {t("proxyProfiles.empty.desc")}
                </p>
                <Button onClick={openCreate}>
                  <Plus size={14} className="mr-2" />
                  {t("proxyProfiles.action.add")}
                </Button>
              </div>
            ) : (
              <div
                className={
                  proxyProfilesViewMode === "grid"
                    ? "grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
                    : "flex flex-col gap-0"
                }
              >
                {filteredProfiles.map((profile) => (
                  <ProxyProfileCard
                    key={profile.id}
                    profile={profile}
                    usageCount={usageByProfileId.get(profile.id) ?? 0}
                    viewMode={proxyProfilesViewMode}
                    isSelected={draft?.id === profile.id}
                    reorderProps={profileReorder.getItemReorderProps(profile.id, `proxy:${profile.id}`)}
                    onClick={() => openEdit(profile)}
                    onEdit={() => openEdit(profile)}
                    onDuplicate={() => duplicateProfile(profile)}
                    onDelete={() => setDeleteTarget(profile)}
                  />
                ))}
              </div>
            )}
          </div>
        </div>
      </div>

      {draft && (
        <AsidePanel
          open={true}
          onClose={() => setDraft(null)}
          title={draft.label || t("proxyProfiles.panel.newTitle")}
        >
          <AsidePanelContent>
            <Card className="p-3 space-y-3 bg-card border-border/80">
              <div className="flex items-center gap-2">
                <Settings2 size={14} className="text-muted-foreground" />
                <p className="text-xs font-semibold">{t("proxyProfiles.field.name")}</p>
              </div>
              <Input
                aria-label={t("proxyProfiles.field.name")}
                value={draft.label}
                onChange={(event) => setDraft({ ...draft, label: event.target.value })}
                placeholder={t("proxyProfiles.field.name")}
                className="h-10"
              />
            </Card>

            <Card className="p-3 space-y-3 bg-card border-border/80">
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <Globe size={14} className="text-muted-foreground" />
                  <p className="text-xs font-semibold">{t("field.type")}</p>
                </div>
                <Select
                  value={draft.config.type}
                  onValueChange={(value) => updateDraftConfig("type", value as ProxyConfig["type"])}
                >
                  <SelectTrigger aria-label={t("field.type")} className="h-10">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="http">HTTP</SelectItem>
                    <SelectItem value="socks5">SOCKS5</SelectItem>
                    <SelectItem value="command">{t("hostDetails.proxyPanel.command")}</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {isProxyCommandConfig(draft.config) ? (
                <div className="space-y-2">
                  <p className="text-xs text-muted-foreground">
                    {t("hostDetails.proxyPanel.commandHelp")}
                  </p>
                  <Input
                    aria-label={t("hostDetails.proxyPanel.commandPlaceholder")}
                    value={draft.config.command || ""}
                    onChange={(event) => updateDraftConfig("command", event.target.value)}
                    placeholder={t("hostDetails.proxyPanel.commandPlaceholder")}
                    className="h-10 font-mono text-xs"
                  />
                </div>
              ) : (
                <div className="flex gap-2">
                  <Input
                    aria-label={t("hostDetails.proxyPanel.hostPlaceholder")}
                    value={draft.config.host}
                    onChange={(event) => updateDraftConfig("host", event.target.value)}
                    placeholder={t("hostDetails.proxyPanel.hostPlaceholder")}
                    className="h-10 flex-1"
                  />
                  <Input
                    aria-label={t("hostDetails.port")}
                    type="number"
                    value={draft.config.port || ""}
                    onChange={(event) => updateDraftConfig("port", event.target.value === "" ? 0 : Number(event.target.value))}
                    placeholder="3128"
                    min={1}
                    max={65535}
                    step={1}
                    className="h-10 w-24 text-center"
                  />
                </div>
              )}
            </Card>

            {!isProxyCommandConfig(draft.config) && <Card className="p-3 space-y-3 bg-card border-border/80">
              <div className="flex items-center justify-between gap-3">
                <div className="flex items-center gap-2">
                  <KeyRound size={14} className="text-muted-foreground" />
                  <p className="text-xs font-semibold">{t("hostDetails.proxyPanel.credentials")}</p>
                </div>
                <Badge variant="secondary" className="text-xs">{t("common.optional")}</Badge>
              </div>
              {identities.length > 0 && (
                <div className="space-y-2">
                  <p className="text-xs text-muted-foreground">
                    {t("hostDetails.proxyPanel.keychainIdentity")}
                  </p>
                  <Select
                    value={selectedDraftIdentityValue}
                    onValueChange={(value) => {
                      if (value === missingIdentityValue) return;
                      updateDraftConfig(
                        "identityId",
                        value === manualCredentialsValue ? undefined : value,
                      );
                    }}
                  >
                    <SelectTrigger
                      aria-label={t("hostDetails.proxyPanel.keychainIdentity")}
                      className="h-10"
                    >
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value={manualCredentialsValue}>
                        {t("hostDetails.proxyPanel.manualCredentials")}
                      </SelectItem>
                      {hasMissingDraftIdentity && (
                        <SelectItem value={missingIdentityValue}>
                          {t("hostDetails.proxyPanel.missingIdentity")}
                        </SelectItem>
                      )}
                      {identities.map((identity) => (
                        <SelectItem key={identity.id} value={identity.id}>
                          {identity.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}
              {hasMissingDraftIdentity && (
                <div className="min-w-0 rounded-md border border-destructive/30 bg-destructive/10 p-2 text-sm text-destructive">
                  {t("hostDetails.proxyPanel.missingIdentity")}
                </div>
              )}
              {hasIncompleteDraftIdentity && (
                <div className="min-w-0 rounded-md border border-destructive/30 bg-destructive/10 p-2 text-sm text-destructive">
                  {t("hostDetails.proxyPanel.incompleteIdentity")}
                </div>
              )}
              {hasUnreadableDraftIdentity && (
                <div className="min-w-0 rounded-md border border-destructive/30 bg-destructive/10 p-2 text-sm text-destructive">
                  {t("hostDetails.proxyPanel.unreadableIdentity")}
                </div>
              )}
              {selectedDraftIdentity ? (
                <div className="min-w-0 rounded-md bg-secondary/50 p-2 text-sm">
                  <div className="flex min-w-0 items-center gap-2">
                    <Badge variant="secondary" className="text-xs shrink-0">
                      {t("hostDetails.proxyPanel.keychainIdentity")}
                    </Badge>
                    <span className="truncate">
                      {selectedDraftIdentity.label} - {selectedDraftIdentity.username}
                    </span>
                  </div>
                </div>
              ) : (
                <>
                  <Input
                    aria-label={t("hostDetails.proxyPanel.usernamePlaceholder")}
                    value={draft.config.username || ""}
                    onChange={(event) => updateDraftConfig("username", event.target.value)}
                    placeholder={t("hostDetails.proxyPanel.usernamePlaceholder")}
                    className="h-10"
                  />
                  <Input
                    aria-label={t("hostDetails.proxyPanel.passwordPlaceholder")}
                    type="password"
                    value={draft.config.password || ""}
                    onChange={(event) => updateDraftConfig("password", event.target.value)}
                    placeholder={t("hostDetails.proxyPanel.passwordPlaceholder")}
                    className="h-10"
                  />
                </>
              )}
            </Card>}
          </AsidePanelContent>
          <AsidePanelFooter>
            <Button className="w-full" onClick={saveDraft}>
              {t("common.save")}
            </Button>
          </AsidePanelFooter>
        </AsidePanel>
      )}

      <Dialog open={Boolean(deleteTarget)} onOpenChange={(open) => !open && setDeleteTarget(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <AlertTriangle size={18} className="text-destructive" />
              {t("proxyProfiles.delete.title")}
            </DialogTitle>
            <DialogDescription>
              {deleteTarget
                ? t("proxyProfiles.delete.desc", {
                  name: deleteTarget.label,
                  count: usageByProfileId.get(deleteTarget.id) ?? 0,
                })
                : ""}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteTarget(null)}>
              {t("common.cancel")}
            </Button>
            <Button variant="destructive" onClick={confirmDelete}>
              {t("action.delete")}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default ProxyProfilesManager;