PlexPlaylistSync/components/StrategySelector.tsx

import React, { useState, useRef, useEffect } from 'react';
import { SyncStrategy, RegexReplacement, SyncState } from '../types';
import { 
  ArrowRightCircle, 
  ArrowLeftCircle, 
  GitMerge, 
  ChevronDown,
  Check,
  HelpCircle,
  Plus,
  Trash2,
  Save,
  RotateCcw,
  Zap,
  Loader2
} from 'lucide-react';

interface StrategyOption {
  value: SyncStrategy;
  label: string;
  description: string;
  icon: React.ElementType;
  color: string;
}

const STRATEGIES: StrategyOption[] = [
  {
    value: SyncStrategy.LOCAL_OVERWRITE,
    label: 'Local Overwrite',
    description: 'Local playlist completely overwrites Cloud. (No Diff)',
    icon: ArrowRightCircle,
    color: 'text-blue-400'
  },
  {
    value: SyncStrategy.CLOUD_OVERWRITE,
    label: 'Cloud Overwrite',
    description: 'Cloud playlist completely overwrites Local. (No Diff)',
    icon: ArrowLeftCircle,
    color: 'text-green-400'
  },
  {
    value: SyncStrategy.MERGE_LOCAL,
    label: 'Two-way Merge (Local Priority)',
    description: 'Merge both. Conflicts resolve to Local version.',
    icon: GitMerge,
    color: 'text-blue-300'
  },
  {
    value: SyncStrategy.MERGE_CLOUD,
    label: 'Two-way Merge (Cloud Priority)',
    description: 'Merge both. Conflicts resolve to Cloud version.',
    icon: GitMerge,
    color: 'text-green-300'
  }
];

interface StrategySelectorProps {
  currentStrategy: SyncStrategy;
  onSelect: (strategy: SyncStrategy, label: string) => void;
  savedRegexReplacements: RegexReplacement[];
  onSaveRegex: (replacements: RegexReplacement[]) => void;
  syncState: SyncState;
  onSync: () => void;
}

