import { useState, useEffect, useCallback } from 'react'

import {
  ChevronRight,
  ChevronLeft,
  Zap,
  Smartphone,
  User,
  Image,
  Brackets,
  ShieldCheck,
  Activity,
  Check,
  Clock,
  Plus,
  Trash2,
  Mail,
  Globe,
  Package,
  LayoutGrid,
  CreditCard,
  Ban,
  Search,
  AlertTriangle,
  CheckCircle2,
  AlertCircle,
  X,
  Pencil,
  Copy
} from 'lucide-react'

import { Badge } from './components/ui/badge'
import { Switch } from './components/ui/switch'
import { Tabs, TabsList, TabsTrigger, TabsContent } from './components/ui/tabs'
import { Label } from './components/ui/label'
import { Separator } from './components/ui/separator'
import { toast } from "sonner"
import { cn } from "@/lib/utils"
import { AnimatePresence, motion } from 'framer-motion'
import { MultiSelectTagify } from './components/ui/multi-select-tagify'
import { SearchableSelect } from './components/ui/searchable-select'
import { PersonalizationDialog } from './components/ui/personalization-dialog'
import { WhatsAppRuleConfig } from './components/ui/whatsapp-rule-config'
import {
  SettingsLayout,
  SettingsHeader,
  AdminButton,
  SuccessButton,
  SecondaryButton,
  GhostButton,
  SectionHeader,
  SettingInput,
  MethodButton,
  SaveWithStatus
} from './components/ui/settings-ui';

import type { DashboardData, NotificationRule, NotificationsConfig } from './types'

// Custom WAWP Sidebar Logo Component
const WAWPLogo = ({ className, size = 24 }: { className?: string; size?: number }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 36 36" fill="none" className={className}>
    <rect width="36" height="36" rx="12" fill="#44FF87" />
    <path d="M26 7.5C26 6.94772 25.5523 6.5 25 6.5H23C22.4477 6.5 22 6.94772 22 7.5V9.5C22 10.0523 22.4477 10.5 23 10.5H25C25.5523 10.5 26 10.0523 26 9.5V7.5Z" fill="#004349" />
    <path d="M10 7.5C10 6.94772 10.4477 6.5 11 6.5H13C13.5523 6.5 14 6.94772 14 7.5V9.5C14 10.0523 13.5523 10.5 13 10.5H11C10.4477 10.5 10 10.0523 10 9.5V7.5Z" fill="#004349" />
    <path d="M6 13.5C6 11.2909 7.79086 9.5 10 9.5H26C28.2091 9.5 30 11.2909 30 13.5V23.5C30 25.7091 28.2091 27.5 26 27.5H10C7.79086 27.5 6 25.7091 6 23.5V13.5Z" fill="#004349" />
    <rect x="8" y="11.5" width="20" height="14" rx="2" fill="white" />
    <rect x="20" y="15.5" width="4" height="6" rx="1" fill="#004349" />
    <path d="M18 30.5C20 30.5 23 27.5 23 27.5H13C13 27.5 16 30.5 18 30.5Z" fill="#004349" />
    <rect x="12" y="15.5" width="4" height="6" rx="1" fill="#004349" />
  </svg>
);


