FeatureSetPanel.tsx

import { useState, useEffect } from 'react';
import {
  X,
  Loader2,
  Search,
  Server,
  Wrench,
  MessageSquare,
  FileText,
  Package,
  ChevronDown,
  ChevronRight,
  ToggleLeft,
  ToggleRight,
  Settings,
  Trash2,
  Check,
  Globe,
  Star,
  Shield,
  Save,
} from 'lucide-react';
import { Button, useToast, ToastContainer, useConfirm } from '@mcpmux/ui';
import type { FeatureSet, AddMemberInput } from '@/lib/api/featureSets';
import { setFeatureSetMembers } from '@/lib/api/featureSets';
import type { ServerFeature } from '@/lib/api/serverFeatures';
import { listServerFeatures } from '@/lib/api/serverFeatures';

interface FeatureSetPanelProps {
  featureSet: FeatureSet;
  spaceId: string;
  onClose: () => void;
  onDelete?: (id: string) => void;
  onUpdate?: () => void;
}

interface ServerGroup {
  serverId: string;
  features: ServerFeature[];
  isExpanded: boolean;
}

export function FeatureSetPanel({ featureSet, spaceId, onClose, onDelete, onUpdate }: FeatureSetPanelProps) {
  const [allFeatures, setAllFeatures] = useState<ServerFeature[]>([]);
  const [selectedFeatureIds, setSelectedFeatureIds] = useState<Set<string>>(new Set());
  const [searchQuery, setSearchQuery] = useState('');
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [expandedServers, setExpandedServers] = useState<Set<string>>(new Set());
  const { toasts, success, error: showError, dismiss } = useToast();
  const { confirm, ConfirmDialogElement } = useConfirm();

  // Collapsible sections - only one expanded at a time, features by default
  const [expandedSections, setExpandedSections] = useState({
    settings: false,
    features: true,
  });

  // Determine if this is a configurable feature set
  const isConfigurable = featureSet.feature_set_type === 'default' || featureSet.feature_set_type === 'custom';
  const isDefault = featureSet.feature_set_type === 'default';
  const isCustom = featureSet.feature_set_type === 'custom';
  const isAll = featureSet.feature_set_type === 'all';
  const isServerAll = featureSet.feature_set_type === 'server-all';
  
  // For special feature sets, compute actual member count
  const getActualMemberCount = () => {
    if (isAll) {
      // "All Features" includes everything
      return allFeatures.length;
    }
    if (isServerAll && featureSet.server_id) {
      // "Server All" - use server_id from feature set
      return allFeatures.filter(f => f.server_id === featureSet.server_id).length;
    }
    // For configurable sets, use selectedFeatureIds
    return selectedFeatureIds.size;
  };
  
  // Check if a feature should be shown as selected
  const isFeatureSelected = (featureId: string, feature: ServerFeature) => {
    if (isAll) {
      // All features are selected
      return true;
    }
    if (isServerAll && featureSet.server_id) {
      // Only features from the target server
      return feature.server_id === featureSet.server_id;
    }
    // For configurable sets, check selectedFeatureIds
    return selectedFeatureIds.has(featureId);
  };

  useEffect(() => {
    const loadFeatures = async () => {
      setIsLoading(true);
      try {
        const features = await listServerFeatures(spaceId);
        setAllFeatures(features);
        
        // Initialize selected features from current members
        const currentIds = new Set<string>();
        
        // For special feature sets, compute selection dynamically
        if (featureSet.feature_set_type === 'all') {
          // All features are selected
          features.forEach(f => currentIds.add(f.id));
        } else if (featureSet.feature_set_type === 'server-all' && featureSet.server_id) {
          // All features from this server are selected
          features.forEach(f => {
            if (f.server_id === featureSet.server_id) {
              currentIds.add(f.id);
            }
          });
        } else {
          // For configurable sets (default/custom), use members array
          featureSet.members?.forEach((m) => {
            if (m.member_type === 'feature' && m.mode === 'include') {
              currentIds.add(m.member_id);
            }
          });
        }
        
        setSelectedFeatureIds(currentIds);
        
        // Start with all servers collapsed
        setExpandedServers(new Set());
      } catch (e) {
        setError(e instanceof Error ? e.message : String(e));
      } finally {
        setIsLoading(false);
      }
    };
    
    loadFeatures();
  }, [spaceId, featureSet]);

  // Group features by server
  const serverGroups: ServerGroup[] = allFeatures.reduce((acc, feature) => {
    const group = acc.find((g) => g.serverId === feature.server_id);
    if (group) {
      group.features.push(feature);
    } else {
      acc.push({ 
        serverId: feature.server_id, 
        features: [feature],
        isExpanded: expandedServers.has(feature.server_id)
      });
    }
    return acc;
  }, [] as ServerGroup[]);

  // Filter by search
  const filteredGroups = serverGroups
    .map((group) => ({
      ...group,
      features: group.features.filter((f) =>
        f.feature_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        f.display_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
        f.description?.toLowerCase().includes(searchQuery.toLowerCase())
      ),
    }))
    .filter((group) => group.features.length > 0);

  const toggleFeature = (featureId: string) => {
    if (!isConfigurable) return;
    setSelectedFeatureIds((prev) => {
      const next = new Set(prev);
      if (next.has(featureId)) {
        next.delete(featureId);
      } else {
        next.add(featureId);
      }
      return next;
    });
  };

  const toggleServer = (serverId: string) => {
    setExpandedServers((prev) => {
      const next = new Set(prev);
      if (next.has(serverId)) {
        next.delete(serverId);
      } else {
        next.add(serverId);
      }
      return next;
    });
  };

  const toggleAllInServer = (serverId: string) => {
    if (!isConfigurable) return;
    const serverFeatures = allFeatures.filter((f) => f.server_id === serverId);
    const allSelected = serverFeatures.every((f) => selectedFeatureIds.has(f.id));
    
    setSelectedFeatureIds((prev) => {
      const next = new Set(prev);
      serverFeatures.forEach((f) => {
        if (allSelected) {
          next.delete(f.id);
        } else {
          next.add(f.id);
        }
      });
      return next;
    });
  };

  const handleSave = async () => {
    setIsSaving(true);
    setError(null);
    try {
      // Update members
      const members: AddMemberInput[] = Array.from(selectedFeatureIds).map((id) => ({
        member_type: 'feature' as const,
        member_id: id,
        mode: 'include' as const,
      }));
      
      await setFeatureSetMembers(featureSet.id, members);

      success('Changes saved', `"${featureSet.name}" has been updated with ${members.length} feature${members.length !== 1 ? 's' : ''}`);
      onUpdate?.();
    } catch (e) {
      const errorMsg = e instanceof Error ? e.message : String(e);
      setError(errorMsg);
      showError('Failed to save changes', errorMsg);
    } finally {
      setIsSaving(false);
    }
  };

  const getFeatureIcon = (type: string) => {
    switch (type) {
      case 'tool':
        return <Wrench className="h-4 w-4 text-purple-500" />;
      case 'prompt':
        return <MessageSquare className="h-4 w-4 text-blue-500" />;
      case 'resource':
        return <FileText className="h-4 w-4 text-green-500" />;
      default:
        return <Package className="h-4 w-4 text-gray-500" />;
    }
  };

  const getTypeColor = (type: string) => {
    switch (type) {
      case 'tool':
        return 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300';
      case 'prompt':
        return 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300';
      case 'resource':
        return 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300';
      default:
        return 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300';
    }
  };

  const getFeatureSetIcon = () => {
    if (featureSet.icon) return <span className="text-xl">{featureSet.icon}</span>;
    switch (featureSet.feature_set_type) {
      case 'all': return <Globe className="h-6 w-6 text-green-500" />;
      case 'default': return <Star className="h-6 w-6 text-yellow-500" />;
      case 'server-all': return <Server className="h-6 w-6 text-blue-500" />;
      case 'custom': default: return <Package className="h-6 w-6 text-purple-500" />;
    }
  };

  const toggleSection = (section: keyof typeof expandedSections) => {
    setExpandedSections(prev => {
      // Accordion behavior - close others when opening a section
      if (!prev[section]) {
        return { settings: false, features: false, [section]: true };
      }
      // Allow closing the current section
      return { ...prev, [section]: false };
    });
  };

  return (
    <div className="fixed right-0 top-0 bottom-0 w-full max-w-[45%] min-w-[600px] bg-[rgb(var(--surface))] border-l border-[rgb(var(--border))] shadow-2xl flex flex-col animate-in slide-in-from-right duration-300 z-50">
      <ToastContainer toasts={toasts} onClose={dismiss} />
      {ConfirmDialogElement}
      {/* Panel Header */}
      <div className="flex-shrink-0 p-4 border-b border-[rgb(var(--border))] bg-[rgb(var(--surface-elevated))]">
        <div className="flex items-start justify-between mb-3">
          <div className="flex items-center gap-3 flex-1 min-w-0">
            <div className="w-10 h-10 flex items-center justify-center bg-[rgb(var(--background))] rounded-lg flex-shrink-0 border border-[rgb(var(--border))]">
              {getFeatureSetIcon()}
            </div>
            <div className="flex-1 min-w-0">
              <h2 className="text-lg font-bold truncate flex items-center gap-2">
                {featureSet.name}
              </h2>
              <div className="flex items-center gap-2 mt-0.5">
                <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium border ${
                  isDefault 
                    ? 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800'
                    : isCustom
                      ? 'bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-400 border-purple-200 dark:border-purple-800'
                      : 'bg-gray-50 dark:bg-gray-900/20 text-gray-700 dark:text-gray-400 border-gray-200 dark:border-gray-800'
                }`}>
                  {featureSet.feature_set_type.toUpperCase()}
                </span>
                <span className="text-xs text-[rgb(var(--muted))] truncate">
                  ID: {featureSet.id}
                </span>
              </div>
            </div>
          </div>
          <button
            data-testid="featureset-panel-close"
            onClick={onClose}
            className="p-1.5 rounded-lg hover:bg-[rgb(var(--surface-hover))] transition-colors flex-shrink-0"
          >
            <X className="h-5 w-5" />
          </button>
        </div>
      </div>

      {/* Scrollable Content */}
      <div className="flex-1 overflow-y-auto">
        <div className="p-6 space-y-5">
          {/* Error */}
          {error && (
            <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-600 dark:text-red-400">
              {error}
            </div>
          )}

          {/* Info Section (Read-only for non-custom/default) */}
          <div className="bg-[rgb(var(--background))] rounded-xl border-2 border-[rgb(var(--border))] overflow-hidden">
            <button
              onClick={() => toggleSection('settings')}
              className={`w-full flex items-center justify-between p-4 transition-all ${
                expandedSections.settings 
                  ? 'bg-gradient-to-r from-primary-50 to-primary-100/50 dark:from-primary-900/10 dark:to-primary-800/10' 
                  : 'bg-[rgb(var(--surface))] hover:bg-[rgb(var(--surface-hover))]'
              }`}
            >
              <div className="flex items-center gap-3">
                <div className={`p-2 rounded-lg ${
                  expandedSections.settings
                    ? 'bg-gray-500 text-white'
                    : 'bg-gray-100 dark:bg-gray-900/30 text-gray-600 dark:text-gray-400'
                }`}>
                  <Settings className="h-5 w-5" />
                </div>
                <span className="font-semibold text-base">General Information</span>
              </div>
              {expandedSections.settings ? (
                <ChevronDown className="h-5 w-5 text-[rgb(var(--muted))]" />
              ) : (
                <ChevronRight className="h-5 w-5 text-[rgb(var(--muted))]" />
              )}
            </button>
            
            {expandedSections.settings && (
              <div className="p-4 space-y-4 border-t-2 border-[rgb(var(--border))] bg-white dark:bg-[rgb(var(--background))]">
                <div>
                  <label className="block text-xs font-medium mb-1.5 text-[rgb(var(--muted))]">
                    Description
                  </label>
                  <p className="text-sm">
                    {featureSet.description || 'No description provided.'}
                  </p>
                </div>
                
                {isDefault && (
                  <div className="p-3 bg-yellow-50 dark:bg-yellow-900/10 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                    <div className="flex gap-2">
                      <Star className="h-4 w-4 text-yellow-500 flex-shrink-0 mt-0.5" />
                      <div className="text-xs text-yellow-800 dark:text-yellow-200">
                        <strong>Default Feature Set:</strong> Features selected here are automatically granted to all clients in this workspace.
                      </div>
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>

          {/* Feature Selection Section */}
          <div className="bg-[rgb(var(--background))] rounded-xl border-2 border-[rgb(var(--border))] overflow-hidden">
            <button
              onClick={() => toggleSection('features')}
              className={`w-full flex items-center justify-between p-4 transition-all ${
                expandedSections.features
                  ? 'bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20' 
                  : 'bg-[rgb(var(--surface))] hover:bg-[rgb(var(--surface-hover))]'
              }`}
            >
              <div className="flex items-center gap-3 flex-1">
                <div className={`p-2 rounded-lg ${
                  expandedSections.features
                    ? 'bg-blue-500 text-white'
                    : 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400'
                }`}>
                  <Shield className="h-5 w-5" />
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="font-semibold text-base">Included Features</span>
                    {/* Show count badge only for configurable feature sets */}
                    {isConfigurable && (
                      <span className={`text-xs px-2.5 py-1 rounded-full font-bold ${
                        getActualMemberCount() > 0
                          ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 border border-green-300 dark:border-green-700'
                          : 'bg-gray-100 dark:bg-gray-900/30 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-700'
                      }`}>
                        {getActualMemberCount()} / {allFeatures.length} selected
                      </span>
                    )}
                  </div>
                  {/* Progress Bar */}
                  <div className="h-1.5 bg-gray-200 dark:bg-gray-800 rounded-full overflow-hidden">
                    <div 
                      className={`h-full transition-all duration-300 ${
                        getActualMemberCount() === 0 
                          ? 'bg-gray-400 dark:bg-gray-600' 
                          : 'bg-gradient-to-r from-green-500 to-blue-500'
                      }`}
                      style={{ 
                        width: `${allFeatures.length > 0 ? (getActualMemberCount() / allFeatures.length * 100) : 0}%` 
                      }}
                    />
                  </div>
                </div>
              </div>
              {expandedSections.features ? (
                <ChevronDown className="h-5 w-5 text-[rgb(var(--muted))]" />
              ) : (
                <ChevronRight className="h-5 w-5 text-[rgb(var(--muted))]" />
              )}
            </button>

            {expandedSections.features && (
              <div className="border-t-2 border-[rgb(var(--border))] bg-white dark:bg-[rgb(var(--background))] flex flex-col h-[500px]">
                {/* Search Bar inside panel */}
                <div className="p-3 border-b border-[rgb(var(--border))] bg-[rgb(var(--surface))]">
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[rgb(var(--muted))]" />
                    <input
                      type="text"
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      placeholder="Search features..."
                      className="w-full pl-9 pr-3 py-2 text-sm rounded-lg border border-[rgb(var(--border))] bg-[rgb(var(--background))] focus:outline-none focus:ring-2 focus:ring-primary-500"
                    />
                  </div>
                </div>

                <div className="flex-1 overflow-y-auto">
                  {isLoading ? (
                    <div className="flex items-center justify-center h-full">
                      <Loader2 className="h-8 w-8 animate-spin text-primary-500" />
                    </div>
                  ) : filteredGroups.length === 0 ? (
                    <div className="flex flex-col items-center justify-center h-full text-[rgb(var(--muted))] p-4 text-center">
                      <Package className="h-8 w-8 mb-2 opacity-50" />
                      <p className="text-sm">No features found matching your search</p>
                    </div>
                  ) : (
                    <div className="divide-y divide-[rgb(var(--border))]">
                      {filteredGroups.map((group) => {
                        // For special sets, use isFeatureSelected logic
                        const selectedCount = group.features.filter((f) =>
                          isFeatureSelected(f.id, f)
                        ).length;
                        const allSelected = selectedCount === group.features.length;
                        const someSelected = selectedCount > 0 && selectedCount < group.features.length;
                        const isExpanded = group.isExpanded;
                        
                        return (
                          <div key={group.serverId} className="bg-[rgb(var(--surface))]">
                            <div 
                              className="flex items-center justify-between px-4 py-3 hover:bg-[rgb(var(--surface-hover))] cursor-pointer transition-colors"
                              onClick={() => toggleServer(group.serverId)}
                            >
                              <div className="flex items-center gap-3 flex-1 min-w-0">
                                {isExpanded ? (
                                  <ChevronDown className="h-4 w-4 text-[rgb(var(--muted))] flex-shrink-0" />
                                ) : (
                                  <ChevronRight className="h-4 w-4 text-[rgb(var(--muted))] flex-shrink-0" />
                                )}
                                <Server className="h-4 w-4 text-blue-500 flex-shrink-0" />
                                <div className="flex-1 min-w-0">
                                  <div className="flex items-center gap-2 mb-1">
                                    <span className="font-medium text-sm truncate">{group.serverId}</span>
                                    {/* Show count badge only for configurable feature sets */}
                                    {isConfigurable && (
                                      <span className={`text-xs px-2 py-0.5 rounded-full font-bold flex-shrink-0 ${
                                        selectedCount === 0
                                          ? 'bg-gray-100 dark:bg-gray-900/30 text-gray-600 dark:text-gray-400'
                                          : allSelected
                                            ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 border border-green-300 dark:border-green-700'
                                            : 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 border border-amber-300 dark:border-amber-700'
                                      }`}>
                                        {selectedCount}/{group.features.length}
                                      </span>
                                    )}
                                  </div>
                                  {/* Progress Bar for Server */}
                                  <div className="h-1 bg-gray-200 dark:bg-gray-800 rounded-full overflow-hidden">
                                    <div 
                                      className={`h-full transition-all duration-300 ${
                                        selectedCount === 0 
                                          ? 'bg-gray-400 dark:bg-gray-600' 
                                          : allSelected
                                            ? 'bg-green-500'
                                            : 'bg-gradient-to-r from-amber-500 to-green-500'
                                      }`}
                                      style={{ 
                                        width: `${(selectedCount / group.features.length * 100)}%` 
                                      }}
                                    />
                                  </div>
                                </div>
                              </div>
                              
                              {isConfigurable && (
                                <button
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    toggleAllInServer(group.serverId);
                                  }}
                                  className={`p-1.5 rounded-md transition-colors hover:bg-[rgb(var(--background))] flex-shrink-0`}
                                  title={allSelected ? "Disable All" : "Enable All"}
                                >
                                  {allSelected ? (
                                    <ToggleRight className="h-5 w-5 text-primary-500" />
                                  ) : someSelected ? (
                                    <ToggleLeft className="h-5 w-5 text-amber-500" />
                                  ) : (
                                    <ToggleLeft className="h-5 w-5 text-[rgb(var(--muted))]" />
                                  )}
                                </button>
                              )}
                            </div>
                            
                            {isExpanded && (
                              <div className="bg-[rgb(var(--background))] border-t border-[rgb(var(--border))]">
                                {group.features.map((feature) => {
                                  const isSelected = isFeatureSelected(feature.id, feature);
                                  
                                  return (
                                    <button
                                      key={feature.id}
                                      onClick={() => toggleFeature(feature.id)}
                                      disabled={!isConfigurable}
                                      className={`w-full flex items-center gap-3 px-4 py-2.5 pl-12 text-left border-b border-[rgb(var(--border))] last:border-b-0 transition-colors
                                        ${isConfigurable ? 'hover:bg-[rgb(var(--surface-hover))]' : 'cursor-default'}
                                        ${isSelected ? 'bg-primary-50 dark:bg-primary-900/10' : ''}`}
                                    >
                                      <div className={`flex-shrink-0 w-4 h-4 rounded border flex items-center justify-center transition-colors ${
                                        isSelected 
                                          ? 'bg-primary-500 border-primary-500' 
                                          : 'border-[rgb(var(--border))] bg-white dark:bg-[rgb(var(--surface))]'
                                      }`}>
                                        {isSelected && <Check className="h-3 w-3 text-white" />}
                                      </div>
                                      
                                      {getFeatureIcon(feature.feature_type)}
                                      
                                      <div className="flex-1 min-w-0">
                                        <div className="flex items-center gap-2">
                                          <span className="font-medium text-sm truncate">
                                            {feature.display_name || feature.feature_name}
                                          </span>
                                          <span className={`text-[10px] px-1.5 py-0.5 rounded ${getTypeColor(feature.feature_type)}`}>
                                            {feature.feature_type}
                                          </span>
                                        </div>
                                        {feature.description && (
                                          <p className="text-xs text-[rgb(var(--muted))] mt-0.5 line-clamp-1">
                                            {feature.description}
                                          </p>
                                        )}
                                      </div>
                                    </button>
                                  );
                                })}
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Footer Actions */}
      <div className="flex-shrink-0 p-4 border-t border-[rgb(var(--border))] bg-[rgb(var(--surface-elevated))] flex items-center gap-3">
        {isCustom && onDelete && (
          <Button
            variant="ghost"
            size="sm"
            onClick={async () => {
              if (await confirm({
                title: 'Delete feature set',
                message: `Delete "${featureSet.name}"? This cannot be undone.`,
                confirmLabel: 'Delete',
                variant: 'danger',
              })) {
                onDelete(featureSet.id);
              }
            }}
            className="text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 mr-auto"
          >
            <Trash2 className="h-4 w-4 mr-2" />
            Delete
          </Button>
        )}
        
        {isConfigurable && (
          <Button
            onClick={handleSave}
            disabled={isSaving}
            className="w-full flex-1"
          >
            {isSaving ? (
              <><Loader2 className="h-4 w-4 mr-2 animate-spin" /> Saving...</>
            ) : (
              <><Save className="h-4 w-4 mr-2" /> Save Changes</>
            )}
          </Button>
        )}
      </div>
    </div>
  );
}