import React, { useState, useRef, useEffect } from 'react';
import { SyncStrategy, ReplacementRule, PathMappingConfig, PathMappingRules, PathMappingMode, SyncState, ScheduleSettings, ScheduleMode, BackupSettings } from '../types';
import { 
  ArrowRightCircle, 
  ArrowLeftCircle, 
  GitMerge, 
  ChevronDown,
  Check,
  HelpCircle,
  Plus,
  Trash2,
  Save,
  RotateCcw,
  Zap,
  Loader2,
  Calendar,
  Clock,
  Repeat,
  Type,
  Code2,
  Link,
  Archive,
  History,
  Eye
} from 'lucide-react';
import { useLanguage } from '../LanguageContext';

// Generate a UUID for mapping rules
const generateUUID = (): string => {
  // Use crypto.randomUUID() if available (modern browsers)
  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
    return crypto.randomUUID();
  }
  // Fallback to manual UUID v4 generation
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = Math.random() * 16 | 0;
    const v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
};

interface StrategyOption {
  value: SyncStrategy;
  labelKey: string;
  descKey: string;
  icon: React.ElementType;
  color: string;
}

const STRATEGIES: StrategyOption[] = [
  {
    value: SyncStrategy.LOCAL_OVERWRITE,
    labelKey: 'strategies.localOverwrite.label',
    descKey: 'strategies.localOverwrite.desc',
    icon: ArrowRightCircle,
    color: 'text-blue-400'
  },
  {
    value: SyncStrategy.CLOUD_OVERWRITE,
    labelKey: 'strategies.cloudOverwrite.label',
    descKey: 'strategies.cloudOverwrite.desc',
    icon: ArrowLeftCircle,
    color: 'text-green-400'
  },
  {
    value: SyncStrategy.MERGE_LOCAL,
    labelKey: 'strategies.mergeLocal.label',
    descKey: 'strategies.mergeLocal.desc',
    icon: GitMerge,
    color: 'text-blue-300'
  },
  {
    value: SyncStrategy.MERGE_CLOUD,
    labelKey: 'strategies.mergeCloud.label',
    descKey: 'strategies.mergeCloud.desc',
    icon: GitMerge,
    color: 'text-green-300'
  }
];

const WEEK_DAY_INDEXES = [0, 1, 2, 3, 4, 5, 6];

// Color Theme Variables for Mapping Editors
const MAPPING_THEME = {
  // Container Themes
  local: {
    borderColor: "border-blue-500/20",
    bgColor: "bg-blue-900/10"
  },
  remote: {
    borderColor: "border-green-500/20",
    bgColor: "bg-green-900/10"
  },
  simple: {
    borderColor: "border-gray-700/50",
    bgColor: "bg-gray-900/40"
  },
  // Input Field Themes
  inputs: {
    default: "bg-gray-800 border-gray-700 text-gray-200 focus:border-plex-orange placeholder-gray-600",
    local: "bg-blue-500/10 border-blue-500/30 text-blue-100 focus:border-blue-400 placeholder-blue-300/30",
    cloud: "bg-green-500/10 border-green-500/30 text-green-100 focus:border-green-400 placeholder-green-300/30"
  }
};

// Helper to determine the actual mode and settings that would be saved based on the current UI state
const deriveEffectiveSchedule = (schedule: ScheduleSettings, tab: ScheduleMode): ScheduleSettings => {
  const derived = { ...schedule };
  
  // Unified logic: If the mode matches the tab, we keep it (Enabled).
  // If the mode doesn't match (e.g. it was DISABLED), then in the context of this tab, it remains Disabled until the user toggles the switch.
  if (derived.mode === tab) {
    derived.mode = tab;
  } else {
    derived.mode = ScheduleMode.DISABLED;
  }
  return derived;
};

// Sub-component for a single Mapping Group Editor
interface MappingGroupEditorProps {
  title: string;
  subtitle?: string;
  rules: ReplacementRule[];
  onChange: (newRules: ReplacementRule[]) => void;
  isLocked: boolean;
  borderColor?: string;
  bgColor?: string;
  // Input specific props
  leftPlaceholder?: string;
  rightPlaceholder?: string;
  leftInputClass?: string;
  rightInputClass?: string;
}