export default function NotificationsBuilder({ data: dashboardData }: { data: DashboardData }) {


  const [data, setData] = useState<NotificationsConfig | null>(null);
  const [localSettings, setLocalSettings] = useState<NotificationsConfig['settings'] | null>(null)
  const [activeLang, setActiveLang] = useState<string>('')
  const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
  const [editingRule, setEditingRule] = useState<{ lang: string; rule: NotificationRule; index: number } | null>(null)
  const [currentStep, setCurrentStep] = useState(1)
  const [isSheetOpen, setIsSheetOpen] = useState(false)
  const [isAddLangOpen, setIsAddLangOpen] = useState(false)
  const [searchLang, setSearchLang] = useState('')
  const [testAdminId, setTestAdminId] = useState<string>('');
  const [isTesting, setIsTesting] = useState(false);
  const [testLog, setTestLog] = useState<{ status: 'success' | 'error', message: string } | null>(null);
  const [productSearchResults, setProductSearchResults] = useState<{ id: string | number, text: string }[]>([]);
  const [categorySearchResults, setCategorySearchResults] = useState<{ id: string | number, text: string }[]>([]);
  const [visitedSteps, setVisitedSteps] = useState<Set<number>>(new Set([1]))
  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set())
  const [personalizationOpen, setPersonalizationOpen] = useState(false);
  const [personalizationTarget, setPersonalizationTarget] = useState({ id: '', field: '' as keyof NotificationRule });

  // Use data from props if available
  useEffect(() => {
    if (dashboardData?.notificationsData) {
      const nData = dashboardData.notificationsData;

      Promise.resolve().then((): void => {
        setData({ ...nData, isMultiLangActive: true, isPro: true });
        setLocalSettings(JSON.parse(JSON.stringify(nData.settings)));
        setActiveLang(nData.settings.main_language_code || Object.keys(nData.settings.configured_languages)[0]);
        setHasUnsavedChanges(false);
        if (nData.initial_products) setProductSearchResults(nData.initial_products);
        if (nData.initial_categories) setCategorySearchResults(nData.initial_categories);
      });
    }
  }, [dashboardData]);

  // Track visited steps
  useEffect(() => {
    if (editingRule) {
      const timer = setTimeout(() => {
        setVisitedSteps(prev => new Set([...prev, currentStep]))
      }, 0);
      return () => clearTimeout(timer);
    }
  }, [currentStep, editingRule])

  // Simple completion logic for each step
  useEffect(() => {
    if (!editingRule) return;
    const timer = setTimeout(() => {
      const rule = editingRule.rule;
      const completed = new Set<number>();

      // Step 1: Trigger & Timing
      if (rule.trigger_key) completed.add(1);

      // Step 2: Recipients (At least one channel enabled)
      if (rule.whatsapp_enabled || rule.email_enabled || rule.admin_whatsapp_enabled || rule.admin_email_enabled) completed.add(2);

      // Step 3: Media (Always considered "complete" if user has seen it, but we can check if image source is set)
      if (rule.image_source_type) completed.add(3);

      // Step 4: Message
      if ((rule.whatsapp_enabled && rule.whatsapp_message) || (rule.email_enabled && rule.email_body)) completed.add(4);

      // Step 5: Filters (Optional, so we mark as complete if user visited)
      if (visitedSteps.has(5)) completed.add(5);

      // Step 6: Simulator (Complete if visited)
      if (visitedSteps.has(6)) completed.add(6);

      setCompletedSteps(completed);
    }, 0);
    return () => clearTimeout(timer);
  }, [editingRule, visitedSteps])

  const searchProducts = async (q: string) => {
    if (!q || q.length < 1) {
      if (data?.initial_products) setProductSearchResults(data.initial_products);
      return;
    }
    if (q.length < 2) return;
    try {
      const resp = await fetch(`${dashboardData.global?.apiRestUrl}/entities/search?entity_type=product&q=${encodeURIComponent(q)}`, {
        headers: { 'X-WP-Nonce': dashboardData.global?.wpRestNonce || '' }
      });
      const res = await resp.json();
      if (res.results) setProductSearchResults(res.results);
    } catch {
      // Silently fail search
    }
  };

  const searchCategories = async (q: string) => {
    if (!q || q.length < 1) {
      if (data?.initial_categories) setCategorySearchResults(data.initial_categories);
      return;
    }
    if (q.length < 2) return;
    try {
      const resp = await fetch(`${dashboardData.global?.apiRestUrl}/entities/search?entity_type=category&q=${encodeURIComponent(q)}`, {
        headers: { 'X-WP-Nonce': dashboardData.global?.wpRestNonce || '' }
      });
      const res = await resp.json();
      if (res.results) setCategorySearchResults(res.results);
    } catch {
      // Silently fail search
    }
  };

  const insertAtCursor = (id: string, text: string, field: keyof NotificationRule) => {
    if (!editingRule) return;
    const el = document.getElementById(id) as HTMLTextAreaElement | HTMLInputElement;
    if (el) {
      const s = el.selectionStart || 0;
      const e = el.selectionEnd || 0;
      const val = String((editingRule.rule as unknown as Record<string, unknown>)[field as string] || '');
      const next = val.substring(0, s) + text + val.substring(e);
      setEditingRule({ ...editingRule, rule: { ...editingRule.rule, [field]: next } });

      setTimeout(() => {
        el.focus();
        el.setSelectionRange(s + text.length, s + text.length);
      }, 50);
    } else {
      const val = String((editingRule.rule as unknown as Record<string, unknown>)[field as string] || '');
      setEditingRule({ ...editingRule, rule: { ...editingRule.rule, [field]: val + text } });
    }
  };
  const onKeyDownWhatsApp = (e: React.KeyboardEvent<HTMLTextAreaElement>, field: keyof NotificationRule) => {
    if (!editingRule) return;
    if (e.key === 'Enter') {
      const el = e.currentTarget;
      const val = el.value;
      const start = el.selectionStart;
      const lineStart = val.lastIndexOf('\n', start - 1) + 1;
      const currentLine = val.substring(lineStart, start);

      const bulletMatch = currentLine.match(/^(\* | - |> )/);
      const numberMatch = currentLine.match(/^(\d+)\. /);

      if (bulletMatch || numberMatch) {
        const prefix = bulletMatch ? bulletMatch[0] : `${parseInt(numberMatch![1]) + 1}. `;

        if (currentLine.trim() === prefix.trim().replace(/\d+/, '').replace('.', '')) {
          // Exit list
          e.preventDefault();
          const nextVal = val.substring(0, lineStart) + val.substring(start);
          setEditingRule({ ...editingRule, rule: { ...editingRule.rule, [field]: nextVal } });
        } else {
          e.preventDefault();
          const nextVal = val.substring(0, start) + '\n' + prefix + val.substring(start);
          setEditingRule({ ...editingRule, rule: { ...editingRule.rule, [field]: nextVal } });
          setTimeout(() => {
            el.setSelectionRange(start + 1 + prefix.length, start + 1 + prefix.length);
          }, 50);
        }
      }
    }
  }

  const performSave = useCallback(async (settingsToSave: NotificationsConfig['settings'], silent = false) => {
    setSaveStatus('saving');
    try {
      const response = await fetch(dashboardData.global?.settingsRestUrl || '', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': dashboardData.global?.wpRestNonce || ''
        },
        body: JSON.stringify({
          settings: {
            wawp_notifications: settingsToSave
          }
        })
      });

      const result = await response.json();
      if (result.success) {
        setSaveStatus('saved');
        window.dispatchEvent(new CustomEvent('wawp-refresh-data'));
        setHasUnsavedChanges(false);
        const clonedSettings = JSON.parse(JSON.stringify(settingsToSave));
        setData(prev => prev ? { ...prev, settings: clonedSettings } : null);
        setLocalSettings(clonedSettings);
        setTimeout(() => setSaveStatus('idle'), 3000);
        return true;
      } else {
        throw new Error(result.message || "Failed to save");
      }
    } catch (error) {
      setSaveStatus('error');
      if (!silent) toast.error("Save failed: " + (error as Error).message);
      return false;
    }
  }, [dashboardData.global]);

  // Before unload warning
  useEffect(() => {
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      if (hasUnsavedChanges) {
        e.preventDefault();
        e.returnValue = '';
      }
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [hasUnsavedChanges]);

  // Initial data check removed since it's handled by the new useEffect above

  // Debounced Auto-save
  useEffect(() => {
    if (!hasUnsavedChanges || isSheetOpen) return;
    const timer = setTimeout(() => {
      performSave(localSettings!, true);
    }, 2000);
    return () => clearTimeout(timer);
  }, [localSettings, hasUnsavedChanges, isSheetOpen, performSave]);


  const t = useCallback((key: string, def: string): string => {
    const val = (dashboardData.i18n as Record<string, unknown>)?.[key] || (window.wawpDashboardData?.i18n as Record<string, unknown>)?.[key] || def;
    return typeof val === 'string' ? val : def;
  }, [dashboardData.i18n]);

  const handleToggleRule = useCallback((lang: string, indexInOriginal: number) => {
    setLocalSettings(prev => {
      if (!prev) return prev;
      const nextSettings = { ...prev };
      nextSettings.configured_languages[lang].notifications[indexInOriginal].enabled = !nextSettings.configured_languages[lang].notifications[indexInOriginal].enabled;
      return nextSettings;
    });
    setHasUnsavedChanges(true);
  }, []);

  const handleEditRule = useCallback((lang: string, rule: NotificationRule, index: number) => {
    // Determine driver from sender_type
    const isMeta = rule.sender_type.includes('meta');
    setEditingRule({
      lang,
      rule: {
        ...rule,
        wa_driver: isMeta ? 'meta' : 'instance',
        admin_meta_message_type: (rule as unknown as Record<string, string>).admin_meta_message_type || 'text',
        admin_meta_template_name: (rule as unknown as Record<string, string>).admin_meta_template_name || '',
        admin_meta_template_lang: (rule as unknown as Record<string, string>).admin_meta_template_lang || '',
      },
      index
    });
    setCurrentStep(1);
    setIsSheetOpen(true);
  }, []);

  const handleSaveRuleUpdate = async () => {
    if (!editingRule) return;

    // Recalculate sender_type based on active channels
    const r = editingRule.rule;
    const hasUser = r.whatsapp_enabled === 1 || r.email_enabled === 1;
    const hasAdmin = r.admin_whatsapp_enabled === 1 || r.admin_email_enabled === 1;

    let senderType = "none";
    const driver = r.wa_driver || 'instance';

    if (hasUser && hasAdmin) {
      if ((r.whatsapp_enabled || r.admin_whatsapp_enabled) && (r.email_enabled || r.admin_email_enabled)) {
        senderType = driver === 'meta' ? "user_admin_meta_both" : "user_admin_both";
      }
      else if (r.whatsapp_enabled || r.admin_whatsapp_enabled) {
        senderType = driver === 'meta' ? "user_admin_meta_whatsapp" : "user_admin_whatsapp";
      }
      else senderType = "user_admin_email";
    } else if (hasUser) {
      if (r.whatsapp_enabled && r.email_enabled) {
        senderType = driver === 'meta' ? "user_meta_both" : "user_both";
      }
      else if (r.whatsapp_enabled) {
        senderType = driver === 'meta' ? "user_meta_whatsapp" : "user_whatsapp";
      }
      else senderType = "user_email";
    } else if (hasAdmin) {
      if (r.admin_whatsapp_enabled && r.admin_email_enabled) {
        senderType = driver === 'meta' ? "admin_meta_both" : "admin_both";
      }
      else if (r.admin_whatsapp_enabled) {
        senderType = driver === 'meta' ? "admin_meta_whatsapp" : "admin_whatsapp";
      }
      else senderType = "admin_email";
    }

    const updatedRule = {
      ...r,
      sender_type: senderType,
      // Sync media URLs just in case backend expects them in specific fields
      whatsapp_media_url: r.image_source_type === 'custom' ? r.custom_image_url : '',
      admin_whatsapp_media_url: r.image_source_type === 'custom' ? r.custom_image_url : '',
      send_product_image: r.image_source_type === 'product_image' ? 1 : 0
    };

    const nextSettings = JSON.parse(JSON.stringify(localSettings!)) as NotificationsConfig['settings'];
    nextSettings.configured_languages[editingRule.lang].notifications[editingRule.index] = updatedRule;

    const success = await performSave(nextSettings);
    if (success) {
      setIsSheetOpen(false);
    }
  }

  const handleAddNotification = useCallback((lang: string) => {
    if (!localSettings) return;
    const nextSettings = JSON.parse(JSON.stringify(localSettings!)) as NotificationsConfig['settings'];
    const newRule: NotificationRule = {
      id: "rule_" + Date.now(),
      enabled: true,
      trigger_key: "user_login",
      sender_type: "user_whatsapp",

      country_filter_enabled: 0,
      product_filter_enabled: 0,
      category_filter_enabled: 0,
      payment_filter_enabled: 0,
      billing_countries_whitelist: "",
      billing_countries_blocklist: "",
      payment_gateways: "",
      product_ids_whitelist: "",
      product_ids_blocklist: "",
      category_ids_whitelist: "",
      category_ids_blocklist: "",

      whatsapp_enabled: 1,
      whatsapp_message: "Hello {user_name}, welcome to {sitename}!",
      whatsapp_media_url: "",
      email_enabled: 0,
      email_subject: "Notification from {sitename}",
      email_body: "Hello {user_name},\n\nThis is a notification regarding your account on {sitename}.",

      admin_user_ids: "",
      admin_whatsapp_enabled: 0,
      admin_whatsapp_message: "",
      admin_whatsapp_media_url: "",
      admin_email_enabled: 0,
      admin_email_subject: "",
      admin_email_body: "",

      image_source_type: "none",
      custom_image_url: "",
      send_product_image: 0,

      send_timing: "instant",
      delay_value: 1,
      delay_unit: "minutes",

      meta_message_type: "text",
      meta_template_name: "",
      meta_template_lang: "",

      admin_meta_message_type: "text",
      admin_meta_template_name: "",
      admin_meta_template_lang: "",

      email_template_id: "",
      wa_driver: "instance"
    };
    nextSettings.configured_languages[lang].notifications.unshift(newRule);
    setLocalSettings(nextSettings);
    setHasUnsavedChanges(true);
    handleEditRule(lang, newRule, 0);
  }, [localSettings, handleEditRule]);


  const handleSendTestNotification = async () => {
    if (!testAdminId || !editingRule) { alert("Please select a team member for the test."); return; }
    setIsTesting(true); setTestLog(null);
    try {
      const res = await fetch(`${dashboardData.global?.apiRestUrl}/notifications/test`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': dashboardData.global?.wpRestNonce || ''
        },
        body: JSON.stringify({
          test_admin_id: testAdminId,
          rule_data: editingRule.rule
        })
      });
      const resData = await res.json();
      if (resData.success) { setTestLog({ status: 'success', message: resData.data.message || "Success!" }); }
      else { setTestLog({ status: 'error', message: resData.message || "Error." }); }
    } catch { setTestLog({ status: 'error', message: "Network error." }); }
    finally { setIsTesting(false); }
  };

  const handleDeleteRule = useCallback((lang: string, indexInOriginal: number) => {
    if (!window.confirm(t('confirmDeleteRule', "Are you sure you want to delete this notification?"))) return;
    setLocalSettings(prev => {
      if (!prev) return prev;
      const nextSettings = { ...prev };
      nextSettings.configured_languages[lang].notifications.splice(indexInOriginal, 1);
      return nextSettings;
    });
    setHasUnsavedChanges(true);
    toast.success(t('ruleRemoved', "Rule removed."));
  }, [t]);

  const handleDuplicateRule = useCallback((lang: string, indexInOriginal: number) => {
    if (!localSettings) return;
    const nextSettings = JSON.parse(JSON.stringify(localSettings)) as NotificationsConfig['settings'];
    const original = nextSettings.configured_languages[lang].notifications[indexInOriginal];
    const duplicate = { ...original, id: "rule_" + Date.now() };
    nextSettings.configured_languages[lang].notifications.splice(indexInOriginal + 1, 0, duplicate);
    setLocalSettings(nextSettings);
    setHasUnsavedChanges(true);
    toast.success(t('ruleDuplicated', "Rule duplicated."));
  }, [localSettings, t]);

  const handleDeleteLanguage = async (code: string) => {
    if (code === localSettings!.main_language_code) return;
    if (!window.confirm(`Are you sure you want to delete ${localSettings!.configured_languages[code].name} and all its notifications?`)) return;

    const nextSettings = {
      ...localSettings!,
      configured_languages: { ...localSettings!.configured_languages }
    };
    delete nextSettings.configured_languages[code];

    if (activeLang === code) {
      setActiveLang(localSettings!.main_language_code);
    }

    setLocalSettings(nextSettings);
    await performSave(nextSettings);
  }

  if (!data || !localSettings) return null;

  const isRTL = dashboardData.rtl || window.wawpDashboardData?.rtl;

  const handleConfirmAddLanguage = async (code: string) => {
    if (!localSettings) return;
    if (localSettings.configured_languages[code]) {
      toast.error("This language is already configured.");
      return;
    }
    const details = data.availableTranslations[code];
    const nextSettings = {
      ...localSettings,
      configured_languages: {
        ...localSettings.configured_languages,
        [code]: {
          name: `${details.native_name} (${details.english_name})`,
          notifications: []
        }
      }
    };
    
    setLocalSettings(nextSettings);
    setActiveLang(code);
    setIsAddLangOpen(false);
    
    const success = await performSave(nextSettings);
    if (success) {
      toast.success(`${details.english_name} added successfully!`);
    }
  }


  const getRuleDescription = (rule: NotificationRule) => {
    const key = rule.trigger_key;
    if (key === 'user_login') return "Sent automatically when a user logs into your site.";
    if (key === 'user_signup') return "Sent automatically when a new user registers on your site.";
    if (key === 'wc_order_note_added') return "Sent when a new customer note is added to an order.";
    if (key && key.startsWith('wc_status_')) {
      const status = key.replace('wc_status_', '');
      return `Sent when an order status is updated to ${status}.`;
    }
    if (key && key.startsWith('wc_sub_status_')) {
      const status = key.replace('wc_sub_status_', '');
      return `Sent when a subscription is marked as ${status}.`;
    }
    if (key === 'wc_sub_renewal_payment_complete') return "Sent when a subscription renewal payment is successfully processed.";
    if (key === 'wc_sub_note_added') return "Sent when a note is added to a subscription by an administrator.";

    return `This notification triggers on the ${data.availableTriggers[key]?.label || 'selected'} event.`;
  }

  const unconfiguredLangs = Object.entries(data.availableTranslations)
    .filter(([code]) => !localSettings.configured_languages[code])
    .filter(([code, det]) =>
      det.english_name.toLowerCase().includes(searchLang.toLowerCase()) ||
      det.native_name.toLowerCase().includes(searchLang.toLowerCase()) ||
      code.toLowerCase().includes(searchLang.toLowerCase())
    );

  const groupNotifications = (notifications: NotificationRule[]) => {
    const groups = {
      wordpress: [] as { rule: NotificationRule, originalIdx: number }[],
      woocommerce: [] as { rule: NotificationRule, originalIdx: number }[],
      subscriptions: [] as { rule: NotificationRule, originalIdx: number }[],
      wawp: [] as { rule: NotificationRule, originalIdx: number }[],
      other: [] as { rule: NotificationRule, originalIdx: number }[]
    };

    notifications.forEach((rule, idx) => {
      const key = rule.trigger_key || '';
      const item = { rule, originalIdx: idx };
      if (key === 'abandoned_cart' || key === 'potential_customer' || key === 'shopping') {
        groups.wawp.push(item);
      } else if (key.startsWith('wc_sub_')) {
        groups.subscriptions.push(item);
      } else if (key.startsWith('wc_status_') || key === 'wc_order_note_added') {
        groups.woocommerce.push(item);
      } else if (key === 'user_login' || key === 'user_signup' || key.startsWith('user_')) {
        groups.wordpress.push(item);
      } else {
        groups.other.push(item);
      }
    });

    return groups;
  }

  return (
    <SettingsLayout>
      <SettingsHeader
        title={t('pageTitle', 'Notifications Builder')}
        description={t('pageSubtitle', 'Unlimited notification options.')}
      >
        <SaveWithStatus
          saveStatus={saveStatus}
          hasUnsavedChanges={hasUnsavedChanges}
          isSaving={saveStatus === 'saving'}
          onSave={() => performSave(localSettings!)}
          t={{
            saveChanges: t('saveChanges', 'Save Changes'),
            synchronized: t('shieldUpdated', 'Shield Updated')
          }}
        />
      </SettingsHeader>

      {/* Multilingual Banner */}


      {/* Main Content: Language Tabs & Rules */}
      <div className="w-full space-y-4">
        {(() => {
          const configuredLangsCount = Object.keys(localSettings.configured_languages).length;
          const showTabs = configuredLangsCount > 1;

          return (
            <Tabs value={activeLang} onValueChange={setActiveLang} className="w-full">
              {data.isMultiLangActive && showTabs && (
                <div className="flex items-center justify-between pb-2">
                  <TabsList className="bg-muted p-1 h-auto flex gap-1 rounded-md">
                    {Object.keys(localSettings.configured_languages).map(code => (
                      <TabsTrigger
                        key={code}
                        value={code}
                        className="px-4 py-1.5 text-sm font-medium transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm rounded-sm flex items-center gap-2 group"
                      >
                        {localSettings.configured_languages[code].name.split(' (')[0]}
                        {code === localSettings.main_language_code ? (
                          <Badge variant="secondary" className="px-1 py-0 h-4 text-[10px] bg-yellow-100 text-yellow-700 font-medium border-yellow-100 uppercase hover:bg-yellow-100">{t('main', 'Main')}</Badge>
                        ) : (
                          <button
                            onClick={(e) => { e.stopPropagation(); handleDeleteLanguage(code); }}
                            className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive transition-all"
                          >
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                        )}
                      </TabsTrigger>
                    ))}
                  </TabsList>
                  <div className="ps-4">
                    <SecondaryButton onClick={() => setIsAddLangOpen(true)} className="text-muted-foreground border-none shadow-none bg-transparent hover:bg-muted">
                      <Plus className="w-4 h-4 mr-2" /> {t('addLanguage', 'Add language')}
                    </SecondaryButton>
                  </div>
                </div>
              )}

          {Object.keys(localSettings.configured_languages).map(code => {
            const rules = localSettings.configured_languages[code].notifications || [];
            const groups = groupNotifications(rules);
            const isEmpty = rules.length === 0;

            return (
              <TabsContent key={code} value={code} className="mt-6 space-y-8 animate-in fade-in slide-in-from-top-2 duration-300">

                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 p-5 bg-white border border-slate-200 rounded-xl mb-6">
                  <SectionHeader
                    title={`Active Trigger Automations (${rules.length})`}
                    description="Rules are grouped by feature for easier management."
                    icon={Zap}
                    className="mb-0"
                  />
                  <div className="flex items-center gap-2">
                    {data.isMultiLangActive && !showTabs && (
                      <GhostButton
                        onClick={() => setIsAddLangOpen(true)}
                        size="icon"
                        className="rounded-full hover:bg-slate-50 transition-all text-slate-400"
                        title={t('addLanguage', 'Add language')}
                      >
                        <Globe className="w-5 h-5" />
                      </GhostButton>
                    )}
                    <AdminButton onClick={() => handleAddNotification(code)} className="font-bold">
                      <Plus className="w-4 h-4 mr-2" /> {t('newNotification', 'New Notification')}
                    </AdminButton>
                  </div>
                </div>

                {isEmpty ? (
                  <div className="rounded-md border bg-background p-20 text-center">
                    <div className="w-16 h-16 bg-muted rounded-md flex items-center justify-center mx-auto mb-4">
                      <AlertCircle className="w-8 h-8 text-muted-foreground" />
                    </div>
                    <h4 className="text-base font-semibold text-foreground">No Notifications Configured</h4>
                    <p className="text-sm text-muted-foreground mt-1">Start by adding your first trigger above to automate your store.</p>
                  </div>
                ) : (
                  <div className="space-y-10 pb-12">
                    {([
                      { id: 'wordpress', label: 'WordPress Core Events', data: groups.wordpress, icon: data.iconBaseUrl + "wordpress.svg" },
                      { id: 'woocommerce', label: 'WooCommerce Store Alerts', data: groups.woocommerce, icon: data.iconBaseUrl + "woocommerce.svg" },
                      { id: 'subscriptions', label: 'Customer Subscriptions', data: groups.subscriptions, icon: data.iconBaseUrl + "features/woocommerce-subscription-notifications.svg" },
                      { id: 'wawp', label: 'Wawp Abandoned Cart', data: groups.wawp, icon: data.iconBaseUrl + "wawp.svg" },
                      { id: 'other', label: 'Other Integrations', data: groups.other, icon: data.iconBaseUrl + "bell.svg" }
                    ] as const).map(group => group.data.length > 0 && (
                      <section key={group.id} className="space-y-4">
                        <div className="flex items-center gap-3 px-2">
                          {group.id === 'wawp' ? (
                            <WAWPLogo className="w-4 h-4 opacity-50" />
                          ) : (
                            <img src={group.icon} className="w-4 h-4 opacity-50" alt="" />
                          )}
                          <h3 className="text-sm font-semibold text-foreground uppercase tracking-wider">{group.label}</h3>
                          <Separator className="flex-1" />
                          <Badge variant="secondary" className="h-6 px-2.5 text-xs">{group.data.length}</Badge>
                        </div>

                        <div className="rounded-md border bg-white overflow-hidden divide-y">
                          {group.data.map(({ rule, originalIdx }) => {
                            const isEditing = isSheetOpen && editingRule?.lang === code && editingRule?.index === originalIdx;
                            return (
                              <div
                                key={rule.id}
                                onClick={() => handleEditRule(code, rule, originalIdx)}
                                className={cn(
                                  "flex items-center gap-4 px-6 py-4 cursor-pointer transition-colors",
                                  isEditing ? "bg-muted" : "hover:bg-muted/50",
                                  !rule.enabled && !isEditing && "opacity-60"
                                )}
                              >
                                {/* Icon */}
                                <div className={cn(
                                  "flex-shrink-0 w-10 h-10 rounded-md border flex items-center justify-center relative bg-background",
                                )}>
                                  {data.availableTriggers[rule.trigger_key]?.icon_file?.includes('wawp') ? (
                                    <WAWPLogo className="w-5 h-5 opacity-80" />
                                  ) : (
                                    <img src={data.iconBaseUrl + (data.availableTriggers[rule.trigger_key]?.icon_file || 'wordpress.svg')} className="w-5 h-5 opacity-80" />
                                  )}
                                  <div className="absolute -top-1 -right-1 flex -space-x-1">
                                    {rule.whatsapp_enabled === 1 && rule.wa_driver !== 'meta' && <img src={data.iconBaseUrl + "whatsapp.svg"} className="w-3 h-3 border border-background rounded-full bg-background" />}
                                    {rule.whatsapp_enabled === 1 && rule.wa_driver === 'meta' && <img src={data.iconBaseUrl + "meta.svg"} className="w-3 h-3 border border-background rounded-full bg-background" />}
                                    {rule.email_enabled === 1 && <img src={data.iconBaseUrl + "email.svg"} className="w-3 h-3 border border-background rounded-full bg-background" />}
                                  </div>
                                </div>

                                {/* Info */}
                                <div className="flex-1 min-w-0">
                                  <div className="flex items-center gap-2">
                                    <span className="font-semibold text-foreground truncate">{data.availableTriggers[rule.trigger_key]?.label || 'Trigger'}</span>
                                    {!rule.enabled && <Badge variant="secondary" className="text-[10px] px-1.5 py-0">Paused</Badge>}
                                    {isEditing && <Badge variant="secondary" className="text-[10px] px-1.5 py-0 bg-primary/10 text-primary hover:bg-primary/20">Editing</Badge>}
                                  </div>
                                  <div className="flex items-center gap-3 text-muted-foreground mt-1 overflow-hidden">
                                    <span className="text-sm truncate flex-shrink min-w-0">{getRuleDescription(rule)}</span>
                                    <span className="mx-1 flex-shrink-0">•</span>
                                    <div className="flex items-center gap-2 text-xs flex-shrink-0">
                                      <span className="flex items-center gap-1"><Smartphone className="w-3 h-3" /> {rule.sender_type.includes('user') ? 'User' : (rule.sender_type.includes('admin') ? 'Admins' : 'Both')}</span>
                                      <span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {rule.send_timing === 'instant' ? 'Instant' : `${rule.delay_value} ${rule.delay_unit}`}</span>
                                    </div>
                                  </div>
                                </div>

                                {/* Actions */}
                                <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                                  <GhostButton onClick={() => handleEditRule(code, rule, originalIdx)} className="h-8" icon={Pencil}>
                                    {t('edit', 'Edit')}
                                  </GhostButton>
                                  <GhostButton onClick={() => handleDuplicateRule(code, originalIdx)} size="icon-sm" className="text-muted-foreground" icon={Copy}>
                                    {null}
                                  </GhostButton>
                                  <GhostButton onClick={() => handleDeleteRule(code, originalIdx)} size="icon-sm" className="text-muted-foreground hover:text-destructive" icon={Trash2}>
                                    {null}
                                  </GhostButton>
                                  <Separator orientation="vertical" className="h-4 mx-2" />
                                  <div dir="ltr">
                                    <Switch
                                      checked={rule.enabled}
                                      onCheckedChange={() => handleToggleRule(code, originalIdx)}
                                    />
                                  </div>
                                </div>
                              </div>
                            );
                          })}
                        </div>
                      </section>
                    ))}
                  </div>
                )}
              </TabsContent>
            );
          })}
            </Tabs>
          );
        })()}
      </div>

      {/* Add New Language Sidebar */}
      <AnimatePresence>
        {isAddLangOpen && (
          <>
            <motion.div
              initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
              onClick={() => setIsAddLangOpen(false)}
              className="fixed inset-0 bg-black/40 z-[100000] backdrop-blur-sm"
            />
            <motion.div
              initial={{ x: isRTL ? '-100%' : '100%' }} animate={{ x: 0 }} exit={{ x: isRTL ? '-100%' : '100%' }}
              transition={{ type: 'spring', damping: 28, stiffness: 220 }}
              className={cn(
                "fixed inset-y-0 w-full lg:max-w-[500px] bg-white z-[100001] shadow-xl flex flex-col",
                isRTL ? "left-0 border-r" : "right-0 border-l"
              )}
            >
              <div className="flex flex-col h-full">
                <div className="px-6 py-4 border-b bg-white sticky top-0 z-20">
                  <div className="flex items-center justify-between">
                    <SectionHeader
                      title="Add New Language"
                      description="Select the language you want to translate your notifications to."
                      icon={Globe}
                      className="mb-0"
                    />
                    <GhostButton onClick={() => setIsAddLangOpen(false)} size="icon-sm" className="rounded-full hover:bg-slate-50 transition-all" icon={X}>
                      {null}
                    </GhostButton>
                  </div>
                </div>

                <div className="flex-1 overflow-y-auto custom-scrollbar p-6">
                  <div className="space-y-4">
                    <div className="relative">
                      <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                      <SettingInput
                        label="Search Language"
                        placeholder="Search for a language..."
                        className="pl-10"
                        icon={Search}
                        value={searchLang}
                        onChange={(val: string) => setSearchLang(val)}
                      />
                    </div>

                    <div className="max-h-[600px] overflow-y-auto custom-scrollbar border border-slate-100 rounded-xl divide-y divide-slate-50">
                      {unconfiguredLangs.length === 0 ? (
                        <div className="p-8 text-center text-slate-400 text-sm font-medium">No results found for "{searchLang}"</div>
                      ) : (
                        unconfiguredLangs.map(([code, det]) => (
                          <button
                            key={code}
                            onClick={() => handleConfirmAddLanguage(code)}
                            className="w-full text-left p-4 hover:bg-slate-50 flex items-center justify-between group transition-all border-none cursor-pointer"
                          >
                            <div>
                              <p className="font-bold text-slate-900 group-hover:text-[#004449] transition-colors m-0">{det.english_name}</p>
                              <p className="text-xs text-slate-400 font-medium m-0">{det.native_name} • {code}</p>
                            </div>
                            <ChevronRight className="w-4 h-4 text-slate-300 group-hover:text-[#004449] transition-all opacity-0 group-hover:opacity-100 transform group-hover:translate-x-1" />
                          </button>
                        ))
                      )}
                    </div>
                  </div>
                </div>

                <div className="p-4 bg-slate-50 border-t border-slate-100 flex justify-end">
                  <GhostButton onClick={() => setIsAddLangOpen(false)} className="font-bold text-slate-400 hover:text-slate-600">Cancel</GhostButton>
                </div>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>

      {/* Edit Sidebar */}
      <AnimatePresence>
        {isSheetOpen && editingRule && (
          <>
            <motion.div
              initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
              onClick={() => setIsSheetOpen(false)}
              className="fixed inset-0 bg-black/40 z-[100000] backdrop-blur-sm"
            />
            <motion.div
              initial={{ x: isRTL ? '-100%' : '100%' }} animate={{ x: 0 }} exit={{ x: isRTL ? '-100%' : '100%' }}
              transition={{ type: 'spring', damping: 28, stiffness: 220 }}
              className={cn(
                "fixed inset-y-0 w-full lg:max-w-[calc(100%-280px)] xl:max-w-[1200px] bg-white z-[100001] shadow-xl flex flex-col",
                isRTL ? "left-0 border-r" : "right-0 border-l"
              )}
            >
              <div className="flex flex-col h-full">
                {/* Header */}
                <div className="px-6 pt-5 pb-4 bg-white border-b sticky top-0 z-20">
                  <div className="flex items-center justify-between mb-4">
                    <SectionHeader
                      title="Edit Automation Rule"
                      description="Configure your notification flow"
                      icon={Pencil}
                      className="mb-0"
                    />
                    <GhostButton onClick={() => setIsSheetOpen(false)} size="icon-sm" className="rounded-full hover:bg-slate-50 transition-all" icon={X}>
                      {null}
                    </GhostButton>
                  </div>

                  <div className="flex items-center gap-3 mb-4">
                    <div className="flex-1 h-1.5 bg-slate-100 rounded-full overflow-hidden">
                      <div className="h-full bg-primary transition-all duration-500 ease-out" style={{ width: `${(currentStep / 7) * 100}%` }} />
                    </div>
                    <span className="text-[10px] font-semibold text-slate-400 tabular-nums">{currentStep} / 7</span>
                  </div>

                  {/* WIZARD STEPPER (Breadcrumb Style) */}
                  <div className="flex flex-wrap items-center gap-y-3 gap-x-1.5 py-2">
                    {[
                      { id: 1, label: "Trigger" },
                      { id: 2, label: "Channels" },
                      { id: 3, label: "Recipients" },
                      { id: 4, label: "Media" },
                      { id: 5, label: "Message" },
                      { id: 6, label: "Filters" },
                      { id: 7, label: "Simulator" },
                    ].map((s, idx, arr) => {
                      const isCompleted = completedSteps.has(s.id);
                      const isVisited = visitedSteps.has(s.id);
                      const isActive = currentStep === s.id;

                      return (
                        <div key={s.id} className="flex items-center gap-1.5 flex-shrink-0">
                          <button
                            onClick={() => setCurrentStep(s.id)}
                            className={cn(
                              "flex items-center gap-1 transition-all outline-none",
                              isActive ? "text-black scale-[1.02]" : (isVisited ? "text-gray-500 hover:text-black" : "text-gray-300 hover:text-gray-400")
                            )}
                          >
                            <span className={cn(
                              "text-[9px] uppercase tracking-[0.05em] font-bold",
                              isActive ? "font-black" : (isVisited ? "font-bold" : "font-semibold")
                            )}>
                              {s.label}
                            </span>

                            <div className="relative flex items-center justify-center">
                              {isCompleted ? (
                                <div className="w-3 h-3 rounded-full bg-green-500 flex items-center justify-center border border-green-600/10">
                                  <Check className="w-2.5 h-2.5 text-white stroke-[4]" />
                                </div>
                              ) : isVisited ? (
                                <Clock className="w-3 h-3 text-gray-400" />
                              ) : (
                                <div className="w-3 h-3 rounded-full border border-gray-200 bg-white" />
                              )}
                            </div>
                          </button>

                          {idx < arr.length - 1 && (
                            <ChevronRight className="w-2.5 h-2.5 text-gray-300 flex-shrink-0" />
                          )}
                        </div>
                      );
                    })}
                  </div>
                </div>
                <div className="flex-1 overflow-y-auto custom-scrollbar">
                  <div className="p-6 sm:p-8">
                    <AnimatePresence mode="wait">
                      <motion.div
                        key={currentStep} initial={{ opacity: 0, x: 10 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -10 }}
                        className="space-y-1 mb-8"
                      >
                        <SectionHeader
                          title={
                            currentStep === 1 ? "Trigger & Automation Timing" :
                              currentStep === 2 ? "Customer Delivery Channels" :
                                currentStep === 3 ? "Configure Recipients" :
                                  currentStep === 4 ? "Header Media Settings" :
                                    currentStep === 5 ? "Message Content" :
                                      currentStep === 6 ? "Audience Targeting Rules" :
                                        "Simulation Engine"
                          }
                          description={
                            currentStep === 1 ? "Choose the event category and the specific action that triggers this rule." :
                              currentStep === 2 ? "Select which channels to use for sending customer notifications." :
                                currentStep === 3 ? "Define who should receive these notifications." :
                                  currentStep === 4 ? "Make your message standout with a header image." :
                                    currentStep === 5 ? "Write professional messages for each channel." :
                                      currentStep === 6 ? "Add specific conditions to filter your audience." :
                                        "Test your configuration using a real site context."
                          }
                          icon={
                            currentStep === 1 ? Zap :
                              currentStep === 2 ? Smartphone :
                                currentStep === 3 ? User :
                                  currentStep === 4 ? Image :
                                    currentStep === 5 ? Brackets :
                                      currentStep === 6 ? ShieldCheck :
                                        Activity
                          }
                        />
                      </motion.div>
                    </AnimatePresence>

                    <AnimatePresence mode="wait">
                      <motion.div
                        key={currentStep} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, y: -10 }}
                        className="space-y-8"
                      >

                        {/* STEP 1: TRIGGER & TIMING */}
                        {currentStep === 1 && (
                          <div className="space-y-6 animate-in fade-in zoom-in-95 duration-300">
                            {/* Category Selector */}
                            <div className="space-y-3">
                              <Label className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Event Category</Label>
                              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                                {[
                                  { id: 'wordpress', label: 'WordPress', icon: 'wordpress.svg', description: 'Core system events' },
                                  { id: 'woocommerce', label: 'WooCommerce', icon: 'woocommerce.svg', description: 'Store & orders' },
                                  { id: 'subscriptions', label: 'Subscriptions', icon: 'Woo-Subscriptions.svg', description: 'Recurring payments' },
                                  { id: 'wawp', label: 'Wawp', icon: 'wawp.svg', description: 'Abandoned Cart recovery' },
                                ].map(cat => {
                                  const isActive = (() => {
                                    const k = editingRule.rule.trigger_key || '';
                                    if (cat.id === 'wordpress') return k === 'user_login' || k === 'user_signup' || k.startsWith('user_');
                                    if (cat.id === 'woocommerce') return k.startsWith('wc_status_') || k === 'wc_order_note_added';
                                    if (cat.id === 'subscriptions') return k.startsWith('wc_sub_');
                                    if (cat.id === 'wawp') return k === 'abandoned_cart' || k === 'potential_customer' || k === 'shopping';
                                    return false;
                                  })();
                                  return (
                                    <MethodButton
                                      key={cat.id}
                                      label={cat.label}
                                      description={cat.description}
                                      icon={cat.id === 'wawp' ? WAWPLogo : undefined}
                                      iconPath={cat.id === 'wawp' ? undefined : data.iconBaseUrl + cat.icon}
                                      active={isActive}
                                      onClick={() => {
                                        const first = Object.entries(data.availableTriggers).find(([k]) => {
                                          const keySafe = k || '';
                                          if (cat.id === 'wordpress') return keySafe === 'user_login' || keySafe === 'user_signup' || keySafe.startsWith('user_');
                                          if (cat.id === 'woocommerce') return keySafe.startsWith('wc_status_') || keySafe === 'wc_order_note_added';
                                          if (cat.id === 'subscriptions') return keySafe.startsWith('wc_sub_');
                                          if (cat.id === 'wawp') return keySafe === 'abandoned_cart' || keySafe === 'potential_customer' || keySafe === 'shopping';
                                          return false;
                                        });
                                        if (first) setEditingRule({ ...editingRule, rule: { ...editingRule.rule, trigger_key: first[0] } });
                                      }}
                                    />
                                  );
                                })}
                              </div>
                            </div>

                            {/* Filtered Event Dropdown */}
                            <div className="space-y-2">
                              <Label className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Event Action</Label>
                              <SearchableSelect
                                options={Object.entries(data.availableTriggers)
                                  .filter(([key]) => {
                                    const k = editingRule.rule.trigger_key || '';
                                    const isWp = k === 'user_login' || k === 'user_signup' || k.startsWith('user_');
                                    const isWoo = k.startsWith('wc_status_') || k === 'wc_order_note_added';
                                    const isSub = k.startsWith('wc_sub_');
                                    const isWawp = k === 'abandoned_cart' || k === 'potential_customer' || k === 'shopping';
                                    const keySafe = key || '';
                                    if (isWp) return keySafe === 'user_login' || keySafe === 'user_signup' || keySafe.startsWith('user_');
                                    if (isWoo) return keySafe.startsWith('wc_status_') || keySafe === 'wc_order_note_added';
                                    if (isSub) return keySafe.startsWith('wc_sub_');
                                    if (isWawp) return keySafe === 'abandoned_cart' || keySafe === 'potential_customer' || keySafe === 'shopping';
                                    return true;
                                  })
                                  .map(([key, item]) => ({
                                    value: key,
                                    label: item.label,
                                    icon: item.icon_file?.includes('wawp') ? (
                                      <WAWPLogo size={16} />
                                    ) : (
                                      <img src={data.iconBaseUrl + (item.icon_file || 'wordpress.svg')} className="w-4 h-4" />
                                    )
                                  }))}
                                value={editingRule.rule.trigger_key}
                                onChange={(val) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, trigger_key: val } })}
                                className="h-11 bg-white border-slate-200 text-slate-700 font-bold text-[13px] hover:border-[#004449]/30 transition-all rounded-[5px]"
                              />
                            </div>

                            {/* Execution Schedule */}
                            <div className="space-y-2">
                              <Label className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Execution Schedule</Label>
                              <div className="flex items-center gap-3">
                                <SearchableSelect
                                  options={[
                                    { value: "instant", label: "Execute Immediately" },
                                    { value: "delayed", label: "Execute with Delay" }
                                  ]}
                                  value={editingRule.rule.send_timing}
                                  onChange={(val) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, send_timing: val } })}
                                  className="h-11 bg-white border-slate-200 text-slate-700 font-bold text-[13px] hover:border-[#004449]/30 transition-all rounded-[5px] flex-1"
                                />
                                {editingRule.rule.send_timing === 'delayed' && (
                                  <div className="flex items-center gap-2 animate-in slide-in-from-right-4 duration-300">
                                    <SettingInput
                                      type="number"
                                      label="Delay Value"
                                      labelHidden
                                      value={String(editingRule.rule.delay_value)}
                                      onChange={(val) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, delay_value: parseInt(val) } })}
                                      className="w-20"
                                    />
                                    <SearchableSelect
                                      options={[
                                        { value: "minutes", label: "Mins" },
                                        { value: "hours", label: "Hours" },
                                        { value: "days", label: "Days" }
                                      ]}
                                      value={editingRule.rule.delay_unit}
                                      onChange={(val) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, delay_unit: val } })}
                                      className="h-11 w-24 bg-white border-slate-200 text-slate-700 font-bold text-[13px] hover:border-[#004449]/30 transition-all rounded-[5px]"
                                    />
                                  </div>
                                )}
                              </div>
                            </div>
                          </div>
                        )}

                        {/* STEP 2: CUSTOMER DELIVERY CHANNELS */}
                        {currentStep === 2 && (
                          <div className="space-y-4 animate-in fade-in zoom-in-95 duration-300">
                            {/* WhatsApp Channel */}
                            <div className="group transition-all duration-200 bg-white border border-slate-200 rounded-xl overflow-hidden hover:border-slate-300 hover:shadow-sm">
                              <div className="p-5 flex items-center justify-between gap-4">
                                <div className="flex items-center gap-4">
                                  <div className="w-12 h-12 rounded-lg bg-emerald-50 border border-emerald-100/50 flex items-center justify-center flex-shrink-0">
                                    <img src={(dashboardData.global?.pluginUrl || '') + "assets/img/senders/whatsapp.svg"} className="w-7 h-7 object-contain" alt="WhatsApp" />
                                  </div>
                                  <div className="min-w-0 flex-1">
                                    <h4 className="text-[15px] font-bold text-slate-800 tracking-tight !m-0 !p-0 leading-tight">WhatsApp Notification</h4>
                                    <p className="text-[13px] font-medium text-slate-500 !m-0 !p-0 leading-tight mt-0.5">System will send automated alerts and updates to the user's phone number.</p>
                                  </div>
                                </div>
                                <Switch
                                  checked={editingRule.rule.whatsapp_enabled === 1}
                                  onCheckedChange={(val) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, whatsapp_enabled: val ? 1 : 0 } })}
                                />
                              </div>

                              {editingRule.rule.whatsapp_enabled === 1 && (
                                <div className="px-5 pb-6 pt-2 border-t border-slate-50 space-y-4 animate-in fade-in slide-in-from-top-2 duration-300 bg-slate-50/30">
                                  <div className="flex flex-col gap-1.5">
                                    <Label className="text-[10px] font-black text-slate-400 uppercase tracking-[0.1em] pl-0.5">Preferred Delivery Method</Label>
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                      {[
                                        { id: 'instance', label: 'Wawp Instance', icon: () => <WAWPLogo size={24} />, desc: 'Personal Account' },
                                        { id: 'meta', label: 'Meta Cloud API', iconPath: (dashboardData.global?.pluginUrl || '') + "assets/img/senders/meta.svg", desc: 'Official API' }
                                      ].map(driver => (
                                        <MethodButton
                                          key={driver.id}
                                          active={editingRule.rule.wa_driver === driver.id}
                                          label={driver.label}
                                          description={driver.desc}
                                          icon={driver.icon}
                                          iconPath={driver.iconPath}
                                          onClick={() => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, wa_driver: driver.id as 'instance' | 'meta' } })}
                                        />
                                      ))}
                                    </div>
                                  </div>
                                </div>
                              )}
                            </div>

                            {/* Email Channel */}
                            <div className="group transition-all duration-200 bg-white border border-slate-200 rounded-xl overflow-hidden hover:border-slate-300 hover:shadow-sm">
                              <div className="p-5 flex items-center justify-between gap-4">
                                <div className="flex items-center gap-4">
                                  <div className="w-12 h-12 rounded-lg bg-blue-50 border border-blue-100/50 flex items-center justify-center flex-shrink-0">
                                    <img src={(dashboardData.global?.pluginUrl || '') + "assets/img/senders/gmail.svg"} className="w-7 h-7 object-contain" alt="Email" />
                                  </div>
                                  <div className="min-w-0 flex-1">
                                    <h4 className="text-[15px] font-bold text-slate-800 tracking-tight !m-0 !p-0 leading-tight">Email SMTP (Site)</h4>
                                    <p className="text-[13px] font-medium text-slate-500 !m-0 !p-0 leading-tight mt-0.5">Notifications will be delivered through your website's active SMTP server.</p>
                                  </div>
                                </div>
                                <Switch
                                  checked={editingRule.rule.email_enabled === 1}
                                  onCheckedChange={(val) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, email_enabled: val ? 1 : 0 } })}
                                />
                              </div>
                            </div>
                          </div>
                        )}

                        {/* STEP 3: RECIPIENTS */}
                        {currentStep === 3 && (
                          <div className="space-y-8 animate-in fade-in duration-300">
                            <div className="space-y-4">
                              <Label className="text-sm font-bold text-gray-700 flex items-center gap-2">
                                <ShieldCheck className="w-4 h-4 text-amber-600" />
                                1. Enable Internal Admin Channels
                              </Label>
                              <div className="grid grid-cols-2 gap-4">
                                <div className={cn(
                                  "p-4 bg-background border rounded-md space-y-4 transition-all hover:border-amber-200",
                                  editingRule.rule.admin_whatsapp_enabled && "border-amber-500/20 bg-amber-50/10"
                                )}>
                                  <div className="flex items-center justify-between">
                                    <span className="text-xs font-bold text-gray-700">WhatsApp Alert</span>
                                    <Switch
                                      checked={editingRule.rule.admin_whatsapp_enabled === 1}
                                      onCheckedChange={(val) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, admin_whatsapp_enabled: val ? 1 : 0 } })}
                                    />
                                  </div>
                                </div>
                                <div className={cn(
                                  "p-4 bg-background border rounded-md space-y-4 transition-all hover:border-blue-200",
                                  editingRule.rule.admin_email_enabled && "border-blue-500/20 bg-blue-50/10"
                                )}>
                                  <div className="flex items-center justify-between">
                                    <span className="text-xs font-bold text-gray-700">Email Alert</span>
                                    <Switch
                                      checked={editingRule.rule.admin_email_enabled === 1}
                                      onCheckedChange={(val) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, admin_email_enabled: val ? 1 : 0 } })}
                                    />
                                  </div>
                                </div>
                              </div>
                            </div>

                            {(editingRule.rule.admin_whatsapp_enabled === 1 || editingRule.rule.admin_email_enabled === 1) && (
                              <div className="space-y-4 pt-4 border-t animate-in fade-in slide-in-from-top-4 duration-500">
                                <Label className="text-sm font-medium flex items-center gap-2 mb-1"><User className="w-4 h-4 text-muted-foreground" /> Select Staff Members to Notify</Label>
                                <p className="text-sm text-muted-foreground pb-2">Who in your team should get these critical internal alerts?</p>
                                <div className="max-h-[300px] overflow-y-auto p-4 bg-background border rounded-md divide-y">
                                  {(data.wpAdmins || []).map((admin) => {
                                    const selectedIds = String(editingRule.rule.admin_user_ids || '').split(',').filter(Boolean);
                                    const isSelected = selectedIds.includes(admin.ID.toString());
                                    return (
                                      <div
                                        key={admin.ID}
                                        onClick={() => {
                                          const ids = new Set(selectedIds);
                                          if (ids.has(admin.ID.toString())) ids.delete(admin.ID.toString());
                                          else ids.add(admin.ID.toString());
                                          setEditingRule({ ...editingRule, rule: { ...editingRule.rule, admin_user_ids: Array.from(ids).join(',') } });
                                        }}
                                        className={cn(
                                          "flex items-center justify-between p-3 rounded-md cursor-pointer transition-colors hover:bg-muted/50 group",
                                          isSelected && "bg-muted border-primary"
                                        )}
                                      >
                                        <div className="flex items-center gap-3">
                                          <div className={cn("w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold", isSelected ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground")}>
                                            {(admin.display_name || '').charAt(0)}
                                          </div>
                                          <div className="flex flex-col text-left">
                                            <div className="flex items-center gap-2">
                                              <span className="text-sm font-semibold text-gray-800">{admin.display_name}</span>
                                              {admin.wa_verified && <CheckCircle2 className="w-3 h-3 text-green-500" />}
                                            </div>
                                            <div className="flex items-center gap-2">
                                              <span className="text-[10px] text-gray-400 font-bold">{admin.user_email}</span>
                                              {admin.wa_number && (
                                                <span className="text-[10px] text-primary/70 font-black bg-primary/5 px-2 py-0.5 rounded-full flex items-center gap-1">
                                                  <span className="text-xs">{(String(admin.wa_number || '').startsWith('20') ? '🇪🇬' : (String(admin.wa_number || '').startsWith('966') ? '🇸🇦' : (String(admin.wa_number || '').startsWith('971') ? '🇦🇪' : '🌐')))}</span>
                                                  {admin.wa_number}
                                                </span>
                                              )}
                                            </div>
                                          </div>
                                        </div>
                                        {isSelected && (
                                          <div className="w-6 h-6 bg-primary rounded-full flex items-center justify-center animate-in zoom-in duration-300">
                                            <Check className="w-3 h-3 text-white" strokeWidth={5} />
                                          </div>
                                        )}
                                      </div>
                                    );
                                  })}
                                </div>
                              </div>
                            )}
                          </div>
                        )}

                        {/* STEP 4: MEDIA/HEADER */}
                        {currentStep === 4 && (
                          <div className="space-y-8 animate-in fade-in duration-300">
                            <div className="space-y-4">
                              <Label className="text-sm font-medium">Display Header Image</Label>
                              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                {[
                                  { id: 'none', label: 'No Image', icon: <Ban size={18} />, desc: 'Text-only' },
                                  { id: 'featured', label: 'Featured Image', icon: <Image size={18} />, desc: 'Use WP Post image' },
                                  { id: 'custom', label: 'Custom Image', icon: <Globe size={18} />, desc: 'Custom Media URL' },
                                  { id: 'product_image', label: 'Dynamic Product', icon: <LayoutGrid size={18} />, desc: 'WooCommerce products', disabled: !String(editingRule.rule.trigger_key || '').startsWith('wc_') }
                                ].map((opt) => (
                                  <MethodButton
                                    key={opt.id}
                                    active={editingRule.rule.image_source_type === opt.id}
                                    onClick={() => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, image_source_type: opt.id as 'none' | 'featured' | 'custom' | 'product_image' } })}
                                    label={opt.label}
                                    description={opt.desc}
                                    icon={() => <>{opt.icon}</>}
                                    disabled={opt.disabled}
                                  />
                                ))}
                              </div>
                            </div>

                            {editingRule.rule.image_source_type === 'custom' && (
                              <div className="space-y-3 animate-in fade-in duration-300">
                                <Label className="text-xs font-bold text-gray-400 uppercase tracking-widest pl-1">Media URL (Direct Link)</Label>
                                <SettingInput
                                  label="Media URL"
                                  placeholder="https://example.com/promo.jpg" className="h-12 bg-white rounded-md  border-gray-200"
                                  icon={Image}
                                  value={editingRule.rule.custom_image_url}
                                  onChange={(val: string) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, custom_image_url: val } })}
                                />
                              </div>
                            )}
                          </div>
                        )}

                        {/* STEP 5: CONTENT */}
                        {currentStep === 5 && (
                          <div className="space-y-6 animate-in fade-in duration-300">
                            <div className="space-y-6">
                              {editingRule.rule.whatsapp_enabled === 1 && (
                                <WhatsAppRuleConfig
                                  type="customer"
                                  rule={editingRule.rule}
                                  updateRule={(updates) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, ...updates } as NotificationRule })}
                                  metaTemplates={data.metaTemplates}
                                  placeholders={data.placeholders}
                                  onOpenPersonalization={() => {
                                    setPersonalizationTarget({ id: 'customer_wa_ed', field: 'whatsapp_message' });
                                    setPersonalizationOpen(true);
                                  }}
                                  onKeyDown={(e) => onKeyDownWhatsApp(e, 'whatsapp_message')}
                                />
                              )}

                              {editingRule.rule.email_enabled === 1 && (
                                <div className="border rounded-md bg-background overflow-hidden">
                                  <div className="px-4 py-2.5 bg-muted/30 border-b flex items-center justify-between">
                                    <div className="flex items-center gap-2">
                                      <Globe className="w-4 h-4 text-muted-foreground" />
                                      <span className="text-xs font-bold text-gray-700">Customer Email</span>
                                    </div>
                                    <Badge variant="outline" className="h-5 px-1.5 text-[9px] font-bold">SMTP</Badge>
                                  </div>
                                  <div className="p-4 space-y-4">
                                    <div className="space-y-1.5">
                                      <Label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider pl-1">Subject</Label>
                                      <div className="relative">
                                        <SettingInput
                                          label="Email Subject"
                                          placeholder=""
                                          className="pr-20"
                                          icon={Mail}
                                          value={editingRule.rule.email_subject}
                                          onChange={(val: string) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, email_subject: val } })}
                                          showEmoji={true}
                                        />
                                        <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
                                          <GhostButton
                                            size="icon-sm"
                                            className="text-muted-foreground hover:text-foreground"
                                            onClick={() => {
                                              setPersonalizationTarget({ id: 'email_subject_ed', field: 'email_subject' });
                                              setPersonalizationOpen(true);
                                            }}
                                            icon={Brackets}
                                          >
                                            {null}
                                          </GhostButton>
                                        </div>
                                      </div>
                                    </div>
                                    <div className="space-y-1.5">
                                      <Label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider pl-1">Select Template</Label>
                                      <SearchableSelect
                                        options={(data.emailTemplates || []).map((t) => ({
                                          value: t.id.toString(),
                                          label: t.name
                                        }))}
                                        value={editingRule.rule.email_template_id || ""}
                                        onChange={(val) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, email_template_id: val } })}
                                        placeholder="Choose email template..."
                                        className="h-11 bg-white border-slate-200 text-slate-700 font-bold text-[13px] hover:border-[#004449]/30 transition-all rounded-[5px]"
                                      />
                                    </div>
                                  </div>
                                </div>
                              )}

                              {(editingRule.rule.admin_whatsapp_enabled === 1 || editingRule.rule.admin_email_enabled === 1) && (
                                <div className="space-y-4 pt-2">
                                  <div className="flex items-center gap-3">
                                    <div className="flex-1 h-px bg-slate-100" />
                                    <span className="text-[10px] font-semibold text-slate-300 uppercase tracking-widest whitespace-nowrap">Internal Alerts</span>
                                    <div className="flex-1 h-px bg-slate-100" />
                                  </div>

                                  {editingRule.rule.admin_whatsapp_enabled === 1 && (
                                    <WhatsAppRuleConfig
                                      type="admin"
                                      rule={editingRule.rule}
                                      updateRule={(updates) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, ...updates } as NotificationRule })}
                                      metaTemplates={data.metaTemplates}
                                      placeholders={data.placeholders}
                                      onOpenPersonalization={() => {
                                        setPersonalizationTarget({ id: 'admin_wa_ed', field: 'admin_whatsapp_message' });
                                        setPersonalizationOpen(true);
                                      }}
                                      onKeyDown={(e) => onKeyDownWhatsApp(e, 'admin_whatsapp_message')}
                                    />
                                  )}

                                  {editingRule.rule.admin_email_enabled === 1 && (
                                    <div className="border rounded-md bg-background overflow-hidden">
                                      <div className="px-4 py-2.5 bg-muted/30 border-b flex items-center justify-between">
                                        <div className="flex items-center gap-2">
                                          <Globe className="w-4 h-4 text-muted-foreground" />
                                          <span className="text-xs font-bold text-gray-700">Admin Email</span>
                                        </div>
                                        <div className="flex items-center gap-1">
                                          <GhostButton
                                            className="h-7 w-7 p-0 flex items-center justify-center text-muted-foreground hover:text-foreground"
                                            onClick={() => {
                                              setPersonalizationTarget({ id: 'admin_em_subj', field: 'admin_email_subject' });
                                              setPersonalizationOpen(true);
                                            }}
                                            icon={Brackets}
                                          >
                                            {null}
                                          </GhostButton>
                                        </div>
                                      </div>
                                      <div className="p-4 space-y-3">
                                        <div className="space-y-1.5">
                                          <Label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider pl-1">Subject</Label>
                                          <SettingInput
                                            label="Admin Email Subject"
                                            placeholder=""
                                            icon={Mail}
                                            value={editingRule.rule.admin_email_subject}
                                            onChange={(val: string) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, admin_email_subject: val } })}
                                            showEmoji={true}
                                          />
                                        </div>
                                        <div className="space-y-1.5">
                                          <Label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider pl-1">Select Template</Label>
                                          <SearchableSelect
                                            options={(data.emailTemplates || []).map(t => ({
                                              value: t.id.toString(),
                                              label: t.name
                                            }))}
                                            value={editingRule.rule.admin_email_template_id || ""}
                                            onChange={(val) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, admin_email_template_id: val } })}
                                            placeholder="Choose email template..."
                                            className="h-11 bg-white border-slate-200 text-slate-700 font-bold text-[13px] hover:border-[#004449]/30 transition-all rounded-[5px]"
                                          />
                                        </div>
                                      </div>
                                    </div>
                                  )}
                                </div>
                              )}
                            </div>
                          </div>
                        )}

                        {/* STEP 6: FILTERS */}
                        {currentStep === 6 && (
                          <div className="space-y-10 animate-in fade-in duration-300">
                            <div className="space-y-4">
                              <div>
                                <Label className="text-sm font-medium">Automation Trigger Conditions</Label>
                                <p className="text-sm text-muted-foreground mt-0.5">Only execute this rule if the following conditions are met.</p>
                              </div>

                              <div className="grid grid-cols-1 gap-6">
                                {[
                                  { id: 'country_filter_enabled', label: 'Country Specific', icon: <Globe className="w-4 h-4" /> },
                                  { id: 'product_filter_enabled', label: 'Product Targeting', icon: <Package className="w-4 h-4" />, orderOnly: true },
                                  { id: 'category_filter_enabled', label: 'Category Logic', icon: <LayoutGrid className="w-4 h-4" />, orderOnly: true },
                                  { id: 'payment_filter_enabled', label: 'Payment Method', icon: <CreditCard className="w-4 h-4" />, orderOnly: true },
                                ].filter(f => {
                                  if (!('orderOnly' in f) || !f.orderOnly) return true;
                                  const key = editingRule.rule.trigger_key || '';
                                  return key.startsWith('wc_status_') || key === 'wc_order_note_added' || key === 'abandoned_cart' || key === 'potential_customer' || key === 'shopping';
                                }).map(f => {
                                  const isEnabled = editingRule.rule[f.id as keyof NotificationRule] === 1;
                                  return (
                                    <div key={f.id} className={cn(
                                      "p-4 bg-background border rounded-md transition-colors overflow-hidden",
                                      isEnabled && "border-primary bg-primary/5"
                                    )}>
                                      <div className="flex items-center justify-between">
                                        <div className="flex items-center gap-3 text-left">
                                          <div className={cn(
                                            "w-8 h-8 rounded-md flex items-center justify-center transition-colors shadow-sm",
                                            isEnabled ? "bg-primary text-white" : "bg-muted text-muted-foreground"
                                          )}>
                                            {f.icon}
                                          </div>
                                          <span className={cn("text-sm font-bold", isEnabled ? "text-gray-900" : "text-gray-700")}>{f.label}</span>
                                        </div>
                                        <Switch
                                          checked={isEnabled}
                                          onCheckedChange={(val) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, [f.id as keyof NotificationRule]: val ? 1 : 0 } })}
                                        />
                                      </div>

                                      {isEnabled && (
                                        <div className="mt-6 space-y-8 animate-in slide-in-from-top-2 duration-300 border-t pt-6">
                                          {/* Country Filter Fields */}
                                          {f.id === 'country_filter_enabled' && (
                                            <>
                                              <div className="space-y-4">
                                                <MultiSelectTagify
                                                  label="WHITELIST (Only send if...)"
                                                  options={Object.entries(data.wcCountries || {}).map(([code, name]) => ({ value: code, label: name as string }))}
                                                  selected={(editingRule.rule.billing_countries_whitelist || "").split(',').filter(Boolean)}
                                                  onChange={(vals: string[]) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, billing_countries_whitelist: vals.join(',') } })}
                                                />
                                              </div>
                                              <div className="space-y-4">
                                                <MultiSelectTagify
                                                  label="BLOCKLIST (Do NOT send if...)"
                                                  options={Object.entries(data.wcCountries || {}).map(([id, label]) => ({ value: id, label }))}
                                                  selected={(editingRule.rule.billing_countries_blocklist || "").split(',').filter(Boolean)}
                                                  onChange={(vals: string[]) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, billing_countries_blocklist: vals.join(',') } })}
                                                />
                                              </div>
                                            </>
                                          )}
                                          {/* Product Filter Fields */}
                                          {f.id === 'product_filter_enabled' && (
                                            <>
                                              <div className="space-y-4">
                                                <MultiSelectTagify
                                                  label="ALLOWED PRODUCTS (IDs)"
                                                  options={[
                                                    ...productSearchResults.map(p => ({ value: String(p.id), label: p.text })),
                                                    ...(data?.preloaded_entities?.product ? Object.entries(data.preloaded_entities.product).map(([id, label]) => ({ value: String(id), label })) : [])
                                                  ].filter((v, i, a) => a.findIndex(t => (t.value === v.value)) === i)}
                                                  selected={(editingRule.rule.product_ids_whitelist || "").split(',').filter(Boolean)}
                                                  onChange={(vals: string[]) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, product_ids_whitelist: vals.join(',') } })}
                                                  onSearch={searchProducts}
                                                  searchPlaceholder="Search products by name or SKU..."
                                                />
                                              </div>
                                              <div className="space-y-4">
                                                <MultiSelectTagify
                                                  label="RESTRICTED PRODUCTS (IDs)"
                                                  options={[
                                                    ...productSearchResults.map(p => ({ value: String(p.id), label: p.text })),
                                                    ...(data?.preloaded_entities?.product ? Object.entries(data.preloaded_entities.product).map(([id, label]) => ({ value: String(id), label })) : [])
                                                  ].filter((v, i, a) => a.findIndex(t => (t.value === v.value)) === i)}
                                                  selected={(editingRule.rule.product_ids_blocklist || "").split(',').filter(Boolean)}
                                                  onChange={(vals: string[]) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, product_ids_blocklist: vals.join(',') } })}
                                                  onSearch={searchProducts}
                                                  searchPlaceholder="Search products by name or SKU..."
                                                />
                                              </div>
                                            </>
                                          )}
                                          {/* Category Filter Fields */}
                                          {f.id === 'category_filter_enabled' && (
                                            <>
                                              <div className="space-y-4">
                                                <MultiSelectTagify
                                                  label="ALLOWED CATEGORIES (IDs)"
                                                  options={[
                                                    ...categorySearchResults.map(p => ({ value: String(p.id), label: p.text })),
                                                    ...(data?.preloaded_entities?.category ? Object.entries(data.preloaded_entities.category).map(([id, label]) => ({ value: String(id), label })) : [])
                                                  ].filter((v, i, a) => a.findIndex(t => (t.value === v.value)) === i)}
                                                  selected={(editingRule.rule.category_ids_whitelist || "").split(',').filter(Boolean)}
                                                  onChange={(vals: string[]) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, category_ids_whitelist: vals.join(',') } })}
                                                  onSearch={searchCategories}
                                                  searchPlaceholder="Search categories..."
                                                />
                                              </div>
                                              <div className="space-y-4">
                                                <MultiSelectTagify
                                                  label="RESTRICTED CATEGORIES (IDs)"
                                                  options={[
                                                    ...categorySearchResults.map(p => ({ value: String(p.id), label: p.text })),
                                                    ...(data?.preloaded_entities?.category ? Object.entries(data.preloaded_entities.category).map(([id, label]) => ({ value: String(id), label })) : [])
                                                  ].filter((v, i, a) => a.findIndex(t => (t.value === v.value)) === i)}
                                                  selected={(editingRule.rule.category_ids_blocklist || "").split(',').filter(Boolean)}
                                                  onChange={(vals: string[]) => setEditingRule({ ...editingRule, rule: { ...editingRule.rule, category_ids_blocklist: vals.join(',') } })}
                                                  onSearch={searchCategories}
                                                  searchPlaceholder="Search categories..."
                                                />
                                              </div>
                                            </>
                                          )}
                                          {/* Payment Filter Fields */}
                                          {f.id === 'payment_filter_enabled' && (
                                            <div className="space-y-4">
                                              <div className="space-y-2">
                                                <Label className="text-[10px] font-semibold text-blue-500 uppercase tracking-widest pl-1">ALLOWED PAYMENT GATEWAYS</Label>
                                                <p className="text-[9px] text-gray-400 font-bold mb-2">Selected: {editingRule.rule.payment_gateways || 'All'}</p>
                                                <div className="flex flex-wrap gap-2">
                                                  {Object.entries(data.paymentGateways).map(([id, label]) => {
                                                    const selected = (editingRule.rule.payment_gateways || "").split(',').filter(Boolean);
                                                    const isAct = selected.includes(id);
                                                    return (
                                                      <Badge
                                                        key={id} variant={isAct ? "default" : "outline"}
                                                        onClick={() => {
                                                          const next = isAct ? selected.filter(s => s !== id) : [...selected, id];
                                                          setEditingRule({ ...editingRule, rule: { ...editingRule.rule, payment_gateways: next.join(',') } });
                                                        }}
                                                        className={cn("cursor-pointer px-3 py-1 rounded-lg text-[10px] font-bold border-gray-100 ", isAct && "bg-primary border-primary")}
                                                      >
                                                        {label}
                                                      </Badge>
                                                    );
                                                  })}
                                                </div>
                                              </div>
                                            </div>
                                          )}
                                        </div>
                                      )}
                                    </div>
                                  )
                                })}
                              </div>
                            </div>
                          </div>
                        )}

                        {currentStep === 7 && (
                          <div className="space-y-6">
                            <div className="p-6 rounded-md bg-background border flex flex-col items-center text-center space-y-6 relative overflow-hidden">
                              <div className="w-12 h-12 bg-muted rounded-md flex items-center justify-center mb-2"><Activity className="w-6 h-6 text-muted-foreground" /></div>
                              <div className="space-y-1">
                                <h3 className="text-lg font-semibold text-foreground">Active Rule Simulator</h3>
                                <p className="text-sm text-muted-foreground max-w-xs text-balance">Test your configuration across User & Admin copies using live site contexts (Orders/Users).</p>
                              </div>
                              <div className="w-full max-w-sm space-y-4 pt-4">
                                <SearchableSelect
                                  options={data.wpAdmins.filter(a => String(editingRule.rule.admin_user_ids || '').split(',').includes(a.ID.toString()) || a.ID === (data.wpAdmins[0]?.ID || '')).map((admin) => ({
                                    value: admin.ID.toString(),
                                    label: `${admin.display_name} (Admin)`
                                  }))}
                                  value={testAdminId}
                                  onChange={setTestAdminId}
                                  placeholder="Select target staff for simulation..."
                                  className="h-11 bg-white border-slate-200 text-slate-700 font-bold text-[13px] hover:border-[#004449]/30 transition-all rounded-[5px]"
                                />
                                <AdminButton onClick={handleSendTestNotification} disabled={isTesting || !testAdminId} className="w-full" loading={isTesting}>
                                  {isTesting ? "Deploying Simulation..." : "Fire Test Notification"}
                                </AdminButton>
                              </div>
                              {testLog && (
                                <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className={cn("w-full p-6 rounded-md border flex flex-col items-center gap-3", testLog.status === 'success' ? "bg-green-50 border-green-100 text-green-700" : "bg-red-50 border-red-100 text-red-700")}>
                                  {testLog.status === 'success' ? <CheckCircle2 className="w-8 h-8" /> : <AlertTriangle className="w-8 h-8" />}
                                  <div className="text-sm font-black text-slate-700 underline underline-offset-4 decoration-2 decoration-primary/20">{testLog.message}</div>
                                </motion.div>
                              )}
                            </div>
                          </div>
                        )}

                      </motion.div>
                    </AnimatePresence>
                  </div>
                </div>

                {/* Footer Navigation */}
                <div className="p-6 border-t bg-white flex items-center justify-between sticky bottom-0 z-20">
                  <div className="flex gap-2">
                    <GhostButton
                      onClick={() => currentStep > 1 ? setCurrentStep(currentStep - 1) : setIsSheetOpen(false)}
                      className="rounded-md font-bold text-gray-400 hover:bg-slate-50 transition-all px-6 shadow-none"
                      icon={currentStep > 1 ? ChevronLeft : undefined}
                    >
                      {currentStep > 1 ? t('back', 'Back') : t('discard', 'Discard')}
                    </GhostButton>
                  </div>

                  {currentStep < 7 ? (
                    <SuccessButton
                      className="bg-primary hover:bg-primary/90 shadow-primary/20"
                      onClick={() => setCurrentStep(currentStep + 1)}
                    >
                      {t('continueToStep', 'Continue to Step')} {currentStep + 1}
                    </SuccessButton>
                  ) : (
                    <SuccessButton
                      onClick={handleSaveRuleUpdate}
                    >
                      <Check className="w-4 h-4 me-2" /> {t('applyTransformation', 'Apply Transformation')}
                    </SuccessButton>
                  )}
                </div>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
      {data && (
        <PersonalizationDialog
          open={personalizationOpen}
          onOpenChange={setPersonalizationOpen}
          onInsert={(placeholder) => insertAtCursor(personalizationTarget.id, placeholder, personalizationTarget.field)}
          placeholders={data.placeholders}
          triggerKey={editingRule?.rule.trigger_key}
        />
      )}
    </SettingsLayout>
  )
}