router-studio/src/pages/studio/components/RouterGroupDialog.tsx

import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { useStudioStore } from '../store';
import { useShallow } from 'zustand/shallow';
import { FolderClosed, FolderOpen, Search, List } from 'lucide-react';
import { useState, useMemo, useEffect } from 'react';

interface RouteItem {
  id: string;
  path?: string;
  key?: string;
  description?: string;
  metadata?: Record<string, any>;
}

interface GroupedRoutes {
  [group: string]: RouteItem[];
}

type TabType = 'grouped' | 'all';

export const RouterGroupDialog = () => {
  const { showRouterGroup, setShowRouterGroup, routes, allRoutes, searchRoutes, setShowFilter, getAllRoutes } = useStudioStore(
    useShallow((state) => ({
      showRouterGroup: state.showRouterGroup,
      setShowRouterGroup: state.setShowRouterGroup,
      routes: state.routes,
      allRoutes: state.allRoutes,
      searchRoutes: state.searchRoutes,
      setShowFilter: state.setShowFilter,
      getAllRoutes: state.getAllRoutes,
    }))
  );

  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
  const [activeTab, setActiveTab] = useState<TabType>('grouped');

  useEffect(() => {
    if (showRouterGroup && activeTab === 'all') {
      getAllRoutes();
    }
  }, [showRouterGroup, activeTab, getAllRoutes]);

  const displayRoutes = activeTab === 'grouped' ? routes : allRoutes;

  // 按 path 分组
  const groupedRoutes = useMemo(() => {
    const groups: GroupedRoutes = {};
    displayRoutes.forEach((route: RouteItem) => {
      if (!route.path) return;
      // 获取第一级路径作为分组
      const firstSegment = route.path.split('/').filter(Boolean)[0] || 'root';
      if (!groups[firstSegment]) {
        groups[firstSegment] = [];
      }
      groups[firstSegment].push(route);
    });
    return groups;
  }, [displayRoutes]);

  const toggleGroup = (group: string) => {
    const newExpanded = new Set(expandedGroups);
    if (newExpanded.has(group)) {
      newExpanded.delete(group);
    } else {
      newExpanded.add(group);
    }
    setExpandedGroups(newExpanded);
  };

  const handleSearchByPath = (e: React.MouseEvent, path: string) => {
    e.stopPropagation();
    const keyword = `WHERE path='${path}'`;
    searchRoutes(keyword);
    setShowFilter(true);
    setShowRouterGroup(false);
  };

  const handleSearchByKey = (e: React.MouseEvent, path: string, key: string) => {
    e.stopPropagation();
    const keyword = `WHERE path='${path}' AND key='${key}'`;
    searchRoutes(keyword);
    setShowFilter(true);
    setShowRouterGroup(false);
  };

  const sortedGroups = Object.keys(groupedRoutes).sort();

  const renderRouteItem = (route: RouteItem) => (
    <div
      key={route.id}
      className="px-4 py-2 hover:bg-gray-50 transition-colors flex items-center justify-between"
    >
      <div className="flex items-center gap-2 flex-1 min-w-0">
        <span className="font-mono text-sm text-gray-800 truncate">{route.path}</span>
        {route.key && (
          <>
            <span className="text-xs text-gray-500">/</span>
            <span className="text-sm text-gray-600 truncate">{route.key}</span>
            <button
              className="p-1 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 transition-colors shrink-0"
              title="搜索此路径和key"
              onClick={(e) => handleSearchByKey(e, route.path!, route.key!)}
            >
              <Search size={14} />
            </button>
          </>
        )}
      </div>
      {route.description && (
        <span className="text-xs text-gray-500 truncate max-w-xs ml-2 shrink-0">
          {route.description}
        </span>
      )}
    </div>
  );

  const renderGroup = (group: string) => {
    const isExpanded = expandedGroups.has(group);
    const groupRoutes = groupedRoutes[group];
    // 使用分组的第一个路由的完整 path 作为搜索关键词
    const searchPath = groupRoutes[0]?.path || `/${group}`;

    return (
      <div key={group} className="border border-gray-200 rounded-md overflow-hidden">
        <div
          className="flex items-center gap-2 px-3 py-2 bg-gray-50 cursor-pointer hover:bg-gray-100 transition-colors"
          onClick={() => toggleGroup(group)}
        >
          {isExpanded ? (
            <FolderOpen size={18} className="text-gray-600" />
          ) : (
            <FolderClosed size={18} className="text-gray-600" />
          )}
          <span className="font-medium text-gray-900">/{group}</span>
          <span className="text-xs text-gray-500">({groupRoutes.length} 个路由)</span>
          <button
            className="ml-auto p-1 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 transition-colors"
            title="搜索此路径"
            onClick={(e) => handleSearchByPath(e, searchPath)}
          >
            <Search size={14} />
          </button>
        </div>
        {isExpanded && (
          <div className="divide-y divide-gray-100">
            {groupRoutes.map(renderRouteItem)}
          </div>
        )}
      </div>
    );
  };

  return (
    <Dialog open={showRouterGroup} onOpenChange={setShowRouterGroup}>
      <DialogContent className="max-w-3xl! max-h-[80vh] overflow-hidden flex flex-col">
        <DialogHeader>
          <DialogTitle>路由分组</DialogTitle>
        </DialogHeader>
        {/* Tabs */}
        <div className="flex border-b border-gray-200">
          <button
            className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === 'grouped'
                ? 'text-gray-900 border-b-2 border-gray-900'
                : 'text-gray-500 hover:text-gray-700'
            }`}
            onClick={() => setActiveTab('grouped')}
          >
            <FolderClosed size={16} />
            当前分组
          </button>
          <button
            className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === 'all'
                ? 'text-gray-900 border-b-2 border-gray-900'
                : 'text-gray-500 hover:text-gray-700'
            }`}
            onClick={() => setActiveTab('all')}
          >
            <List size={16} />
            全部路由 ({allRoutes.length})
          </button>
        </div>
        <div className="flex-1 overflow-auto space-y-2 p-2">
          {sortedGroups.length === 0 ? (
            <div className="text-center text-gray-500 py-8">
              {activeTab === 'all' && allRoutes.length === 0 ? '加载中...' : '暂无路由数据'}
            </div>
          ) : (
            sortedGroups.map(renderGroup)
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
};