const MappingGroupEditor: React.FC<MappingGroupEditorProps> = ({ 
  title, 
  subtitle, 
  rules, 
  onChange, 
  isLocked,
  borderColor = "border-gray-700",
  bgColor = "bg-gray-900/50",
  leftPlaceholder = "Pattern",
  rightPlaceholder = "Replace",
  leftInputClass,
  rightInputClass
}) => {
  const { t } = useLanguage();
  
  const handleAdd = () => {
    if (isLocked) return;
    const newId = generateUUID();
    onChange([...rules, { id: newId, search: '', replace: '' }]);
  };

  const handleUpdate = (id: string, field: 'search' | 'replace', value: string) => {
    if (isLocked) return;
    onChange(rules.map(r => r.id === id ? { ...r, [field]: value } : r));
  };

  const handleDelete = (id: string) => {
    if (isLocked) return;
    onChange(rules.filter(r => r.id !== id));
  };

  // Default input style if not provided
  const defaultInputStyle = MAPPING_THEME.inputs.default;

  return (
    <div className={`p-3 rounded-lg border ${borderColor} ${bgColor} flex flex-col h-full transition-colors`}>
       <div className="flex items-center justify-between mb-2">
         <div>
            <h4 className="text-[10px] font-bold uppercase tracking-wider text-gray-400">{title}</h4>
            {subtitle && <p className="text-[9px] text-gray-500">{subtitle}</p>}
         </div>
         <button 
           onClick={handleAdd}
           disabled={isLocked}
           className="p-1 rounded bg-gray-700/50 hover:bg-gray-600 text-gray-400 hover:text-white transition-colors"
           title={t('common.add')}
         >
           <Plus size={12} />
         </button>
       </div>

       <div className="flex-1 space-y-2 overflow-y-auto max-h-32 custom-scrollbar pr-1">
         {rules.length === 0 ? (
           <div className="text-xs text-gray-600 italic text-center py-2 border border-dashed border-gray-700/50 rounded-lg">
             {t('mapping.noRules')}
           </div>
         ) : (
           rules.map((rule) => (
             <div key={rule.id} className="flex items-center space-x-1 animate-in slide-in-from-left-1 duration-200">
                <input 
                  type="text" 
                  placeholder={leftPlaceholder || t('mapping.pattern')}
                  value={rule.search}
                  onChange={(e) => handleUpdate(rule.id, 'search', e.target.value)}
                  className={`flex-1 min-w-0 border rounded px-1.5 py-1 text-xs focus:outline-none transition-colors ${leftInputClass || defaultInputStyle}`}
                />
                <Link size={12} className="text-gray-600 flex-none opacity-50" />
                <input 
                  type="text" 
                  placeholder={rightPlaceholder || t('mapping.replace')}
                  value={rule.replace}
                  onChange={(e) => handleUpdate(rule.id, 'replace', e.target.value)}
                  className={`flex-1 min-w-0 border rounded px-1.5 py-1 text-xs focus:outline-none transition-colors ${rightInputClass || defaultInputStyle}`}
                />
                <button 
                  onClick={() => handleDelete(rule.id)}
                  className="text-gray-600 hover:text-red-400 p-1 rounded hover:bg-red-500/10 transition-colors flex-none"
                >
                  <Trash2 size={12} />
                </button>
             </div>
           ))
         )}
       </div>
    </div>
  );
};

interface StrategySelectorProps {
  currentStrategy: SyncStrategy;
  onSelect: (strategy: SyncStrategy, label: string) => void;
  savedPathMapping: PathMappingConfig;
  onSavePathMapping: (config: PathMappingConfig) => void;
  savedBackup: BackupSettings;
  onSaveBackup: (settings: BackupSettings) => void;
  savedSchedule: ScheduleSettings;
  onSaveSchedule: (settings: ScheduleSettings) => Promise<boolean>;
  syncState: SyncState;
  onSync: () => void;
}

