Netcatty/components/SelectGroupDialog.tsx

import { CheckSquare, FolderTree, Search, Square } from 'lucide-react';
import React, { useMemo, useState } from 'react';
import { useI18n } from '@/application/i18n/I18nProvider';
import type { Host } from '@/domain/models';
import { hostMatchesGroupPath } from '@/domain/selectHostSelection';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { ScrollArea } from '@/components/ui/scroll-area';
import { cn } from '@/lib/utils';

export interface SelectGroupDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  hosts: Host[];
  customGroups?: string[];
  selectedGroupPaths: string[];
  onSelectionChange: (selectedGroupPaths: string[]) => void;
}

function collectGroupPaths(
  hosts: Host[],
  customGroups: string[],
  selectedGroupPaths: string[],
): string[] {
  const paths = new Set<string>();
  for (const groupPath of [...customGroups, ...selectedGroupPaths]) {
    const parts = groupPath.split('/').filter(Boolean);
    for (let index = 1; index <= parts.length; index += 1) {
      paths.add(parts.slice(0, index).join('/'));
    }
  }
  for (const host of hosts) {
    const parts = host.group?.split('/').filter(Boolean) ?? [];
    for (let index = 1; index <= parts.length; index += 1) {
      paths.add(parts.slice(0, index).join('/'));
    }
  }
  return [...paths].sort((left, right) => left.localeCompare(right));
}

export const SelectGroupDialog: React.FC<SelectGroupDialogProps> = ({
  open,
  onOpenChange,
  hosts,
  customGroups = [],
  selectedGroupPaths,
  onSelectionChange,
}) => {
  const { t } = useI18n();
  const [searchQuery, setSearchQuery] = useState('');
  const selected = useMemo(() => new Set(selectedGroupPaths), [selectedGroupPaths]);
  const groupPaths = useMemo(
    () => collectGroupPaths(hosts, customGroups, selectedGroupPaths),
    [customGroups, hosts, selectedGroupPaths],
  );
  const displayedPaths = useMemo(() => {
    const query = searchQuery.trim().toLocaleLowerCase();
    if (!query) return groupPaths;
    return groupPaths.filter((path) => path.toLocaleLowerCase().includes(query));
  }, [groupPaths, searchQuery]);

  const togglePath = (path: string) => {
    if (selected.has(path)) {
      onSelectionChange(selectedGroupPaths.filter((candidate) => candidate !== path));
      return;
    }
    onSelectionChange([...selectedGroupPaths, path]);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md h-[min(78vh,600px)] flex flex-col p-0 gap-0 overflow-hidden">
        <DialogHeader className="px-4 pt-4 pb-3 shrink-0 border-b border-border/60">
          <DialogTitle className="text-base">{t('snippets.targets.selectGroups')}</DialogTitle>
        </DialogHeader>

        <div className="px-4 py-3 border-b border-border/60 shrink-0">
          <div className="relative">
            <Search
              size={14}
              className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
            />
            <Input
              value={searchQuery}
              onChange={(event) => setSearchQuery(event.target.value)}
              placeholder={t('common.searchPlaceholder')}
              className="h-8 pl-8"
            />
          </div>
        </div>

        <ScrollArea className="flex-1 min-h-0">
          <div className="p-3 space-y-1">
            {displayedPaths.length === 0 ? (
              <p className="py-10 text-center text-sm text-muted-foreground">
                {t('snippets.targets.noGroups')}
              </p>
            ) : displayedPaths.map((path) => {
              const isSelected = selected.has(path);
              const depth = Math.max(0, path.split('/').filter(Boolean).length - 1);
              const label = path.split('/').filter(Boolean).pop() ?? path;
              const hostCount = hosts.filter(
                (host) => host.protocol !== 'serial' && hostMatchesGroupPath(host, path),
              ).length;
              return (
                <button
                  key={path}
                  type="button"
                  className={cn(
                    'w-full min-h-11 flex items-center gap-2.5 rounded-lg px-2.5 text-left transition-colors',
                    isSelected ? 'bg-primary/10 text-foreground' : 'hover:bg-muted/70',
                  )}
                  style={{ paddingLeft: `${10 + depth * 16}px` }}
                  onClick={() => togglePath(path)}
                >
                  {isSelected ? (
                    <CheckSquare size={16} className="text-primary shrink-0" />
                  ) : (
                    <Square size={16} className="text-muted-foreground shrink-0" />
                  )}
                  <FolderTree size={16} className="text-primary shrink-0" />
                  <span className="min-w-0 flex-1">
                    <span className="block truncate text-sm font-medium">{label}</span>
                    <span className="block truncate text-[11px] text-muted-foreground">{path}</span>
                  </span>
                  <span className="text-[11px] text-muted-foreground shrink-0">
                    {t('vault.groups.hostsCount', { count: hostCount })}
                  </span>
                </button>
              );
            })}
          </div>
        </ScrollArea>

        <DialogFooter className="px-4 py-3 border-t border-border/60 shrink-0">
          <Button className="w-full" onClick={() => onOpenChange(false)}>
            {t('selectHost.continueWithCount', { count: selectedGroupPaths.length })}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};