const StrategySelector: React.FC<StrategySelectorProps> = ({ 
  currentStrategy, 
  onSelect, 
  savedRegexReplacements, 
  onSaveRegex,
  syncState,
  onSync
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Local state for regex editing
  const [localReplacements, setLocalReplacements] = useState<RegexReplacement[]>([]);
  const [isDirty, setIsDirty] = useState(false);

  const isSyncing = syncState === SyncState.SYNCING;
  const isLocked = isSyncing || syncState === SyncState.SUCCESS;

  // Initialize local state when prop updates (only if not dirty, or initially)
  useEffect(() => {
    setLocalReplacements(JSON.parse(JSON.stringify(savedRegexReplacements)));
    setIsDirty(false);
  }, [savedRegexReplacements]);

  // Check dirty state whenever local changes
  useEffect(() => {
    const isDifferent = JSON.stringify(localReplacements) !== JSON.stringify(savedRegexReplacements);
    setIsDirty(isDifferent);
  }, [localReplacements, savedRegexReplacements]);

  const selectedOption = STRATEGIES.find(s => s.value === currentStrategy) || STRATEGIES[0];

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const handleSelect = (strategy: StrategyOption) => {
    if (isLocked) return;
    onSelect(strategy.value, strategy.label);
  };

  // Regex Handlers
  const handleAddRegex = () => {
    if (isLocked) return;
    const newId = Date.now().toString();
    setLocalReplacements(prev => [...prev, { id: newId, pattern: '', replacement: '' }]);
  };

  const handleDeleteRegex = (id: string) => {
    if (isLocked) return;
    setLocalReplacements(prev => prev.filter(r => r.id !== id));
  };

  const handleUpdateRegex = (id: string, field: 'pattern' | 'replacement', value: string) => {
    if (isLocked) return;
    setLocalReplacements(prev => prev.map(r => 
      r.id === id ? { ...r, [field]: value } : r
    ));
  };

  const handleReset = () => {
    if (isLocked) return;
    setLocalReplacements(JSON.parse(JSON.stringify(savedRegexReplacements)));
  };

  const handleSave = () => {
    if (isLocked) return;
    const validReplacements = localReplacements.filter(r => r.pattern.trim() !== '');
    setLocalReplacements(validReplacements);
    onSaveRegex(validReplacements);
  };

  const handleSyncClick = () => {
    if (isLocked) return;
    onSync();
  };

  // If syncing or locked, apply grayscale filter to content sections
  const contentClass = isLocked ? "opacity-50 pointer-events-none grayscale transition-all" : "transition-all";

  return (
    <div className="relative group" ref={dropdownRef}>
      {/* Trigger Button - Added Ring to create visual 'cutout' over panels */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800/90 border border-gray-600 hover:border-plex-orange text-gray-300 hover:text-white hover:bg-gray-700/80 transition-all shadow-2xl hover:shadow-plex-orange/30 ring-[6px] md:ring-8 ring-gray-900 backdrop-blur-sm active:scale-95"
        title={`Current Strategy: ${selectedOption.label}`}
      >
        <selectedOption.icon size={22} className={selectedOption.color} strokeWidth={2.5} />
        <div className="absolute -bottom-1 -right-1 bg-gray-900 rounded-full border border-gray-600 p-[2px] shadow-sm">
            <ChevronDown size={10} className="text-gray-400" />
        </div>
      </button>

      {/* Dropdown Menu - Persistent Mount for State Preservation */}
      <div 
        className={`absolute 
          top-14 
          /* Mobile: Open to left */
          right-0 origin-top-right
          /* Desktop: Center alignment */
          md:left-1/2 md:right-auto md:origin-top md:-translate-x-1/2 
          
          w-80 md:w-[30rem] bg-gray-800/95 border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-xl
          transition-all duration-200 ease-out
          ${isOpen ? 'opacity-100 scale-100 visible translate-y-0' : 'opacity-0 scale-95 invisible pointer-events-none -translate-y-2'}`}
      >
        <div className={contentClass}>
            {/* Section 1: Sync Strategy */}
            <div className="px-4 py-3 bg-black/20 border-b border-white/5">
            <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Sync Strategy</h3>
            <div className="space-y-1">
                {STRATEGIES.map((strategy) => (
                <div
                    key={strategy.value}
                    onClick={() => handleSelect(strategy)}
                    className={`group flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all border ${
                    currentStrategy === strategy.value 
                        ? 'bg-white/10 border-white/10 shadow-sm' 
                        : 'hover:bg-white/5 border-transparent'
                    }`}
                >
                    <div className="flex items-center space-x-3 overflow-hidden">
                    <strategy.icon size={18} className={strategy.color} />
                    <span className={`text-sm font-medium truncate ${currentStrategy === strategy.value ? 'text-white' : 'text-gray-300 group-hover:text-white'}`}>
                        {strategy.label}
                    </span>
                    </div>
                    
                    <div className="flex items-center space-x-2">
                    <div className="relative group/tooltip">
                        <HelpCircle size={14} className="text-gray-600 hover:text-gray-400 transition-colors" />
                        <div className="absolute right-0 bottom-full mb-2 w-48 p-2.5 bg-gray-900 text-xs text-gray-300 rounded-lg shadow-xl border border-gray-700 pointer-events-none opacity-0 group-hover/tooltip:opacity-100 transition-opacity z-50">
                            {strategy.description}
                        </div>
                    </div>
                    
                    {currentStrategy === strategy.value && (
                        <Check size={14} className="text-plex-orange" strokeWidth={3} />
                    )}
                    </div>
                </div>
                ))}
            </div>
            </div>

            {/* Section 2: Regex Preprocessing */}
            <div className="p-4 bg-gray-900/40">
                <div className="flex items-center justify-between mb-3">
                <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Regex Rules</h3>
                {localReplacements.length === 0 && (
                    <button 
                    onClick={handleAddRegex}
                    className="p-1 rounded bg-gray-700/50 hover:bg-gray-600 text-gray-400 hover:text-white transition-colors"
                    title="Add Rule"
                    >
                    <Plus size={14} />
                    </button>
                )}
                </div>

                <div className="space-y-2 mb-4 max-h-52 overflow-y-auto pr-1 custom-scrollbar">
                {localReplacements.length === 0 ? (
                    <div className="text-xs text-gray-600 italic text-center py-4 border border-dashed border-gray-700/50 rounded-lg">
                        No regex replacements configured.
                    </div>
                ) : (
                    localReplacements.map((regex) => (
                    <div key={regex.id} className="flex items-center space-x-2 animate-in slide-in-from-left-2 duration-200">
                        <div className="flex-1 min-w-0">
                            <input 
                                type="text" 
                                placeholder="Regex Pattern" 
                                value={regex.pattern}
                                onChange={(e) => handleUpdateRegex(regex.id, 'pattern', e.target.value)}
                                className={`w-full bg-gray-900/80 border rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:ring-1 transition-all placeholder-gray-600
                                ${!regex.pattern && isDirty ? 'border-red-500/30 focus:border-red-500' : 'border-gray-700 focus:border-plex-orange'}`}
                            />
                        </div>
                        <div className="flex-none text-gray-600">
                            <ArrowRightCircle size={12} />
                        </div>
                        <div className="flex-1 min-w-0">
                            <input 
                                type="text" 
                                placeholder="Replacement" 
                                value={regex.replacement}
                                onChange={(e) => handleUpdateRegex(regex.id, 'replacement', e.target.value)}
                                className="w-full bg-gray-900/80 border border-gray-700 rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-plex-orange focus:ring-1 focus:ring-plex-orange transition-all placeholder-gray-600"
                            />
                        </div>
                        <button 
                            onClick={() => handleDeleteRegex(regex.id)}
                            className="text-gray-600 hover:text-red-400 p-1.5 hover:bg-red-500/10 rounded transition-colors"
                            title="Delete Rule"
                        >
                            <Trash2 size={14} />
                        </button>
                    </div>
                    ))
                )}
                </div>

                {/* Actions */}
                <div className="space-y-3 pt-3 border-t border-white/5">
                {localReplacements.length > 0 && (
                    <div className="flex justify-center">
                        <button 
                            onClick={handleAddRegex}
                            className="flex items-center space-x-1.5 text-xs text-plex-orange hover:text-yellow-400 transition-colors opacity-80 hover:opacity-100"
                        >
                            <Plus size={12} />
                            <span className="font-medium">Add Rule</span>
                        </button>
                    </div>
                )}

                <div className="grid grid-cols-2 gap-3">
                    <button
                        onClick={handleReset}
                        disabled={!isDirty}
                        className={`flex items-center justify-center space-x-2 py-1.5 rounded-lg text-xs font-medium border transition-all
                        ${isDirty 
                            ? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white' 
                            : 'bg-transparent border-gray-800 text-gray-600 cursor-not-allowed'}`}
                    >
                        <RotateCcw size={14} />
                        <span>Revert</span>
                    </button>
                    <button
                        onClick={handleSave}
                        disabled={!isDirty}
                        className={`flex items-center justify-center space-x-2 py-1.5 rounded-lg text-xs font-bold border transition-all
                        ${isDirty 
                            ? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10' 
                            : 'bg-gray-800/50 border-gray-800 text-gray-600 cursor-not-allowed'}`}
                    >
                        <Save size={14} />
                        <span>Save Changes</span>
                    </button>
                </div>
                </div>
            </div>
        </div>

        {/* Section 3: Sync Now Button */}
        <div className="p-4 bg-gray-950/50 border-t border-white/5">
            <button
                onClick={handleSyncClick}
                disabled={isLocked || isDirty} // Disable if syncing OR if there are unsaved regex changes
                className={`w-full py-3 rounded-lg text-sm font-bold flex items-center justify-center gap-2 transition-all shadow-lg
                ${isLocked 
                    ? 'bg-gray-700/30 text-gray-500 cursor-not-allowed border border-gray-700/50' 
                    : isDirty 
                        ? 'bg-gray-800 text-gray-500 cursor-not-allowed border border-gray-700' // Must save rules first
                        : 'bg-green-600 hover:bg-green-500 text-white border border-green-500 shadow-green-900/20 active:scale-[0.98]'
                }`}
            >
                {isSyncing ? (
                    <>
                        <Loader2 size={16} className="animate-spin" />
                        <span>Sync in Progress...</span>
                    </>
                ) : (
                    <>
                        <Zap size={16} fill="currentColor" />
                        <span>Sync Now</span>
                    </>
                )}
            </button>
            {isDirty && (
                <p className="text-[10px] text-plex-orange text-center mt-2">
                    Please save or revert regex rules changes before syncing.
                </p>
            )}
        </div>
      </div>
    </div>
  );
};

export default StrategySelector;