const StrategySelector: React.FC<StrategySelectorProps> = ({ 
  currentStrategy, 
  onSelect, 
  savedPathMapping, 
  onSavePathMapping,
  savedBackup,
  onSaveBackup,
  savedSchedule,
  onSaveSchedule,
  syncState,
  onSync
}) => {
  const { t } = useLanguage();
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Local state for path mapping editing (stores all lists for both modes)
  const [localPathMapping, setLocalPathMapping] = useState<PathMappingConfig>(savedPathMapping);
  const [isMappingDirty, setIsMappingDirty] = useState(false);

  // Local state for Backup Settings
  const [localBackup, setLocalBackup] = useState<BackupSettings>(savedBackup);
  const [isBackupDirty, setIsBackupDirty] = useState(false);

  // Local state for Schedule editing
  const [localSchedule, setLocalSchedule] = useState<ScheduleSettings>(savedSchedule);
  const [isScheduleDirty, setIsScheduleDirty] = useState(false);
  
  // UI State for Schedule Tabs
  const [activeScheduleTab, setActiveScheduleTab] = useState<ScheduleMode>(
    savedSchedule.mode === ScheduleMode.DISABLED ? ScheduleMode.CRON : savedSchedule.mode
  );

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

  // Initialize local state when prop updates
  useEffect(() => {
    setLocalPathMapping(JSON.parse(JSON.stringify(savedPathMapping)));
    setIsMappingDirty(false);
  }, [savedPathMapping]);

  useEffect(() => {
    setLocalBackup(JSON.parse(JSON.stringify(savedBackup)));
    setIsBackupDirty(false);
  }, [savedBackup]);

  useEffect(() => {
    setLocalSchedule(JSON.parse(JSON.stringify(savedSchedule)));
    if (savedSchedule.mode !== ScheduleMode.DISABLED) {
      setActiveScheduleTab(savedSchedule.mode);
    }
    setIsScheduleDirty(false);
  }, [savedSchedule]);

  // Check dirty state whenever local mapping changes
  useEffect(() => {
    const isDifferent = JSON.stringify(localPathMapping) !== JSON.stringify(savedPathMapping);
    setIsMappingDirty(isDifferent);
  }, [localPathMapping, savedPathMapping]);

  // Check dirty state for backup
  useEffect(() => {
    const isDifferent = JSON.stringify(localBackup) !== JSON.stringify(savedBackup);
    setIsBackupDirty(isDifferent);
  }, [localBackup, savedBackup]);

  // Check dirty state for Schedule (including Active Tab changes)
  useEffect(() => {
    const effectiveLocal = deriveEffectiveSchedule(localSchedule, activeScheduleTab);
    const isDifferent = JSON.stringify(effectiveLocal) !== JSON.stringify(savedSchedule);
    setIsScheduleDirty(isDifferent);
  }, [localSchedule, savedSchedule, activeScheduleTab]);

  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 isScheduleActionable = isScheduleDirty || (activeScheduleTab !== (savedSchedule.mode === ScheduleMode.DISABLED ? ScheduleMode.CRON : savedSchedule.mode));

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

  // --- Path Mapping Handlers ---
  const currentMappingMode = localPathMapping.mode;
  
  const updateRegexGroup = (section: keyof PathMappingRules, newRules: ReplacementRule[]) => {
    if (isLocked) return;
    setLocalPathMapping(prev => ({
      ...prev,
      regex: {
        ...prev.regex,
        [section]: newRules
      }
    }));
  };

  const updateSimpleGroup = (newRules: ReplacementRule[]) => {
    if (isLocked) return;
    setLocalPathMapping(prev => ({
      ...prev,
      simple: newRules
    }));
  };

  const setMappingMode = (mode: PathMappingMode) => {
    if (isLocked) return;
    setLocalPathMapping(prev => ({ ...prev, mode }));
  };

  const handleResetMapping = () => {
    if (isLocked) return;
    setLocalPathMapping(JSON.parse(JSON.stringify(savedPathMapping)));
  };

  const handleSaveMappingClick = () => {
    if (isLocked) return;
    const clean = (rules: ReplacementRule[]) => rules.filter(r => r.search.trim() !== '');
    
    // Clean regex rules
    const cleanRegex = (rules: PathMappingRules): PathMappingRules => ({
      localPre: clean(rules.localPre),
      localPost: clean(rules.localPost),
      remotePre: clean(rules.remotePre),
      remotePost: clean(rules.remotePost),
    });

    const cleanedConfig: PathMappingConfig = {
      mode: localPathMapping.mode,
      simple: clean(localPathMapping.simple),
      regex: cleanRegex(localPathMapping.regex),
    };

    setLocalPathMapping(cleanedConfig);
    onSavePathMapping(cleanedConfig);
  };

  const regexRules = localPathMapping.regex;
  const simpleRules = localPathMapping.simple;

  // --- Backup Handlers ---
  const handleUpdateBackup = (field: keyof BackupSettings, value: any) => {
    if (isLocked) return;
    setLocalBackup(prev => ({ ...prev, [field]: value }));
  };

  const handleResetBackup = () => {
    if (isLocked) return;
    setLocalBackup(JSON.parse(JSON.stringify(savedBackup)));
  };

  const handleSaveBackupClick = () => {
    if (isLocked) return;
    onSaveBackup(localBackup);
  };

  // --- Schedule Handlers ---
  const handleUpdateSchedule = (field: keyof ScheduleSettings, value: any) => {
    if (isLocked) return;
    setLocalSchedule(prev => ({ ...prev, [field]: value }));
  };

  const toggleWeekDay = (dayIndex: number) => {
    if (isLocked) return;
    const currentDays = localSchedule.weeklyDays;
    const newDays = currentDays.includes(dayIndex)
      ? currentDays.filter(d => d !== dayIndex)
      : [...currentDays, dayIndex].sort();
    handleUpdateSchedule('weeklyDays', newDays);
  };

  const handleResetSchedule = () => {
    if (isLocked) return;
    setLocalSchedule(JSON.parse(JSON.stringify(savedSchedule)));
    if (savedSchedule.mode !== ScheduleMode.DISABLED) {
      setActiveScheduleTab(savedSchedule.mode);
    } else {
      setActiveScheduleTab(ScheduleMode.CRON);
    }
  };

  const handleSaveScheduleClick = async () => {
    if (isLocked) return;
    const settingsToSave = deriveEffectiveSchedule(localSchedule, activeScheduleTab);
    const success = await onSaveSchedule(settingsToSave);
    if (success) {
      setLocalSchedule(settingsToSave);
    }
  };

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

  const toggleScheduleEnable = (targetMode: ScheduleMode) => {
      if (isLocked) return;
      if (localSchedule.mode === targetMode) {
          handleUpdateSchedule('mode', ScheduleMode.DISABLED);
      } else {
          handleUpdateSchedule('mode', targetMode);
      }
  };

  const contentClass = isLocked ? "opacity-50 pointer-events-none grayscale transition-all" : "transition-all";

  return (
    <div className="relative group" ref={dropdownRef}>
      {/* Trigger Button */}
      <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={`${t('strategies.title')}: ${t(selectedOption.labelKey)}`}
      >
        <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 */}
      <div 
        className={`absolute 
          top-14 
          /* Mobile: Open to left (max width of screen) */
          right-0 w-[90vw] max-w-[90vw] origin-top-right
          
          /* Desktop: Center alignment, wider */
          md:left-1/2 md:right-auto md:origin-top md:-translate-x-1/2 md:w-[60rem] md:max-w-[60rem]
          
          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={`flex flex-col max-h-[75vh] md:max-h-[85vh] overflow-y-auto custom-scrollbar ${contentClass}`}>
            
            {/* Section 1: Sync Strategy */}
            <div className="px-4 py-3 bg-black/20 border-b border-white/5 flex-none">
            <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">{t('strategies.title')}</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'}`}>
                      {t(strategy.labelKey)}
                    </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">
                          {t(strategy.descKey)}
                        </div>
                    </div>
                    
                    {currentStrategy === strategy.value && (
                        <Check size={14} className="text-plex-orange" strokeWidth={3} />
                    )}
                    </div>
                </div>
                ))}
            </div>
            </div>

            {/* Section 1.5: Backup Retention */}
            <div className="px-4 py-3 bg-gray-900/40 border-b border-white/5 flex-none">
              <div className="flex items-center justify-between mb-3">
                <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{t('backup.title')}</h3>
              </div>
              
              <div className="flex flex-col space-y-3">
                 <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                       <div className="p-1.5 rounded-lg bg-indigo-500/10 border border-indigo-500/20 text-indigo-400">
                          <Archive size={16} />
                       </div>
                       <div className="flex flex-col">
                          <span className="text-sm font-medium text-gray-200">{t('backup.enable')}</span>
                          <span className="text-[10px] text-gray-500">{t('backup.enableDesc')}</span>
                       </div>
                    </div>

                    <button 
                      onClick={() => handleUpdateBackup('enabled', !localBackup.enabled)}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localBackup.enabled ? 'bg-plex-orange' : 'bg-gray-700'}`}
                    >
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localBackup.enabled ? 'translate-x-6' : 'translate-x-1'}`} />
                    </button>
                 </div>
                 
                 {/* Expanded Config */}
                 <div className={`overflow-hidden transition-all duration-300 ${localBackup.enabled ? 'max-h-20 opacity-100' : 'max-h-0 opacity-50'}`}>
                    <div className="flex items-center justify-between p-2.5 rounded-lg bg-black/20 border border-white/5">
                        <div className="flex items-center space-x-2">
                           <History size={14} className="text-gray-500" />
                          <span className="text-xs text-gray-400">{t('backup.maxVersions')}</span>
                        </div>
                        <div className="flex items-center space-x-2">
                            <input 
                               type="number" 
                               min="0" 
                               max="100" 
                               value={localBackup.retentionCount}
                               onChange={(e) => {
                                 const value = parseInt(e.target.value, 10);
                                 handleUpdateBackup('retentionCount', isNaN(value) ? 0 : Math.max(0, value));
                               }}
                               className="w-16 bg-gray-800 border border-gray-700 text-center text-sm rounded py-1 text-white focus:border-plex-orange focus:outline-none"
                            />
                            <span className="text-[10px] text-gray-600 italic">{localBackup.retentionCount === 0 ? t('backup.noAutoDelete') : t('backup.autoDelete')}</span>
                        </div>
                    </div>
                 </div>

                 <div className="flex justify-end items-center gap-2 pt-1">
                    <button
                        onClick={handleResetBackup}
                        disabled={!isBackupDirty}
                        className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
                        ${isBackupDirty 
                            ? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white' 
                            : 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
                    >
                        <RotateCcw size={12} />
                        <span>{t('common.revert')}</span>
                    </button>
                    <button
                        onClick={handleSaveBackupClick}
                        disabled={!isBackupDirty}
                        className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
                        ${isBackupDirty 
                            ? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10' 
                            : 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
                    >
                        <Save size={12} />
                        <span>{t('common.save')}</span>
                    </button>
                 </div>
              </div>
            </div>

            {/* Section 2: Path Mapping (Tabs + Grid) */}
            <div className="p-4 bg-gray-900/40 border-b border-white/5 flex-none">
                <div className="flex items-center justify-between mb-3">
                <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{t('mapping.title')}</h3>
                </div>

                {/* Tabs for Path Mapping Mode */}
                <div className="flex space-x-1 bg-black/30 p-1 rounded-lg mb-4">
                  {[
                    { id: PathMappingMode.SIMPLE, label: t('mapping.simple'), icon: Type },
                    { id: PathMappingMode.REGEX, label: t('mapping.regex'), icon: Code2 },
                  ].map((tab) => (
                    <button
                      key={tab.id}
                      onClick={() => setMappingMode(tab.id)}
                      className={`flex-1 flex items-center justify-center space-x-2 py-1.5 rounded-md text-xs font-medium transition-all
                        ${currentMappingMode === tab.id 
                          ? 'bg-gray-700 text-plex-orange shadow-sm' 
                          : 'text-gray-400 hover:text-gray-200 hover:bg-white/5'
                        }`}
                    >
                      <tab.icon size={12} />
                      <span>{tab.label}</span>
                    </button>
                  ))}
                </div>

                {/* Content Area */}
                <div className="mb-4">
                    {currentMappingMode === PathMappingMode.SIMPLE ? (
                       // Simple Mode: Single Editor
                       <div className="animate-in fade-in duration-200">
                          <MappingGroupEditor 
                              title={t('mapping.simpleTitle')}
                              subtitle={t('mapping.simpleSubtitle')}
                             rules={simpleRules}
                             onChange={updateSimpleGroup}
                             isLocked={isLocked}
                             borderColor={MAPPING_THEME.simple.borderColor}
                             bgColor={MAPPING_THEME.simple.bgColor}
                              leftPlaceholder={t('mapping.localPath')}
                              rightPlaceholder={t('mapping.cloudPath')}
                             leftInputClass={MAPPING_THEME.inputs.local}
                             rightInputClass={MAPPING_THEME.inputs.cloud}
                          />
                       </div>
                    ) : (
                       // Regex Mode: 2x2 Grid
                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-in fade-in duration-200">
                          {/* Row 1: Pre-Processing */}
                          <MappingGroupEditor 
                              title={t('server.local')}
                              subtitle={t('mapping.regexPre')}
                             rules={regexRules.localPre}
                             onChange={(rules) => updateRegexGroup('localPre', rules)}
                             isLocked={isLocked}
                             borderColor={MAPPING_THEME.local.borderColor}
                             bgColor={MAPPING_THEME.local.bgColor}
                          />

                          <MappingGroupEditor 
                              title={t('server.cloud')}
                              subtitle={t('mapping.regexPre')}
                             rules={regexRules.remotePre}
                             onChange={(rules) => updateRegexGroup('remotePre', rules)}
                             isLocked={isLocked}
                             borderColor={MAPPING_THEME.remote.borderColor}
                             bgColor={MAPPING_THEME.remote.bgColor}
                          />

                          {/* Row 2: Post-Processing */}
                          <MappingGroupEditor 
                              title={t('server.local')}
                              subtitle={t('mapping.regexPost')}
                             rules={regexRules.localPost}
                             onChange={(rules) => updateRegexGroup('localPost', rules)}
                             isLocked={isLocked}
                             borderColor={MAPPING_THEME.local.borderColor}
                             bgColor={MAPPING_THEME.local.bgColor}
                          />

                          <MappingGroupEditor 
                              title={t('server.cloud')}
                              subtitle={t('mapping.regexPost')}
                             rules={regexRules.remotePost}
                             onChange={(rules) => updateRegexGroup('remotePost', rules)}
                             isLocked={isLocked}
                             borderColor={MAPPING_THEME.remote.borderColor}
                             bgColor={MAPPING_THEME.remote.bgColor}
                          />
                       </div>
                    )}
                </div>

                <div className="flex justify-end items-center gap-2">
                    <button
                        onClick={handleResetMapping}
                        disabled={!isMappingDirty}
                        className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
                        ${isMappingDirty 
                            ? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white' 
                            : 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
                    >
                        <RotateCcw size={12} />
                        <span>{t('common.revert')}</span>
                    </button>
                    <button
                        onClick={handleSaveMappingClick}
                        disabled={!isMappingDirty}
                        className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
                        ${isMappingDirty 
                            ? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10' 
                            : 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
                    >
                        <Save size={12} />
                        <span>{t('mapping.saveRules')}</span>
                    </button>
                </div>
            </div>

            {/* Section 3: Scheduled Tasks */}
            <div className="p-4 bg-gray-900/40 border-b border-white/5 flex-none">
                 <div className="flex items-center justify-between mb-3">
                  <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{t('schedule.title')}</h3>
                 </div>

                 <div className="flex space-x-1 bg-black/30 p-1 rounded-lg mb-4">
                   {[
                      { id: ScheduleMode.CRON, label: t('schedule.cron'), icon: Repeat },
                      { id: ScheduleMode.DAILY, label: t('schedule.daily'), icon: Clock },
                      { id: ScheduleMode.WEEKLY, label: t('schedule.weekly'), icon: Calendar },
                    ].map((tab) => (
                      <button
                        key={tab.id}
                        onClick={() => setActiveScheduleTab(tab.id)}
                        className={`flex-1 flex items-center justify-center space-x-2 py-1.5 rounded-md text-xs font-medium transition-all
                          ${activeScheduleTab === tab.id 
                            ? 'bg-gray-700 text-plex-orange shadow-sm' 
                            : 'text-gray-400 hover:text-gray-200 hover:bg-white/5'
                          }`}
                      >
                         <tab.icon size={12} />
                         <span>{tab.label}</span>
                      </button>
                    ))}
                 </div>

                 {/* Tab Content */}
                 <div className="mb-4 min-h-[50px]">
                    {activeScheduleTab === ScheduleMode.CRON && (
                      <div className="flex flex-col animate-in fade-in duration-200">
                         {/* Top Row: Label + Switch */}
                         <div className="flex items-center justify-between mb-3 px-1">
                           <span className="text-xs text-gray-400 font-medium">{t('schedule.enableCron')}</span>
                           <button 
                               onClick={() => toggleScheduleEnable(ScheduleMode.CRON)}
                               className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.mode === ScheduleMode.CRON ? 'bg-plex-orange' : 'bg-gray-700'}`}
                           >
                               <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSchedule.mode === ScheduleMode.CRON ? 'translate-x-6' : 'translate-x-1'}`} />
                           </button>
                         </div>

                         {/* Content */}
                         <div className={`space-y-2 transition-opacity duration-200 ${localSchedule.mode !== ScheduleMode.CRON ? 'opacity-50 pointer-events-none' : ''}`}>
                             <div className="flex items-center space-x-2">
                               <span className="text-gray-500 font-mono text-xs">Cron:</span>
                               <input 
                                 type="text" 
                                 value={localSchedule.cronExpression}
                                 onChange={(e) => handleUpdateSchedule('cronExpression', e.target.value)}
                                 placeholder="0 0 * * *"
                                 disabled={localSchedule.mode !== ScheduleMode.CRON}
                                 className="flex-1 bg-gray-800 border border-gray-700 rounded-md px-2.5 py-1.5 text-xs text-gray-200 font-mono focus:border-plex-orange focus:outline-none focus:ring-1 focus:ring-plex-orange placeholder-gray-600"
                               />
                             </div>
                             <p className="text-[10px] text-gray-500">
                               Unix-cron format.
                             </p>
                         </div>
                      </div>
                    )}

                    {activeScheduleTab === ScheduleMode.DAILY && (
                       <div className="flex flex-col animate-in fade-in duration-200">
                          {/* Top Row: Label + Switch */}
                          <div className="flex items-center justify-between mb-3 px-1">
                            <span className="text-xs text-gray-400 font-medium">{t('schedule.enableDaily')}</span>
                            <button 
                                onClick={() => toggleScheduleEnable(ScheduleMode.DAILY)}
                                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.mode === ScheduleMode.DAILY ? 'bg-plex-orange' : 'bg-gray-700'}`}
                            >
                                <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSchedule.mode === ScheduleMode.DAILY ? 'translate-x-6' : 'translate-x-1'}`} />
                            </button>
                          </div>
                          
                          {/* Bottom Row: Centered Native Time Input */}
                          <div className="flex justify-center mt-2">
                            <input
                              type="time"
                              value={localSchedule.dailyTime}
                              onChange={(e) => handleUpdateSchedule('dailyTime', e.target.value)}
                              disabled={localSchedule.mode !== ScheduleMode.DAILY}
                              className={`bg-gray-800 border border-gray-700 text-white rounded-md px-4 py-2 text-xl font-mono focus:border-plex-orange focus:ring-1 focus:ring-plex-orange focus:outline-none transition-all ${localSchedule.mode !== ScheduleMode.DAILY ? 'opacity-50 cursor-not-allowed' : ''}`}
                            />
                          </div>
                       </div>
                    )}

                    {activeScheduleTab === ScheduleMode.WEEKLY && (
                       <div className="flex flex-col animate-in fade-in duration-200">
                          {/* Top Row: Label + Switch */}
                          <div className="flex items-center justify-between mb-3 px-1">
                            <span className="text-xs text-gray-400 font-medium">{t('schedule.enableWeekly')}</span>
                            <button 
                                onClick={() => toggleScheduleEnable(ScheduleMode.WEEKLY)}
                                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.mode === ScheduleMode.WEEKLY ? 'bg-plex-orange' : 'bg-gray-700'}`}
                            >
                                <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSchedule.mode === ScheduleMode.WEEKLY ? 'translate-x-6' : 'translate-x-1'}`} />
                            </button>
                          </div>

                          {/* Middle Row: Full Width Capsules */}
                          <div className={`grid grid-cols-7 w-full transition-opacity duration-200 mb-3 ${localSchedule.mode !== ScheduleMode.WEEKLY ? 'opacity-50 pointer-events-none' : ''}`}>
                             {WEEK_DAY_INDEXES.map((dayIndex) => {
                               const isSelected = localSchedule.weeklyDays.includes(dayIndex);
                               return (
                                 <button
                                   key={dayIndex}
                                   onClick={() => toggleWeekDay(dayIndex)}
                                   className={`h-9 text-xs font-bold border-y border-l last:border-r border-gray-600/50 transition-colors
                                     first:rounded-l-lg last:rounded-r-lg
                                     ${isSelected 
                                       ? 'bg-plex-orange text-gray-900 border-plex-orange z-10' 
                                       : 'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200'
                                     }
                                   `}
                                 >
                                   {t(`schedule.weekdaysNarrow.${dayIndex}`)}
                                 </button>
                               )
                             })}
                          </div>
                          
                          {/* Bottom Row: Centered Native Time Input */}
                          <div className="flex justify-center mt-1">
                             <input
                              type="time"
                              value={localSchedule.weeklyTime}
                              onChange={(e) => handleUpdateSchedule('weeklyTime', e.target.value)}
                              disabled={localSchedule.mode !== ScheduleMode.WEEKLY}
                              className={`bg-gray-800 border border-gray-700 text-white rounded-md px-4 py-2 text-xl font-mono focus:border-plex-orange focus:ring-1 focus:ring-plex-orange focus:outline-none transition-all ${localSchedule.mode !== ScheduleMode.WEEKLY ? 'opacity-50 cursor-not-allowed' : ''}`}
                            />
                          </div>
                       </div>
                    )}
                 </div>

                 {/* Auto Watch Switch */}
                 <div className="flex items-center justify-between mb-4 mt-2 px-1">
                    <div className="flex items-center space-x-2">
                        <div className="p-1.5 rounded-lg bg-orange-500/10 border border-orange-500/20 text-orange-400">
                             <Eye size={16} />
                        </div>
                        <div className="flex flex-col">
                             <span className="text-sm font-medium text-gray-200">{t('schedule.watchLocal')}</span>
                             <span className="text-[10px] text-gray-500">{t('schedule.watchDesc')}</span>
                        </div>
                    </div>
                    <button 
                        onClick={() => handleUpdateSchedule('autoWatch', !localSchedule.autoWatch)}
                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.autoWatch ? 'bg-plex-orange' : 'bg-gray-700'}`}
                    >
                        <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSchedule.autoWatch ? 'translate-x-6' : 'translate-x-1'}`} />
                    </button>
                 </div>

                 {/* Action Buttons */}
                 <div className="flex items-center gap-2 justify-end pt-3 border-t border-white/5">
                        <button
                            onClick={handleResetSchedule}
                            disabled={!isScheduleActionable}
                            className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
                            ${isScheduleActionable 
                                ? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white' 
                                : 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
                        >
                            <RotateCcw size={12} />
                            <span>{t('common.revert')}</span>
                        </button>
                        <button
                            onClick={handleSaveScheduleClick}
                            disabled={!isScheduleActionable}
                            className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
                            ${isScheduleActionable 
                                ? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10' 
                                : 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
                        >
                            <Save size={12} />
                            <span>{t('common.save')}</span>
                        </button>
                    </div>
            </div>
        </div>

        {/* Section 4: Sync Now Button */}
        <div className="p-4 bg-gray-950/50 border-t border-white/5 flex-none">
            <button
                onClick={handleSyncClick}
                disabled={isLocked}
                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' 
                    : isMappingDirty || isBackupDirty
                        ? 'bg-gray-800 text-gray-500 cursor-not-allowed border border-gray-700'
                        : '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>{t('strategies.syncing')}</span>
                    </>
                ) : (
                    <>
                        <Zap size={16} fill="currentColor" />
                        <span>{t('strategies.syncNow')}</span>
                    </>
                )}
            </button>
            {(isMappingDirty || isBackupDirty) && (
                <p className="text-[10px] text-plex-orange text-center mt-2">
                    {t('strategies.saveWarning')}
                </p>
            )}
        </div>
      </div>
    </div>
  );
};

export default StrategySelector;