const { useState, useEffect, useMemo, useRef, useCallback } = React;

const supabaseUrl = 'https://ttwbgbjtcwdxhrkmxpxc.supabase.co';
const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR0d2JnYmp0Y3dkeGhya214cHhjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzUxMDA3MDksImV4cCI6MjA5MDY3NjcwOX0.koQtjk2rID4cpkJd2uTISVJcOzpqbJL139gC-fV6Lfc';

const supabase = window.supabaseCreateClient(supabaseUrl, supabaseKey);
const supabaseAuth = window.supabaseCreateClient(supabaseUrl, supabaseKey, {
  auth: { persistSession: false, autoRefreshToken: false }
});

const Icons = {
  Upload: () => lucide.createElement(lucide.Upload),
  Lock: () => lucide.createElement(lucide.Lock),
  Plus: () => lucide.createElement(lucide.Plus),
  X: () => lucide.createElement(lucide.X),
  Calendar: () => lucide.createElement(lucide.Calendar),
  Users: () => lucide.createElement(lucide.Users),
  FileText: () => lucide.createElement(lucide.FileText),
  CheckSquare: () => lucide.createElement(lucide.CheckSquare),
  Image: () => lucide.createElement(lucide.Image),
  LogOut: () => lucide.createElement(lucide.LogOut),
  LayoutDashboard: () => lucide.createElement(lucide.LayoutDashboard),
  Table: () => lucide.createElement(lucide.Table),
  CalendarDays: () => lucide.createElement(lucide.CalendarDays),
  List: () => lucide.createElement(lucide.List),
  Printer: () => lucide.createElement(lucide.Printer),
  ChevronUp: () => lucide.createElement(lucide.ChevronUp),
  ChevronDown: () => lucide.createElement(lucide.ChevronDown),
  ChevronLeft: () => lucide.createElement(lucide.ChevronLeft),
  ChevronRight: () => lucide.createElement(lucide.ChevronRight),
  Settings: () => lucide.createElement(lucide.Settings),
  Trash2: () => lucide.createElement(lucide.Trash2),
  Edit: () => lucide.createElement(lucide.Edit),
  Star: () => lucide.createElement(lucide.Star),
  Share2: () => lucide.createElement(lucide.Share2),
  Youtube: () => lucide.createElement(lucide.Youtube),
  Pin: () => lucide.createElement(lucide.Pin),
  Copy: () => lucide.createElement(lucide.Copy),
  ExternalLink: () => lucide.createElement(lucide.ExternalLink),
  Play: () => lucide.createElement(lucide.Play),
  FileSpreadsheet: () => lucide.createElement(lucide.FileSpreadsheet),
  Download: () => lucide.createElement(lucide.Download),
  Eye: () => lucide.createElement(lucide.Eye),
  EyeOff: () => lucide.createElement(lucide.EyeOff),
  Moon: () => lucide.createElement(lucide.Moon),
  Sun: () => lucide.createElement(lucide.Sun),
  MapPin: () => lucide.createElement(lucide.MapPin),
  Phone: () => lucide.createElement(lucide.Phone),
  Globe: () => lucide.createElement(lucide.Globe),
  CreditCard: () => lucide.createElement(lucide.CreditCard),
  Building: () => lucide.createElement(lucide.Building)
};

function Icon({ name, className = "h-4 w-4", style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current) {
      ref.current.innerHTML = '';
      const el = lucide.createElement(lucide[name]);
      if (el) {
        if (className) {
          const classes = className.split(' ').filter(c => c.trim());
          if (classes.length) el.classList.add(...classes);
        }
        Object.entries(style).forEach(([k, v]) => el.style[k] = v);
        ref.current.appendChild(el);
      }
    }
  }, [name, className, style]);
  return React.createElement('span', { ref, className: 'inline-flex items-center justify-center' });
}

function getHash() {
  const hash = window.location.hash.replace(/^#\/?/, '') || 'reports';
  if (hash.startsWith('featured/') || hash === 'featured-activities') return 'featured';
  if (hash.startsWith('programs/') || hash === 'programs') return 'programs';
  return hash;
}

function CustomModal({ title, message, type, onConfirm, onCancel, confirmText, cancelText, siteColor }) {
  return React.createElement('div', {
    className: "fixed inset-0 bg-slate-900/60 backdrop-blur-sm flex justify-center items-center z-[9999] p-4",
    onClick: onCancel
  },
    React.createElement('div', {
      className: "bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden",
      onClick: e => e.stopPropagation(),
      dir: "rtl",
      style: { fontFamily: "'Tajawal', sans-serif" }
    },
      React.createElement('div', {
        className: "p-5 text-center text-white",
        style: { backgroundColor: siteColor }
      },
        React.createElement('h2', { className: "text-xl font-bold" }, title)
      ),
      React.createElement('div', { className: "p-6" },
        React.createElement('p', {
          className: "text-slate-700 text-center leading-relaxed whitespace-pre-line",
          style: { fontFamily: "'Tajawal', sans-serif" }
        }, message),
        React.createElement('div', {
          className: "flex gap-3 mt-6" + (type === 'alert' ? " justify-center" : "")
        },
          type === 'confirm' && React.createElement('button', {
            onClick: () => { onConfirm(); onCancel(); },
            className: "flex-1 py-3 bg-red-600 text-white rounded-lg font-bold hover:bg-red-700 transition-colors"
          }, confirmText || "تأكيد"),
          type === 'confirm' && React.createElement('button', {
            onClick: onCancel,
            className: "flex-1 py-3 bg-slate-100 text-slate-700 rounded-lg font-bold hover:bg-slate-200 transition-colors"
          }, cancelText || "إلغاء"),
          type === 'alert' && React.createElement('button', {
            onClick: () => { onConfirm(); onCancel(); },
            className: "py-3 px-10 text-white rounded-lg font-bold hover:opacity-90 transition-opacity",
            style: { backgroundColor: siteColor }
          }, confirmText || "حسناً")
        )
      )
    )
  );
}

function App() {
  const [user, setUser] = useState(null);
  const [isAdmin, setIsAdmin] = useState(false);
  const [showLanding, setShowLanding] = useState(true);
  const [activeTab, setActiveTab] = useState(() => getHash());
  const [darkMode, setDarkMode] = useState(() => {
    const saved = localStorage.getItem('darkMode');
    return saved === 'true';
  });
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [showUploadModal, setShowUploadModal] = useState(false);
  const [showSettingsModal, setShowSettingsModal] = useState(false);
  const [editingReport, setEditingReport] = useState(null);
  const [siteSettings, setSiteSettings] = useState({ siteTitle: 'منصة إدارة الأنشطة', heroTitle: 'مرحباً بكم في منصة إدارة الأنشطة', primaryColor: '#3b82f6', logoUrl: '', siteUrl: '', address: '', phone: '', bankAccounts: '', footerEnabled: true });
  const [reports, setReports] = useState([]);
  const [metadata, setMetadata] = useState({ targetAudiences: [], programs: [], activityNames: [] });
  const [featuredActivities, setFeaturedActivities] = useState([]);
  const [featuredLoaded, setFeaturedLoaded] = useState(false);
  const [programs, setPrograms] = useState([]);
  const [programsLoaded, setProgramsLoaded] = useState(false);
  const [showFeaturedModal, setShowFeaturedModal] = useState(false);
  const [editingFeatured, setEditingFeatured] = useState(null);
  const [selectedFeatured, setSelectedFeatured] = useState(null);
  const [showProgramsModal, setShowProgramsModal] = useState(false);
  const [editingProgram, setEditingProgram] = useState(null);
  const [selectedProgram, setSelectedProgram] = useState(null);
  const [expandedReports, setExpandedReports] = useState({});
  const [showAccountsModal, setShowAccountsModal] = useState(false);
  const [adminUsers, setAdminUsers] = useState([]);
  const [userRole, setUserRole] = useState(null);
  const [currentUsername, setCurrentUsername] = useState(null);
  const [isCreating, setIsCreating] = useState(false);
  const [isDeleting, setIsDeleting] = useState(null);
  const [modalConfig, setModalConfig] = useState(null);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleHash = () => setActiveTab(getHash());
    window.addEventListener('hashchange', handleHash);
    return () => window.removeEventListener('hashchange', handleHash);
  }, []);

  useEffect(() => {
    const checkAdmin = async () => {
      const { data: { session } } = await supabase.auth.getSession();
      if (session || sessionStorage.getItem('isAdminLogged') === 'true') {
        setIsAdmin(true);
        setUser(session?.user || true);
        setUserRole(session?.user?.user_metadata?.role || null);
        if (session?.user?.email) {
          const { data } = await supabase.from('admin_profiles').select('username').eq('email', session.user.email).maybeSingle();
          setCurrentUsername(data?.username || session.user.email.split('@')[0]);
        }
      }
    };
    checkAdmin();
    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user || null);
      if (session || sessionStorage.getItem('isAdminLogged') === 'true') {
        setIsAdmin(true);
        setUserRole(session?.user?.user_metadata?.role || null);
        if (session?.user?.email) {
          supabase.from('admin_profiles').select('username').eq('email', session.user.email).maybeSingle().then(({ data }) => {
            setCurrentUsername(data?.username || session.user.email.split('@')[0]);
          });
        } else {
          setCurrentUsername(null);
        }
      } else {
        setIsAdmin(false);
        setUserRole(null);
        setCurrentUsername(null);
      }
    });
    return () => subscription.unsubscribe();
  }, []);

  
  const showConfirm = (title, message, onConfirm, confirmText, cancelText) => {
    setModalConfig({ type: 'confirm', title, message, onConfirm, confirmText, cancelText });
  };

  const showAlert = (title, message, confirmText) => {
    setModalConfig({
      type: 'alert', title, message,
      onConfirm: () => {},
      confirmText: confirmText || "حسناً"
    });
  };

  useEffect(() => {
    if (siteSettings.logoUrl) {
      let favicon = document.querySelector("link[rel~='icon']");
      if (!favicon) {
        favicon = document.createElement('link');
        favicon.rel = 'icon';
        document.head.appendChild(favicon);
      }
      favicon.href = siteSettings.logoUrl;
    }
  }, [siteSettings.logoUrl]);

  useEffect(() => {
    const fetchReports = async () => {
      const { data, error } = await supabase
        .from('reports')
        .select('id, date, program, target_audience, beneficiaries_count, image_url, activities, featured_activity_id, linked_program_id, deletion_status, created_at, updated_at')
        .order('deletion_status', { ascending: true }).order('date', { ascending: false });
      if (!error && data) setReports(data);
    };
    const fetchSettings = async () => {
      const { data: metadataData } = await supabase
        .from('settings')
        .select('data')
        .eq('id', 'metadata')
        .single();
      if (metadataData?.data) setMetadata(metadataData.data);
      const { data: siteData } = await supabase
        .from('settings')
        .select('data')
        .eq('id', 'site')
        .single();
      if (siteData?.data) setSiteSettings(siteData.data);
    };
    const fetchFeatured = async () => {
      const { data, error } = await supabase
        .from('featured_activities')
        .select('id, title, program, target_audience, description, images, videos, is_pinned, created_at')
        .order('is_pinned', { ascending: false })
        .order('created_at', { ascending: false });
      if (!error && data) {
        setFeaturedActivities(data);
        setFeaturedLoaded(true);
      } else {
        setFeaturedLoaded(true);
      }
    };
    const fetchPrograms = async () => {
      const { data, error } = await supabase
        .from('programs')
        .select('id, title, description, target_audience, objectives, activities, execution_scope, images, videos, is_pinned, created_at')
        .order('is_pinned', { ascending: false })
        .order('created_at', { ascending: false });
      if (!error && data) {
        setPrograms(data);
        setProgramsLoaded(true);
      } else {
        setProgramsLoaded(true);
      }
    };
    fetchReports();
    fetchSettings();
    fetchFeatured();
    fetchPrograms();
    const reportsChannel = supabase
      .channel('reports-changes')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'reports' }, () => { fetchReports(); })
      .subscribe();
    const settingsChannel = supabase
      .channel('settings-changes')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'settings' }, () => { fetchSettings(); })
      .subscribe();
    const featuredChannel = supabase
      .channel('featured-changes')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'featured_activities' }, () => { fetchFeatured(); })
      .subscribe();
    const programsChannel = supabase
      .channel('programs-changes')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'programs' }, () => { fetchPrograms(); })
      .subscribe();
    return () => {
      supabase.removeChannel(reportsChannel);
      supabase.removeChannel(settingsChannel);
      supabase.removeChannel(featuredChannel);
      supabase.removeChannel(programsChannel);
    };
  }, []);

  useEffect(() => {
    if (darkMode) {
      document.body.classList.add('dark');
    } else {
      document.body.classList.remove('dark');
    }
    localStorage.setItem('darkMode', darkMode);
  }, [darkMode]);

  useEffect(() => {
    if (showLanding) {
      document.body.classList.add('landing-mode');
    } else {
      document.body.classList.remove('landing-mode');
    }
  }, [showLanding]);

  useEffect(() => {
    if (!featuredLoaded) return;
    const hash = window.location.hash;
    const match = hash.match(/^#\/featured\/(.+)$/);
    if (match) {
      const activityId = match[1];
      setActiveTab('featured');
      const activity = featuredActivities.find(a => a.id === activityId);
      if (activity) {
        setSelectedFeatured(activity);
      } else {
        showAlert('غير موجود', 'هذا النشاط غير موجود أو تم حذفه');
        window.history.pushState(null, '', '/');
      }
    }
  }, [featuredLoaded, featuredActivities]);

  useEffect(() => {
    if (!programsLoaded) return;
    const hash = window.location.hash;
    const match = hash.match(/^#\/programs\/(.+)$/);
    if (match) {
      const programId = match[1];
      setActiveTab('programs');
      const program = programs.find(a => a.id === programId);
      if (program) {
        setSelectedProgram(program);
      } else {
        showAlert('غير موجود', 'هذا البرنامج غير موجود أو تم حذفه');
        window.history.pushState(null, '', '/');
      }
    }
  }, [programsLoaded, programs]);

  if (showLanding) {
    return React.createElement('div', {
      className: "min-h-screen flex items-center justify-center p-4",
      style: {
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #3b82f6 100%)'
      }
    },
      React.createElement('div', {
        className: "bg-white/95 backdrop-blur-lg rounded-3xl shadow-2xl p-8 sm:p-12 max-w-lg w-full text-center animate-fade-in",
        style: {
          animation: 'fadeInUp 0.8s ease-out'
        }
      },
        siteSettings.logoUrl
          ? React.createElement('img', {
              src: siteSettings.logoUrl,
              alt: "شعار الجمعية",
              className: "h-20 w-20 object-contain rounded-xl mx-auto mb-6"
            })
          : React.createElement('div', {
              className: "h-20 w-20 rounded-xl mx-auto mb-6 flex items-center justify-center",
              style: { backgroundColor: siteSettings.primaryColor || '#3b82f6' }
            },
              React.createElement(Icon, { name: "LayoutDashboard", className: "h-10 w-10 text-white" })
            ),
        React.createElement('h1', {
          className: "text-3xl sm:text-4xl font-black text-slate-900 mb-3"
        }, siteSettings.siteTitle || 'منصة إدارة الأنشطة'),
        React.createElement('p', {
          className: "text-lg text-slate-600 mb-8 leading-relaxed"
        }, siteSettings.heroTitle || 'مرحباً بكم في منصة إدارة التقارير والأنشطة'),
        React.createElement('button', {
          onClick: () => setShowLanding(false),
          className: "w-full py-4 px-8 rounded-xl text-white font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] active:scale-95",
          style: { backgroundColor: siteSettings.primaryColor || '#3b82f6' }
        },
          React.createElement('span', null, 'الدخول إلى منصة عرض التقارير')
        ),
        React.createElement('div', { className: "mt-6 pt-6 border-t border-slate-200" },
          React.createElement('a', {
            href: "https://wa.me/966549285479",
            target: "_blank",
            rel: "noopener noreferrer",
            className: "flex items-center justify-center gap-3 w-full py-3 px-6 rounded-xl bg-green-500 text-white font-semibold hover:bg-green-600 transition-all duration-300 hover:scale-[1.02] active:scale-95"
          },
            React.createElement('svg', {
              className: "h-5 w-5",
              viewBox: "0 0 24 24",
              fill: "currentColor"
            },
              React.createElement('path', {
                d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"
              })
            ),
            React.createElement('span', { className: "text-sm" }, 'للحصول على منصة تقارير خاصة بمنشأتكم تواصلوا معنا')
          )
        )
      )
    );
  }

  const handleSaveSettings = async (newSettings) => {
    try {
      const { error } = await supabase
        .from('settings')
        .upsert({ id: 'site', data: newSettings }, { onConflict: 'id' });
      if (error) throw error;
      setSiteSettings(newSettings);
      setShowSettingsModal(false);
      showAlert('تم الحفظ', 'تم حفظ الإعدادات بنجاح!');
    } catch (error) {
      showAlert('خطأ', 'حدث خطأ في حفظ الإعدادات');
    }
  };

  const handleDeleteReport = async (reportId) => {
    showConfirm('تأكيد الحذف', 'هل أنت متأكد من حذف هذا التقرير؟', async () => {
    try {
      const { error } = await supabase.from('reports').delete().eq('id', reportId);
      if (error) throw error;
      showAlert('تم الحذف', 'تم حذف التقرير بنجاح!');
    } catch (error) {
      showAlert('خطأ', 'حدث خطأ في حذف التقرير');
    }
  }, 'نعم، احذف');
  };

  const handleRequestDeleteReport = async (reportId) => {
    showConfirm('طلب حذف', 'تأكد من إضافة التقرير الصحيح!. وستراجع الإدارة طلب حذف هذا التقرير', async () => {
    try {
      const { error } = await supabase.from('reports').update({ deletion_status: 'pending_delete' }).eq('id', reportId);
      if (error) throw error;
      showAlert('تم الإرسال', 'تم إرسال طلب الحذف بنجاح');
    } catch (error) {
      showAlert('خطأ', 'خطأ في إرسال طلب الحذف');
    }
  }, 'إرسال الطلب');
  };

  const handleConfirmDelete = async (reportId) => {
    showConfirm('تأكيد الحذف', 'تأكيد حذف هذا التقرير نهائياً؟', async () => {
    try {
      const { error } = await supabase.from('reports').delete().eq('id', reportId);
      if (error) throw error;
      showAlert('تم الحذف', 'تم حذف التقرير بنجاح');
    } catch (error) {
      showAlert('خطأ', 'خطأ في حذف التقرير');
    }
  }, 'نعم، احذف نهائياً');
  };

  const handleRejectDelete = async (reportId) => {
    try {
      const { error } = await supabase.from('reports').update({ deletion_status: 'active' }).eq('id', reportId);
      if (error) throw error;
      showAlert('تم الرفض', 'تم رفض طلب الحذف');
    } catch (error) { showAlert('خطأ', 'خطأ في رفض الطلب'); }
  };

  const handleEditReport = (report) => {
    setEditingReport(report);
    setShowUploadModal(true);
  };

  const handleDeleteFeatured = async (id) => {
    showConfirm('تأكيد الحذف', 'هل أنت متأكد من حذف هذا النشاط؟', async () => { try { const { error } = await supabase.from('featured_activities').delete().eq('id', id); if (error) throw error; } catch (error) { showAlert('خطأ', 'خطأ في الحذف'); } }, 'نعم، احذف');
  };

  const handleDeleteProgram = async (id) => {
    showConfirm('تأكيد الحذف', 'هل أنت متأكد من حذف هذا البرنامج؟', async () => { try { const { error } = await supabase.from('programs').delete().eq('id', id); if (error) throw error; } catch (error) { showAlert('خطأ', 'خطأ في الحذف'); } }, 'نعم، احذف');
  };

  const handleTogglePin = async (id, currentPinned) => {
    try {
      const { error } = await supabase
        .from('featured_activities')
        .update({ is_pinned: !currentPinned })
        .eq('id', id);
      if (error) throw error;
    } catch (error) { showAlert('خطأ', 'خطأ في التثبيت'); }
  };

  const handleToggleProgramPin = async (id, currentPinned) => {
    try {
      const { error } = await supabase
        .from('programs')
        .update({ is_pinned: !currentPinned })
        .eq('id', id);
      if (error) throw error;
    } catch (error) { showAlert('خطأ', 'خطأ في التثبيت'); }
  };

  const handleDeleteMetadata = async (type, value) => {
    showConfirm('تأكيد الحذف', `هل أنت متأكد من حذف "${value}"؟`, async () => { try { const currentMeta = metadata[type] || []; const newMeta = currentMeta.filter(item => item !== value); const { error } = await supabase.from('settings').upsert({ id: 'metadata', data: { ...metadata, [type]: newMeta } }, { onConflict: 'id' }); if (error) throw error; } catch (error) { showAlert('خطأ', 'حدث خطأ في الحذف'); } }, 'نعم، احذف');
    try {
      const currentMeta = metadata[type] || [];
      const newMeta = currentMeta.filter(item => item !== value);
      const { error } = await supabase
        .from('settings')
        .upsert({ id: 'metadata', data: { ...metadata, [type]: newMeta } }, { onConflict: 'id' });
      if (error) throw error;
    } catch (error) {
      showAlert('خطأ', 'حدث خطأ في الحذف');
    }
  };

  const handleLogin = async (emailOrUsername, password) => {
    let loginEmail = emailOrUsername.trim();
    if (!loginEmail.includes('@')) {
      const { data, error } = await supabase.rpc('get_admin_email', { input_username: loginEmail });
      if (error || !data) {
        showAlert('خطأ في الدخول', 'اسم المستخدم غير موجود');
        return;
      }
      loginEmail = data;
    }
    try {
      const { data, error } = await supabase.auth.signInWithPassword({ email: loginEmail, password });
      if (error) throw error;
      setIsAdmin(true);
      setUser(data?.user || true);
      setUserRole(data?.user?.user_metadata?.role || null);
      sessionStorage.setItem('isAdminLogged', 'true');
      setShowLoginModal(false);
      setModalConfig(null);
    } catch (error) {
      const msg = error.message || '';
      if (msg.includes('Invalid login credentials')) {
        showAlert('خطأ في الدخول', 'كلمة المرور غير صحيحة');
      } else {
        showAlert('خطأ', 'خطأ: ' + msg);
      }
    }
  };

  const handleLogout = async () => {
    try { await supabase.auth.signOut(); } catch (error) {}
    setIsAdmin(false);
    setUser(null);
    sessionStorage.removeItem('isAdminLogged');
  };

  const handleTabChange = (tab) => {
    window.location.hash = '#/' + tab;
    setActiveTab(tab);
  };

  const toggleReportDetails = (id) => {
    setExpandedReports(prev => ({...prev, [id]: !prev[id]}));
  };

  const fetchAdminUsers = async () => {
    const { data } = await supabase
      .from('admin_profiles')
      .select('*')
      .order('created_at', { ascending: false });
    if (data) setAdminUsers(data);
  };

  const handleCreateUser = async (email, password, role, username) => {
    setIsCreating(true);
    try {
      const { data, error } = await supabaseAuth.auth.signUp({
        email: email,
        password: password,
        options: {
          data: { role: role },
          emailRedirectTo: window.location.origin
        }
      });
      if (error) throw error;
      const { error: profileError } = await supabase
        .from('admin_profiles')
        .insert({ id: data.user.id, email: email, username: username || null, role: role });
      if (profileError) throw profileError;
      await fetchAdminUsers();
      showAlert('تم الإنشاء', 'تم إنشاء الحساب بنجاح');
      setTimeout(() => setModalConfig(null), 1500);
    } catch (err) {
      showAlert('خطأ', 'خطأ: ' + err.message);
    } finally {
      setIsCreating(false);
    }
  };

  const handleDeleteUser = async (userId) => {
    showConfirm('تأكيد الحذف', 'هل أنت متأكد من حذف هذا الحساب؟', async () => {
      setIsDeleting(userId);
      try {
        const { error } = await supabase.from('admin_profiles').delete().eq('id', userId);
        if (error) throw error;
        await fetchAdminUsers();
        showAlert('تم الحذف', 'تم حذف الحساب بنجاح');
      } catch (err) {
        showAlert('خطأ', 'خطأ: ' + err.message);
      } finally {
        setIsDeleting(null);
      }
    }, 'نعم، احذف');
  };

  return React.createElement('div', {
    className: "min-h-screen bg-slate-50 text-slate-800 print:bg-white",
    dir: "rtl",
    style: { '--site-color': siteSettings.primaryColor || '#3b82f6' }
  },
    React.createElement('header', { className: "bg-white shadow-sm sticky top-0 z-30 print:hidden mobile-header sm:py-4" },
      React.createElement('div', { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" },
        React.createElement('div', { className: "flex justify-between items-center py-4" },
          React.createElement('div', { className: "flex items-center gap-3" },
            siteSettings.logoUrl
              ? React.createElement('img', { src: siteSettings.logoUrl, alt: "شعار الجمعية", className: "h-12 w-12 object-contain rounded-lg" })
              : React.createElement('div', { className: "p-2 rounded-lg", style: { backgroundColor: siteSettings.primaryColor } },
                  React.createElement(Icon, { name: "LayoutDashboard", className: "h-8 w-8 text-white" })
                ),
            React.createElement('h1', { className: "text-xl sm:text-2xl font-bold text-slate-900 hidden sm:block" }, siteSettings.siteTitle || 'منصة إدارة الأنشطة')
          ),
          React.createElement('div', { className: "flex items-center gap-2 sm:gap-4" },
            React.createElement('button', {
              onClick: () => setDarkMode(!darkMode),
              className: "p-2 rounded-lg hover:bg-slate-100 transition-colors hidden sm:flex",
              title: darkMode ? "الوضع الفاتح" : "الوضع الليلي"
            },
              darkMode
                ? React.createElement(Icon, { name: "Sun", className: "h-5 w-5 text-amber-500" })
                : React.createElement(Icon, { name: "Moon", className: "h-5 w-5 text-slate-600" })
            ),
            React.createElement('button', {
              onClick: () => setMobileMenuOpen(!mobileMenuOpen),
              className: "p-3 rounded-lg hover:bg-slate-100 transition-colors mobile-menu-btn"
            },
              React.createElement('svg', { className: "h-7 w-7 text-slate-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
                React.createElement('path', { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: mobileMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16" })
              )
            ),
            isAdmin && React.createElement(React.Fragment, null,
              React.createElement('button', {
                onClick: () => setShowUploadModal(true),
                className: "hover:opacity-90 text-white px-3 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 text-sm sm:text-base",
                style: { backgroundColor: siteSettings.primaryColor }
              }, React.createElement(Icon, { name: "Upload", className: "h-4 w-4" }), React.createElement('span', { className: "hidden sm:inline" }, "رفع تقرير")),
              userRole === 'super_admin' && React.createElement('button', {
                onClick: () => setShowSettingsModal(true),
                className: "hover:opacity-90 text-white px-3 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 text-sm sm:text-base",
                style: { backgroundColor: siteSettings.primaryColor }
              }, React.createElement(Icon, { name: "Settings", className: "h-4 w-4" }), React.createElement('span', { className: "hidden sm:inline" }, "الإعدادات")),
              userRole === 'super_admin' && React.createElement('button', {
                onClick: () => { setShowAccountsModal(true); fetchAdminUsers(); },
                className: "hover:opacity-90 text-white px-3 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 text-sm sm:text-base",
                style: { backgroundColor: siteSettings.primaryColor }
              }, React.createElement(Icon, { name: "Users", className: "h-4 w-4" }), React.createElement('span', { className: "hidden sm:inline" }, "إدارة الحسابات"))
            ),
            isAdmin
              ? React.createElement(React.Fragment, null,
                  React.createElement('div', {
                    className: "flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium",
                    style: { backgroundColor: `${siteSettings.primaryColor}15`, color: siteSettings.primaryColor }
                  },
                    React.createElement('div', {
                      className: "h-7 w-7 rounded-full flex items-center justify-center text-white font-bold text-xs",
                      style: { backgroundColor: siteSettings.primaryColor }
                    }, (currentUsername || '?').charAt(0).toUpperCase()),
                    React.createElement('span', { className: "hidden sm:inline" }, currentUsername)
                  ),
                  React.createElement('button', {
                    onClick: handleLogout,
                    className: "text-red-600 hover:bg-red-50 p-2 rounded-lg transition-colors flex items-center gap-2 font-medium"
                  }, React.createElement(Icon, { name: "LogOut", className: "h-5 w-5" }), React.createElement('span', { className: "hidden sm:inline" }, "خروج"))
                )
              : React.createElement('button', {
                  onClick: () => setShowLoginModal(true),
                  className: "text-slate-600 hover:bg-slate-100 p-2 rounded-lg transition-colors flex items-center gap-2 font-medium hidden sm:flex"
                }, React.createElement(Icon, { name: "Lock", className: "h-5 w-5" }), React.createElement('span', { className: "hidden sm:inline" }, "دخول الإدارة"))
          )
        ),
        React.createElement('nav', { className: "flex space-x-reverse space-x-2 sm:space-x-6 overflow-x-auto pb-2 border-t border-slate-50 header-nav-desktop" },
          React.createElement(TabButton, { active: activeTab === 'reports', onClick: () => handleTabChange('reports'), icon: "List", text: "التقارير", siteColor: siteSettings.primaryColor }),
          React.createElement(TabButton, { active: activeTab === 'detailedTable', onClick: () => handleTabChange('detailedTable'), icon: "Table", text: "الجدول المفصل", siteColor: siteSettings.primaryColor }),
          React.createElement(TabButton, { active: activeTab === 'monthlyTable', onClick: () => handleTabChange('monthlyTable'), icon: "CalendarDays", text: "التقرير الشهري", siteColor: siteSettings.primaryColor }),
          React.createElement(TabButton, { active: activeTab === 'stats', onClick: () => handleTabChange('stats'), icon: "LayoutDashboard", text: "إحصائيات", siteColor: siteSettings.primaryColor }),
          React.createElement(TabButton, { active: activeTab === 'featured', onClick: () => handleTabChange('featured'), icon: "Star", text: "الأنشطة المميزة", siteColor: siteSettings.primaryColor }),
          React.createElement(TabButton, { active: activeTab === 'programs', onClick: () => handleTabChange('programs'), icon: "LayoutDashboard", text: "برامج الجمعية", siteColor: siteSettings.primaryColor })
        )
      )
    ),
    React.createElement('main', { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pb-8" },
      activeTab === 'reports' && React.createElement(ReportsPage, { reports, isAdmin, userRole, onEdit: handleEditReport, onDelete: handleDeleteReport, onRequestDelete: handleRequestDeleteReport, onConfirmDelete: handleConfirmDelete, onRejectDelete: handleRejectDelete, siteColor: siteSettings.primaryColor, logoUrl: siteSettings.logoUrl, featuredActivities, programs, onSelectFeatured: (id) => { handleTabChange('featured'); window.location.hash = '#/featured/' + id; setTimeout(() => { const act = featuredActivities.find(a => a.id === id); if (act) setSelectedFeatured(act); }, 300); }, onSelectProgram: (id) => { handleTabChange('programs'); window.location.hash = '#/programs/' + id; setTimeout(() => { const prog = programs.find(p => p.id === id); if (prog) setSelectedProgram(prog); }, 300); }, expandedReports, toggleReportDetails }),
      activeTab === 'detailedTable' && React.createElement(DetailedTablePage, { reports, siteColor: siteSettings.primaryColor }),
      activeTab === 'monthlyTable' && React.createElement(MonthlyTablePage, { reports, siteColor: siteSettings.primaryColor }),
      activeTab === 'stats' && React.createElement(StatsPage, { reports, siteColor: siteSettings.primaryColor }),
      activeTab === 'featured' && React.createElement(FeaturedActivitiesPage, { activities: featuredActivities, isAdmin, userRole, onAdd: () => { setEditingFeatured(null); setShowFeaturedModal(true); }, onEdit: (act) => { setEditingFeatured(act); setShowFeaturedModal(true); }, onDelete: handleDeleteFeatured, onPin: handleTogglePin, onSelect: setSelectedFeatured, siteColor: siteSettings.primaryColor }),
      activeTab === 'programs' && React.createElement(ProgramsPage, { activities: programs, isAdmin, userRole, onAdd: () => { setEditingProgram(null); setShowProgramsModal(true); }, onEdit: (act) => { setEditingProgram(act); setShowProgramsModal(true); }, onDelete: handleDeleteProgram, onPin: handleToggleProgramPin, onSelect: setSelectedProgram, siteColor: siteSettings.primaryColor })
    ),
    siteSettings.footerEnabled && (siteSettings.siteUrl || siteSettings.address || siteSettings.phone || siteSettings.bankAccounts) && React.createElement('footer', { className: "site-footer print:hidden", style: { '--footer-color': siteSettings.primaryColor } },
      React.createElement('div', { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" },
        React.createElement('div', { className: "flex flex-wrap justify-center items-start gap-4 md:gap-6 lg:gap-8" },
          siteSettings.address && React.createElement('div', { className: "flex items-center gap-3 bg-white/90 px-4 py-2.5 rounded-xl shadow-sm border border-slate-200/50" },
            React.createElement('div', { className: "w-10 h-10 rounded-lg flex items-center justify-center", style: { backgroundColor: siteSettings.primaryColor + '20' } },
              React.createElement(Icon, { name: "MapPin", className: "h-5 w-5", style: { color: siteSettings.primaryColor } })
            ),
            React.createElement('div', { className: "flex flex-col" },
              React.createElement('span', { className: "text-xs font-bold text-slate-500 uppercase tracking-wide" }, "العنوان"),
              React.createElement('a', { href: siteSettings.address, target: "_blank", rel: "noopener noreferrer", className: "text-sm font-semibold text-slate-800 hover:underline", style: { color: siteSettings.primaryColor } }, "فتح على الخريطة")
            )
          ),
          siteSettings.phone && React.createElement('div', { className: "flex items-center gap-3 bg-white/90 px-4 py-2.5 rounded-xl shadow-sm border border-slate-200/50" },
            React.createElement('div', { className: "w-10 h-10 rounded-lg flex items-center justify-center", style: { backgroundColor: siteSettings.primaryColor + '20' } },
              React.createElement(Icon, { name: "Phone", className: "h-5 w-5", style: { color: siteSettings.primaryColor } })
            ),
            React.createElement('div', { className: "flex flex-col" },
              React.createElement('span', { className: "text-xs font-bold text-slate-500 uppercase tracking-wide" }, "التواصل"),
              React.createElement('a', { href: "tel:" + siteSettings.phone.replace(/\s/g, ''), className: "text-sm font-semibold text-slate-800", style: { color: siteSettings.primaryColor } }, siteSettings.phone)
            )
          ),
          siteSettings.siteUrl && React.createElement('div', { className: "flex items-center gap-3 bg-white/90 px-4 py-2.5 rounded-xl shadow-sm border border-slate-200/50" },
            React.createElement('div', { className: "w-10 h-10 rounded-lg flex items-center justify-center", style: { backgroundColor: siteSettings.primaryColor + '20' } },
              React.createElement(Icon, { name: "Globe", className: "h-5 w-5", style: { color: siteSettings.primaryColor } })
            ),
            React.createElement('div', { className: "flex flex-col" },
              React.createElement('span', { className: "text-xs font-bold text-slate-500 uppercase tracking-wide" }, "موقع الجمعية الرسمي"),
              React.createElement('a', { href: siteSettings.siteUrl, target: "_blank", rel: "noopener noreferrer", className: "text-sm font-semibold text-slate-800 hover:underline", style: { color: siteSettings.primaryColor } }, "الزيارة")
            )
          ),
          siteSettings.bankAccounts && React.createElement('div', { className: "flex items-start gap-3 bg-white/90 px-4 py-2.5 rounded-xl shadow-sm border border-slate-200/50 min-w-[200px]" },
            React.createElement('div', { className: "w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0", style: { backgroundColor: siteSettings.primaryColor + '20' } },
              React.createElement(Icon, { name: "CreditCard", className: "h-5 w-5", style: { color: siteSettings.primaryColor } })
            ),
            React.createElement('div', { className: "flex flex-col gap-1" },
              React.createElement('span', { className: "text-xs font-bold text-slate-500 uppercase tracking-wide" }, "للدعم"),
              React.createElement('div', { className: "flex flex-col gap-0.5" },
                siteSettings.bankAccounts.split('\n').map((line, i) => {
                  return React.createElement('button', {
                    key: i,
                    onClick: () => { navigator.clipboard.writeText(line.replace(/^[^\w]+/, '')); },
                    className: "text-sm font-semibold text-slate-800 hover:underline text-right truncate max-w-[180px] cursor-pointer",
                    title: "اضغط للنسخ",
                    style: { color: siteSettings.primaryColor }
                  }, line);
                })
              )
            )
          )
        )
      )
    ),
    React.createElement('div', { className: "mobile-menu-wrapper" + (mobileMenuOpen ? " active" : "") },
      mobileMenuOpen && React.createElement('div', { className: "mobile-menu-overlay", onClick: () => setMobileMenuOpen(false) }),
      mobileMenuOpen && React.createElement('div', { className: "mobile-menu-dropdown" },
        React.createElement('div', { className: "mobile-menu-header" },
          React.createElement('span', { className: "font-bold text-slate-800" }, "القائمة"),
          React.createElement('button', { onClick: () => setMobileMenuOpen(false), className: "p-2" },
            React.createElement('svg', { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
              React.createElement('path', { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" })
            )
          )
        ),
        React.createElement('button', {
          className: `mobile-menu-item ${activeTab === 'reports' ? 'active' : ''}`,
          onClick: () => handleTabChange('reports')
        }, React.createElement(Icon, { name: "List", className: "h-5 w-5" }), "التقارير"),
        React.createElement('button', {
          className: `mobile-menu-item ${activeTab === 'detailedTable' || activeTab === 'monthlyTable' ? 'active' : ''}`,
          onClick: () => handleTabChange('detailedTable')
        }, React.createElement(Icon, { name: "Table", className: "h-5 w-5" }), "الجدول"),
        React.createElement('button', {
          className: `mobile-menu-item ${activeTab === 'stats' ? 'active' : ''}`,
          onClick: () => handleTabChange('stats')
        }, React.createElement(Icon, { name: "LayoutDashboard", className: "h-5 w-5" }), "إحصائيات"),
        React.createElement('button', {
          className: `mobile-menu-item ${activeTab === 'programs' ? 'active' : ''}`,
          onClick: () => handleTabChange('programs')
        }, React.createElement(Icon, { name: "LayoutDashboard", className: "h-5 w-5" }), "برامج الجمعية"),
        React.createElement('button', {
          className: `mobile-menu-item ${activeTab === 'featured' ? 'active' : ''}`,
          onClick: () => handleTabChange('featured')
        }, React.createElement(Icon, { name: "Star", className: "h-5 w-5" }), "الأنشطة المميزة"),
        isAdmin && React.createElement(React.Fragment, null,
          React.createElement('div', { className: "mobile-menu-divider" }),
          React.createElement('button', {
            className: "mobile-menu-item text-blue-600",
            onClick: () => { setShowUploadModal(true); setMobileMenuOpen(false); }
          }, React.createElement(Icon, { name: "Upload", className: "h-5 w-5" }), "رفع تقرير"),
          userRole === 'super_admin' && React.createElement('button', {
            className: "mobile-menu-item text-blue-600",
            onClick: () => { setShowSettingsModal(true); setMobileMenuOpen(false); }
          }, React.createElement(Icon, { name: "Settings", className: "h-5 w-5" }), "الإعدادات"),
          userRole === 'super_admin' && React.createElement('button', {
            className: "mobile-menu-item text-blue-600",
            onClick: () => { setShowAccountsModal(true); fetchAdminUsers(); setMobileMenuOpen(false); }
          }, React.createElement(Icon, { name: "Users", className: "h-5 w-5" }), "إدارة الحسابات"),
          React.createElement('button', {
            className: "mobile-menu-item text-red-600",
            onClick: () => { handleLogout(); setMobileMenuOpen(false); }
          }, React.createElement(Icon, { name: "LogOut", className: "h-5 w-5" }), "خروج")
        ),
        !isAdmin && React.createElement('button', {
          className: "mobile-menu-item text-blue-600",
          onClick: () => { setShowLoginModal(true); setMobileMenuOpen(false); }
        }, React.createElement(Icon, { name: "Lock", className: "h-5 w-5" }), "دخول الإدارة"),
        React.createElement('div', { className: "mobile-menu-divider" }),
        React.createElement('button', {
          className: "mobile-menu-item",
          onClick: () => setDarkMode(!darkMode)
        },
          darkMode
            ? React.createElement(React.Fragment, null, React.createElement(Icon, { name: "Sun", className: "h-5 w-5" }), "الوضع الفاتح")
            : React.createElement(React.Fragment, null, React.createElement(Icon, { name: "Moon", className: "h-5 w-5" }), "الوضع الليلي")
        )
      )
    ),
    showLoginModal && React.createElement(LoginModal, { onClose: () => setShowLoginModal(false), onLogin: handleLogin, siteColor: siteSettings.primaryColor }),
    showUploadModal && isAdmin && React.createElement(UploadModal, { onShowAlert: showAlert,
      onClose: () => { setShowUploadModal(false); setEditingReport(null); },
      metadata, user, editingReport,
      onSave: () => { setShowUploadModal(false); setEditingReport(null); },
      siteColor: siteSettings.primaryColor,
      onDeleteTargetAudience: userRole === 'super_admin' ? (v) => handleDeleteMetadata('targetAudiences', v) : null,
      onDeleteProgram: userRole === 'super_admin' ? (v) => handleDeleteMetadata('programs', v) : null,
      onDeleteActivity: userRole === 'super_admin' ? (v) => handleDeleteMetadata('activityNames', v) : null,
      featuredActivities,
      programs
    }),
    showSettingsModal && isAdmin && React.createElement(SettingsModal, { onShowAlert: showAlert, onClose: () => setShowSettingsModal(false), settings: siteSettings, onSave: handleSaveSettings, siteColor: siteSettings.primaryColor }),
    showAccountsModal && userRole === 'super_admin' && React.createElement(AccountsManagementModal, { onShowAlert: showAlert, onClose: () => setShowAccountsModal(false), adminUsers, onCreateUser: handleCreateUser, onDeleteUser: handleDeleteUser, isCreating, isDeleting, currentUserId: user?.id, siteColor: siteSettings.primaryColor }),
    showFeaturedModal && isAdmin && React.createElement(FeaturedFormModal, { onShowAlert: showAlert, onClose: () => { setShowFeaturedModal(false); setEditingFeatured(null); }, editingActivity: editingFeatured, siteColor: siteSettings.primaryColor, metadata }),
    selectedFeatured && React.createElement(FeaturedDetailModal, { onShowAlert: showAlert, activity: selectedFeatured, onClose: () => { setSelectedFeatured(null); window.location.hash = '#/featured-activities'; }, siteColor: siteSettings.primaryColor }),
    showProgramsModal && isAdmin && React.createElement(ProgramFormModal, { onShowAlert: showAlert, onClose: () => { setShowProgramsModal(false); setEditingProgram(null); }, editingActivity: editingProgram, siteColor: siteSettings.primaryColor }),
    selectedProgram && React.createElement(ProgramDetailModal, { onShowAlert: showAlert, activity: selectedProgram, onClose: () => { setSelectedProgram(null); window.location.hash = '#/programs'; }, siteColor: siteSettings.primaryColor }),
    modalConfig && React.createElement(CustomModal, {
      title: modalConfig.title,
      message: modalConfig.message,
      type: modalConfig.type,
      onConfirm: modalConfig.onConfirm,
      onCancel: () => setModalConfig(null),
      confirmText: modalConfig.confirmText,
      cancelText: modalConfig.cancelText,
      siteColor: siteSettings.primaryColor
    })
  );
}

function TabButton({ active, icon, text, onClick, siteColor = '#3b82f6' }) {
  return React.createElement('button', {
    onClick,
    className: `flex items-center gap-2 px-4 py-3 font-semibold text-sm transition-all border-b-2 whitespace-nowrap ${active ? '' : 'border-transparent text-slate-500 hover:text-slate-800'}`,
    style: active ? { borderColor: siteColor, color: siteColor, backgroundColor: `${siteColor}15` } : {}
  }, React.createElement(Icon, { name: icon, className: "h-4 w-4" }), ' ', text);
}

function ReportsPage({ reports, isAdmin, userRole, onEdit, onDelete, onRequestDelete, onConfirmDelete, onRejectDelete, siteColor = '#3b82f6', logoUrl = '', featuredActivities = [], programs = [], onSelectFeatured, onSelectProgram, expandedReports = {}, toggleReportDetails }) {
  const [selectedActivity, setSelectedActivity] = useState(null);
  const [selectedImage, setSelectedImage] = useState(null);
  const [filterYear, setFilterYear] = useState('');
  const [filterMonth, setFilterMonth] = useState('');
  const [filterProgram, setFilterProgram] = useState('');
  const [filterCategory, setFilterCategory] = useState('');
  const [filterActivity, setFilterActivity] = useState('');

  const allYears = useMemo(() => [...new Set(reports.map(r => r.date?.substring(0, 4)).filter(Boolean))].sort().reverse(), [reports]);
  const allMonths = useMemo(() => {
    const months = new Set();
    reports.forEach(r => {
      const m = r.date?.substring(0, 7);
      if (m && (!filterYear || m.startsWith(filterYear))) months.add(m);
    });
    return [...months].sort();
  }, [reports, filterYear]);
  const allPrograms = useMemo(() => [...new Set(reports.map(r => r.program).filter(Boolean))].sort(), [reports]);
  const allCategories = useMemo(() => [...new Set(reports.map(r => r.target_audience).filter(Boolean))].sort(), [reports]);
  const allActivities = useMemo(() => {
    const acts = new Set();
    reports.forEach(r => r.activities?.forEach(a => acts.add(a.name)));
    return [...acts].sort();
  }, [reports]);

  const filteredReports = useMemo(() => {
    return [...reports]
      .filter(r => !filterYear || r.date?.startsWith(filterYear))
      .filter(r => !filterMonth || r.date?.startsWith(filterMonth))
      .filter(r => !filterProgram || r.program === filterProgram)
      .filter(r => !filterCategory || r.target_audience === filterCategory)
      .filter(r => !filterActivity || r.activities?.some(a => a.name === filterActivity))
      .sort((a, b) => new Date(b.date) - new Date(a.date));
  }, [reports, filterYear, filterMonth, filterProgram, filterCategory, filterActivity]);

  const hasActiveFilters = filterYear || filterMonth || filterProgram || filterCategory || filterActivity;

  if (reports.length === 0) return React.createElement(EmptyState, { icon: "FileText", text: "لا توجد تقارير حالياً" });

  const getReportImage = (report) => report.image_url || logoUrl;

  return React.createElement(React.Fragment, null,
    React.createElement('div', { className: "bg-white rounded-xl shadow-sm border border-slate-200 p-4 mb-6 print:hidden" },
      React.createElement('div', { className: "flex flex-wrap items-center gap-3" },
        React.createElement('span', { className: "text-sm font-bold text-slate-600" }, "تصفية:"),
        React.createElement('select', {
          value: filterYear,
          onChange: (e) => { setFilterYear(e.target.value); setFilterMonth(''); },
          className: "px-3 py-2 border rounded-lg text-sm min-w-[110px]"
        }, React.createElement('option', { value: "" }, "كل السنوات"), allYears.map(y => React.createElement('option', { key: y, value: y }, y))),
        React.createElement('select', {
          value: filterMonth,
          onChange: (e) => setFilterMonth(e.target.value),
          className: "px-3 py-2 border rounded-lg text-sm min-w-[140px]",
          disabled: !filterYear
        }, React.createElement('option', { value: "" }, "كل الشهور"), allMonths.map(m => {
          const [y, mo] = m.split('-');
          const monthNames = ['يناير','فبراير','مارس','أبريل','مايو','يونيو','يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'];
          return React.createElement('option', { key: m, value: m }, monthNames[parseInt(mo) - 1] + ' ' + y);
        })),
        React.createElement('select', {
          value: filterProgram,
          onChange: (e) => setFilterProgram(e.target.value),
          className: "px-3 py-2 border rounded-lg text-sm min-w-[140px]"
        }, React.createElement('option', { value: "" }, "كل البرامج"), allPrograms.map(p => React.createElement('option', { key: p, value: p }, p))),
        React.createElement('select', {
          value: filterCategory,
          onChange: (e) => setFilterCategory(e.target.value),
          className: "px-3 py-2 border rounded-lg text-sm min-w-[140px]"
        }, React.createElement('option', { value: "" }, "كل الفئات"), allCategories.map(c => React.createElement('option', { key: c, value: c }, c))),
        React.createElement('select', {
          value: filterActivity,
          onChange: (e) => setFilterActivity(e.target.value),
          className: "px-3 py-2 border rounded-lg text-sm min-w-[140px]"
        }, React.createElement('option', { value: "" }, "كل الأنشطة"), allActivities.map(a => React.createElement('option', { key: a, value: a }, a))),
        hasActiveFilters && React.createElement('button', {
          onClick: () => { setFilterYear(''); setFilterMonth(''); setFilterProgram(''); setFilterCategory(''); setFilterActivity(''); },
          className: "px-3 py-2 text-white rounded-lg text-sm hover:opacity-90",
          style: { backgroundColor: '#dc2626' }
        }, "إلغاء التصفية")
      ),
      hasActiveFilters && React.createElement('p', { className: "text-sm text-slate-500 mt-2" },
        "عرض ", React.createElement('span', { className: "font-bold", style: { color: siteColor } }, filteredReports.length),
        " من ", React.createElement('span', { className: "font-bold" }, reports.length), " تقرير"
      )
    ),
    filteredReports.length === 0
      ? React.createElement('div', { className: "bg-white rounded-3xl border-2 border-dashed border-slate-200 p-20 text-center text-slate-400" },
          React.createElement('p', { className: "text-lg font-bold" }, "لا توجد تقارير مطابقة للفلتر المحدد"))
      : React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 print:grid-cols-2" },
          filteredReports.map((report) =>
            React.createElement('div', { key: report.id, className: "bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-[1.02] print:shadow-none print:border-slate-300" + (report.deletion_status === 'pending_delete' ? ' border-yellow-400 border-2' : '') },
              report.deletion_status === 'pending_delete' && React.createElement('div', {
                className: "bg-yellow-400 text-black text-center py-1.5 text-xs font-bold flex items-center justify-center gap-1"
              }, "جاري مراجعة التقرير من قبل الإدارة⚠️"),
              React.createElement('div', { className: "relative print:hidden" },
                getReportImage(report)
                  ? React.createElement('div', {
                      className: "w-full h-56 cursor-pointer relative group",
                      onClick: () => setSelectedImage({ src: getReportImage(report), program: report.program })
                    },
                      React.createElement('img', { src: getReportImage(report), alt: report.program, className: "w-full h-full object-cover" }),
                      React.createElement('div', { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center" },
                        React.createElement(Icon, { name: "Image", className: "h-8 w-8 text-white opacity-0 group-hover:opacity-100 transition-opacity drop-shadow-lg" })
                      )
                    )
                  : React.createElement('div', { className: "w-full h-56 bg-slate-100 flex items-center justify-center text-slate-400" },
                      React.createElement(Icon, { name: "Image", className: "h-12 w-12 opacity-30" })
                    ),
                React.createElement('div', { className: "absolute bottom-2 left-2 text-white px-3 py-1 rounded-full text-xs font-bold shadow-lg", style: { backgroundColor: siteColor } },
                  (report.beneficiaries_count || 0) + " مستفيد"
                ),
                report.deletion_status === 'pending_delete' && userRole === 'super_admin' && React.createElement('div', { className: "absolute top-2 left-2 flex gap-1" },
                  React.createElement('button', {
                    onClick: () => onConfirmDelete(report.id),
                    className: "text-white p-2 rounded-lg hover:opacity-80",
                    style: { backgroundColor: '#dc2626' },
                    title: "تأكيد الحذف"
                  }, React.createElement(Icon, { name: "Trash2", className: "h-4 w-4" })),
                  React.createElement('button', {
                    onClick: () => onRejectDelete(report.id),
                    className: "text-white p-2 rounded-lg hover:opacity-80",
                    style: { backgroundColor: '#10b981' },
                    title: "رفض الطلب"
                  }, React.createElement(Icon, { name: "X", className: "h-4 w-4" }))
                ),
                report.deletion_status !== 'pending_delete' && userRole === 'super_admin' && React.createElement('div', { className: "absolute top-2 left-2 flex gap-1" },
                  React.createElement('button', {
                    onClick: () => onEdit(report),
                    className: "text-white p-2 rounded-lg hover:opacity-80",
                    style: { backgroundColor: '#f59e0b' },
                    title: "تعديل"
                  }, React.createElement(Icon, { name: "Edit", className: "h-4 w-4" })),
                  React.createElement('button', {
                    onClick: () => onDelete(report.id),
                    className: "text-white p-2 rounded-lg hover:opacity-80",
                    style: { backgroundColor: '#dc2626' },
                    title: "حذف"
                  }, React.createElement(Icon, { name: "Trash2", className: "h-4 w-4" }))
                ),
                report.deletion_status !== 'pending_delete' && isAdmin && userRole !== 'super_admin' && React.createElement('button', {
                  onClick: () => onRequestDelete(report.id),
                  className: "text-white p-2 rounded-lg hover:opacity-80",
                  style: { backgroundColor: '#f59e0b' },
                  title: "طلب حذف"
                }, React.createElement(Icon, { name: "Trash2", className: "h-4 w-4" }))
              ),
              React.createElement('div', { className: "p-5" },
                React.createElement('div', { className: "flex justify-between items-start mb-3" },
                  React.createElement('h3', { className: "text-lg font-bold text-slate-900" }, report.program),
                  React.createElement('span', { className: "text-xs font-medium text-slate-500 flex items-center gap-1" },
                    React.createElement(Icon, { name: "Calendar", className: "h-3 w-3" }), " " + report.date
                  )
                ),
                React.createElement('p', { className: "text-sm text-slate-600 mb-4 bg-slate-50 p-2 rounded-lg inline-block border border-slate-100" },
                  React.createElement(Icon, { name: "Users", className: "h-4 w-4", style: { color: siteColor } }),
                  " الفئة: ", React.createElement('span', { className: "font-bold text-slate-800" }, report.target_audience)
                ),
                React.createElement('button', {
                  onClick: (e) => { e.stopPropagation(); toggleReportDetails(report.id); },
                  className: "flex items-center justify-center w-full py-2 text-slate-500 hover:text-slate-800 border-t border-b border-slate-100 transition-colors mb-2"
                },
                  React.createElement('span', { className: "text-sm font-medium" },
                    expandedReports[report.id] ? 'إخفاء التفاصيل' : `عرض التفاصيل (${report.activities?.length || 0} أنشطة)`
                  ),
                  React.createElement(Icon, {
                    name: "ChevronDown",
                    className: `h-4 w-4 ml-1 transition-transform duration-300 ${expandedReports[report.id] ? 'rotate-180' : ''}`
                  })
                ),
                expandedReports[report.id] && React.createElement('div', { className: "space-y-2" },
                  report.activities?.map((act, idx) =>
                    React.createElement('div', {
                      key: idx,
                      className: "p-3 rounded-lg border-r-4 cursor-pointer hover:opacity-80 print:bg-white print:border-slate-400 transition-opacity",
                      style: { backgroundColor: `${siteColor}15`, borderColor: siteColor },
                      onClick: () => setSelectedActivity({ ...act, program: report.program, date: report.date })
                    },
                      React.createElement('div', { className: "flex justify-between items-start" },
                        React.createElement('div', { className: "font-bold text-sm print:text-black", style: { color: siteColor } }, act.name),
                        (act.beneficiariesCount || 0) > 0 && React.createElement('span', { className: "text-xs bg-white px-2 py-1 rounded-full", style: { color: siteColor } },
                          React.createElement(Icon, { name: "Users", className: "h-3 w-3" }), " " + act.beneficiariesCount
                        )
                      ),
                      act.description && React.createElement('p', { className: "text-xs text-slate-600 mt-1 leading-relaxed" }, act.description)
                    )
                  )
                )
              ),
              report.featured_activity_id && (() => {
                const linkedActivity = featuredActivities.find(a => a.id === report.featured_activity_id);
                if (!linkedActivity) return null;
                return React.createElement('div', { className: "mt-3 pt-3 border-t border-slate-100" },
                  React.createElement('button', {
                    onClick: (e) => { e.stopPropagation(); onSelectFeatured && onSelectFeatured(report.featured_activity_id); },
                    className: "flex items-center gap-2 text-white px-3 py-1.5 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity",
                    style: { backgroundColor: siteColor }
                  },
                    React.createElement(Icon, { name: "Star", className: "h-3 w-3" }),
                    " عرض تفاصيل النشاط"
                  )
                );
              })(),
              report.linked_program_id && (() => {
                const linkedProgram = programs.find(p => p.id === report.linked_program_id);
                if (!linkedProgram) return null;
                return React.createElement('div', { className: "mt-3 pt-3 border-t border-slate-100" },
                  React.createElement('button', {
                    onClick: (e) => { e.stopPropagation(); onSelectProgram && onSelectProgram(report.linked_program_id); },
                    className: "flex items-center gap-2 text-white px-3 py-1.5 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity",
                    style: { backgroundColor: siteColor }
                  },
                    React.createElement(Icon, { name: "LayoutDashboard", className: "h-3 w-3" }),
                    " عرض تفاصيل البرنامج"
                  )
                );
              })()
            )
          )
        ),
    selectedActivity && React.createElement(ActivityModal, { activity: selectedActivity, onClose: () => setSelectedActivity(null), siteColor, logoUrl }),
    selectedImage && React.createElement(ImageModal, { image: selectedImage, onClose: () => setSelectedImage(null) })
  );
}

function ActivityModal({ activity, onClose, siteColor, logoUrl }) {
  return React.createElement('div', {
    className: "fixed inset-0 bg-slate-900/80 backdrop-blur-sm flex justify-center items-center z-50 p-4",
    onClick: onClose
  },
    React.createElement('div', { className: "bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden", onClick: e => e.stopPropagation() },
      React.createElement('div', { className: "relative" },
        logoUrl && React.createElement('img', { src: logoUrl, alt: "شعار الجمعية", className: "w-full h-64 object-contain bg-slate-50 p-4" }),
        React.createElement('button', { onClick: onClose, className: "absolute top-2 left-2 bg-white/80 p-2 rounded-full hover:bg-white" },
          React.createElement(Icon, { name: "X", className: "h-5 w-5 text-slate-700" })
        )
      ),
      React.createElement('div', { className: "p-6" },
        React.createElement('h3', { className: "text-xl font-bold mb-2", style: { color: siteColor } }, activity.name),
        React.createElement('div', { className: "flex items-center gap-4 text-sm text-slate-500 mb-4" },
          React.createElement('span', { className: "flex items-center gap-1" }, React.createElement(Icon, { name: "Calendar", className: "h-4 w-4" }), " " + activity.date),
          React.createElement('span', { className: "font-medium", style: { color: siteColor } }, activity.program)
        ),
        (activity.beneficiariesCount || 0) > 0 && React.createElement('div', { className: "bg-slate-50 p-3 rounded-lg mb-4 flex items-center gap-2" },
          React.createElement(Icon, { name: "Users", className: "h-5 w-5", style: { color: siteColor } }),
          React.createElement('span', { className: "font-bold" }, activity.beneficiariesCount + " مستفيد")
        ),
        activity.description && React.createElement('div', { className: "text-slate-600 leading-relaxed" },
          React.createElement('p', { className: "font-bold mb-1" }, "الوصف:"),
          React.createElement('p', null, activity.description)
        )
      )
    )
  );
}

function ImageModal({ image, onClose }) {
  return React.createElement('div', {
    className: "fixed inset-0 bg-black/95 backdrop-blur-sm flex justify-center items-center z-50 p-4",
    onClick: onClose
  },
    React.createElement('button', {
      onClick: onClose,
      className: "absolute top-4 left-4 bg-white/20 hover:bg-white/40 p-3 rounded-full transition-colors"
    }, React.createElement(Icon, { name: "X", className: "h-6 w-6 text-white" })),
    React.createElement('img', {
      src: image.src,
      alt: image.program,
      className: "max-w-full max-h-[90vh] object-contain rounded-lg shadow-2xl",
      onClick: e => e.stopPropagation()
    }),
    image.program && React.createElement('div', { className: "absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-full" }, image.program)
  );
}

function DetailedTablePage({ reports, siteColor = '#3b82f6' }) {
  const [filterYear, setFilterYear] = useState('');
  const [filterMonth, setFilterMonth] = useState('');
  const [sortConfig, setSortConfig] = useState({ key: 'date', direction: 'desc' });
  const allYears = useMemo(() => [...new Set(reports.map(r => r.date?.substring(0, 4)).filter(Boolean))].sort().reverse(), [reports]);
  const allMonths = useMemo(() => {
    const months = new Set();
    reports.forEach(r => {
      const m = r.date?.substring(0, 7);
      if (m && (!filterYear || m.startsWith(filterYear))) months.add(m);
    });
    return [...months].sort();
  }, [reports, filterYear]);
  const allActivityNames = useMemo(() => {
    const names = new Set();
    reports.forEach(r => r.activities?.forEach(a => names.add(a.name)));
    return Array.from(names);
  }, [reports]);

  const filteredData = useMemo(() => {
    return [...reports]
      .filter(r => !filterYear || r.date?.startsWith(filterYear))
      .filter(r => !filterMonth || r.date?.startsWith(filterMonth));
  }, [reports, filterYear, filterMonth]);

  const sortedData = useMemo(() => {
    let items = [...filteredData];
    items.sort((a, b) => {
      if (a[sortConfig.key] < b[sortConfig.key]) return sortConfig.direction === 'asc' ? -1 : 1;
      if (a[sortConfig.key] > b[sortConfig.key]) return sortConfig.direction === 'asc' ? 1 : -1;
      return 0;
    });
    return items;
  }, [filteredData, sortConfig]);

  const requestSort = (key) => {
    let direction = 'asc';
    if (sortConfig.key === key && sortConfig.direction === 'asc') direction = 'desc';
    setSortConfig({ key, direction });
  };

  const exportToExcel = () => {
    try {
      const headers = ['التاريخ', 'البرنامج', 'الفئة', 'المستفيدين', ...allActivityNames];
      const rows = sortedData.map(r => {
        const row = [r.date, r.program, r.target_audience, r.beneficiaries_count || 0];
        allActivityNames.forEach(name => {
          const act = r.activities?.find(a => a.name === name);
          row.push(act && act.description ? act.description : '-');
        });
        return row;
      });
      const wsData = [headers, ...rows];
      const ws = XLSX.utils.aoa_to_sheet(wsData);
      ws['!dir'] = 'rtl';
      const colWidths = headers.map(() => ({ wch: 20 }));
      ws['!cols'] = colWidths;
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'الجدول المفصل');
      const dateStr = new Date().toISOString().split('T')[0];
      XLSX.writeFile(wb, `الجدول_المفصل_${dateStr}.xlsx`);
    } catch (err) {
      alert('خطأ في التصدير: ' + err.message);
    }
  };

  if (reports.length === 0) return React.createElement(EmptyState, { icon: "Table", text: "لا توجد بيانات للجدول" });

  const hasActiveFilters = filterYear || filterMonth;

  return React.createElement('div', { className: "space-y-4" },
    React.createElement('div', { className: "bg-white rounded-xl shadow-sm border border-slate-200 p-4 mb-2 print:hidden" },
      React.createElement('div', { className: "flex flex-wrap items-center gap-3" },
        React.createElement('span', { className: "text-sm font-bold text-slate-600" }, "تصفية:"),
        React.createElement('select', {
          value: filterYear,
          onChange: (e) => { setFilterYear(e.target.value); setFilterMonth(''); },
          className: "px-3 py-2 border rounded-lg text-sm min-w-[110px]"
        }, React.createElement('option', { value: "" }, "كل السنوات"), allYears.map(y => React.createElement('option', { key: y, value: y }, y))),
        React.createElement('select', {
          value: filterMonth,
          onChange: (e) => setFilterMonth(e.target.value),
          className: "px-3 py-2 border rounded-lg text-sm min-w-[140px]",
          disabled: !filterYear
        }, React.createElement('option', { value: "" }, "كل الشهور"), allMonths.map(m => {
          const [y, mo] = m.split('-');
          const monthNames = ['يناير','فبراير','مارس','أبريل','مايو','يونيو','يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'];
          return React.createElement('option', { key: m, value: m }, monthNames[parseInt(mo) - 1] + ' ' + y);
        })),
        hasActiveFilters && React.createElement('button', {
          onClick: () => { setFilterYear(''); setFilterMonth(''); },
          className: "px-3 py-2 text-white rounded-lg text-sm hover:opacity-90",
          style: { backgroundColor: '#dc2626' }
        }, "إلغاء التصفية")
      )
    ),
    React.createElement('div', { className: "flex justify-end print:hidden gap-2" },
      React.createElement('button', {
        onClick: exportToExcel,
        className: "flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-green-700 transition-all"
      }, React.createElement(Icon, { name: "FileSpreadsheet", className: "h-4 w-4" }), " تصدير إلى Excel"),
      React.createElement('button', {
        onClick: () => window.print(),
        className: "flex items-center gap-2 bg-slate-800 text-white px-4 py-2 rounded-lg text-sm hover:bg-black transition-all"
      }, React.createElement(Icon, { name: "Printer", className: "h-4 w-4" }), " طباعة / تصدير PDF")
    ),
    React.createElement('div', { className: "bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden print:border-none" },
      React.createElement('div', { className: "overflow-x-auto" },
        React.createElement('table', { className: "w-full text-right text-sm border-collapse" },
          React.createElement('thead', null,
            React.createElement('tr', { className: "bg-slate-800 text-white print:bg-slate-100 print:text-black print:border-b" },
              React.createElement(SortableHeader, { label: "التاريخ", field: "date", config: sortConfig, onSort: requestSort }),
              React.createElement(SortableHeader, { label: "البرنامج", field: "program", config: sortConfig, onSort: requestSort }),
              React.createElement(SortableHeader, { label: "الفئة", field: "target_audience", config: sortConfig, onSort: requestSort }),
              React.createElement(SortableHeader, { label: "المستفيدين", field: "beneficiaries_count", config: sortConfig, onSort: requestSort }),
              allActivityNames.map(name =>
                React.createElement('th', {
                  key: name,
                  className: "p-4 border-r border-slate-700 whitespace-nowrap print:bg-transparent print:border-slate-300 print:text-black",
                  style: { backgroundColor: `${siteColor}80` }
                }, name)
              )
            )
          ),
          React.createElement('tbody', { className: "divide-y divide-slate-100" },
            sortedData.map((report) =>
              React.createElement('tr', { key: report.id, className: "hover:bg-blue-50/30 transition-colors print:border-b" },
                React.createElement('td', { className: "p-4 whitespace-nowrap" }, report.date),
                React.createElement('td', { className: "p-4 font-bold" }, report.program),
                React.createElement('td', { className: "p-4" }, report.target_audience),
                React.createElement('td', { className: "p-4 text-center font-bold print:text-black", style: { color: siteColor } }, report.beneficiaries_count || 0),
                allActivityNames.map(activityName => {
                  const act = report.activities?.find(a => a.name === activityName);
                  return React.createElement('td', { key: activityName, className: "p-4 border-r border-slate-100 align-top print:border-slate-300" },
                    act && act.description
                      ? React.createElement('span', { className: "font-bold text-slate-800 text-sm" }, act.description)
                      : React.createElement('span', { className: "text-slate-200 print:text-slate-300" }, "-")
                  );
                })
              )
            )
          )
        )
      )
    )
  );
}

function SortableHeader({ label, field, config, onSort }) {
  const isActive = config.key === field;
  return React.createElement('th', {
    onClick: () => onSort(field),
    className: "p-4 cursor-pointer hover:bg-slate-700 transition-colors whitespace-nowrap print:cursor-default"
  },
    React.createElement('div', { className: "flex items-center gap-1 justify-between" },
      label,
      React.createElement('span', { className: "print:hidden" },
        isActive
          ? (config.direction === 'asc'
              ? React.createElement(Icon, { name: "ChevronUp", className: "h-4 w-4" })
              : React.createElement(Icon, { name: "ChevronDown", className: "h-4 w-4" }))
          : React.createElement('div', { className: "w-4 h-4 opacity-20" }, React.createElement(Icon, { name: "ChevronDown", className: "h-4 w-4" }))
      )
    )
  );
}

function MonthlyTablePage({ reports, siteColor = '#3b82f6' }) {
  const [filterYear, setFilterYear] = useState('');
  const [filterMonth, setFilterMonth] = useState('');
  const [filterType, setFilterType] = useState('both');
  const [sortConfig, setSortConfig] = useState({ key: 'month', direction: 'desc' });
  const allYears = useMemo(() => [...new Set(reports.map(r => r.date?.substring(0, 4)).filter(Boolean))].sort().reverse(), [reports]);
  const allMonths = useMemo(() => {
    const months = new Set();
    reports.forEach(r => {
      const m = r.date?.substring(0, 7);
      if (m && (!filterYear || m.startsWith(filterYear))) months.add(m);
    });
    return [...months].sort();
  }, [reports, filterYear]);

  const filteredReports = useMemo(() => {
    return [...reports]
      .filter(r => !filterYear || r.date?.startsWith(filterYear))
      .filter(r => !filterMonth || r.date?.startsWith(filterMonth));
  }, [reports, filterYear, filterMonth]);

  const monthlyData = useMemo(() => {
    const monthMap = {};
    filteredReports.forEach(r => {
      const month = r.date?.substring(0, 7) || 'غير محدد';
      r.activities?.forEach(act => {
        let key, programLabel, activityLabel;
        
        if (filterType === 'programs') {
          key = `${month}-${r.program}`;
          programLabel = r.program;
          activityLabel = 'كل الأنشطة';
        } else if (filterType === 'activities') {
          key = act.name;
          programLabel = 'كل البرامج';
          activityLabel = act.name;
        } else {
          key = `${month}-${r.program}-${act.name}`;
          programLabel = r.program;
          activityLabel = act.name;
        }
        
        if (!monthMap[key]) monthMap[key] = { month, program: programLabel, activity: activityLabel, count: 0, beneficiaries: 0 };
        monthMap[key].count++;
        monthMap[key].beneficiaries += parseInt(act.beneficiariesCount) || 0;
      });
    });
    return Object.values(monthMap);
  }, [filteredReports, filterType]);

  const sortedData = useMemo(() => {
    let items = [...monthlyData];
    items.sort((a, b) => {
      if (a[sortConfig.key] < b[sortConfig.key]) return sortConfig.direction === 'asc' ? -1 : 1;
      if (a[sortConfig.key] > b[sortConfig.key]) return sortConfig.direction === 'asc' ? 1 : -1;
      return 0;
    });
    return items;
  }, [monthlyData, sortConfig]);

  const requestSort = (key) => {
    let direction = 'asc';
    if (sortConfig.key === key && sortConfig.direction === 'asc') direction = 'desc';
    setSortConfig({ key, direction });
  };

  const exportToExcel = () => {
    try {
      const headers = ['#', 'الشهر', 'البرنامج', 'النشاط', 'التكرار', 'المستفيدين'];
      const rows = sortedData.map((row, i) => [i + 1, row.month, row.program, row.activity, row.count, row.beneficiaries || 0]);
      const totals = ['', 'الإجمالي', '', '', sortedData.reduce((s, r) => s + r.count, 0), sortedData.reduce((s, r) => s + (r.beneficiaries || 0), 0)];
      const wsData = [headers, ...rows, totals];
      const ws = XLSX.utils.aoa_to_sheet(wsData);
      ws['!dir'] = 'rtl';
      ws['!cols'] = [{ wch: 8 }, { wch: 15 }, { wch: 20 }, { wch: 25 }, { wch: 12 }, { wch: 15 }];
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'التقرير الشهري');
      const dateStr = new Date().toISOString().split('T')[0];
      XLSX.writeFile(wb, `التقرير_الشهري_${dateStr}.xlsx`);
    } catch (err) {
      alert('خطأ في التصدير: ' + err.message);
    }
  };

  if (monthlyData.length === 0) return React.createElement(EmptyState, { icon: "CalendarDays", text: "لا توجد بيانات شهرية" });

  const hasActiveFilters = filterYear || filterMonth || filterType !== 'both';

  return React.createElement('div', { className: "space-y-4 max-w-4xl mx-auto" },
    React.createElement('div', { className: "bg-white rounded-xl shadow-sm border border-slate-200 p-4 print:hidden" },
      React.createElement('div', { className: "flex flex-wrap items-center gap-3" },
        React.createElement('span', { className: "text-sm font-bold text-slate-600" }, "تصفية:"),
        React.createElement('select', {
          value: filterYear,
          onChange: (e) => { setFilterYear(e.target.value); setFilterMonth(''); },
          className: "px-3 py-2 border rounded-lg text-sm min-w-[110px]"
        }, React.createElement('option', { value: "" }, "كل السنوات"), allYears.map(y => React.createElement('option', { key: y, value: y }, y))),
        React.createElement('select', {
          value: filterMonth,
          onChange: (e) => setFilterMonth(e.target.value),
          className: "px-3 py-2 border rounded-lg text-sm min-w-[140px]",
          disabled: !filterYear
        }, React.createElement('option', { value: "" }, "كل الشهور"), allMonths.map(m => {
          const [y, mo] = m.split('-');
          const monthNames = ['يناير','فبراير','مارس','أبريل','مايو','يونيو','يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'];
          return React.createElement('option', { key: m, value: m }, monthNames[parseInt(mo) - 1] + ' ' + y);
        })),
        React.createElement('select', {
          value: filterType,
          onChange: (e) => setFilterType(e.target.value),
          className: "px-3 py-2 border rounded-lg text-sm min-w-[140px]",
          style: { borderColor: siteColor }
        },
          React.createElement('option', { value: "both" }, "البرامج + الأنشطة"),
          React.createElement('option', { value: "programs" }, "البرامج فقط"),
          React.createElement('option', { value: "activities" }, "الأنشطة فقط")
        ),
        hasActiveFilters && React.createElement('button', {
          onClick: () => { setFilterYear(''); setFilterMonth(''); setFilterType('both'); },
          className: "px-3 py-2 text-white rounded-lg text-sm hover:opacity-90",
          style: { backgroundColor: '#dc2626' }
        }, "إلغاء التصفية")
      )
    ),
    React.createElement('div', { className: "flex justify-end print:hidden gap-2" },
      React.createElement('button', {
        onClick: exportToExcel,
        className: "flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-green-700 transition-all"
      }, React.createElement(Icon, { name: "FileSpreadsheet", className: "h-4 w-4" }), " تصدير إلى Excel"),
      React.createElement('button', {
        onClick: () => window.print(),
        className: "flex items-center gap-2 bg-slate-800 text-white px-4 py-2 rounded-lg text-sm hover:bg-black"
      }, React.createElement(Icon, { name: "Printer", className: "h-4 w-4" }), " طباعة التقرير الشهري")
    ),
    React.createElement('div', { className: "bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden print:border-none" },
      React.createElement('table', { className: "w-full text-right border-collapse" },
        React.createElement('thead', null,
          React.createElement('tr', { className: "text-white print:bg-slate-100 print:text-black print:border-b", style: { backgroundColor: siteColor } },
            React.createElement('th', { className: "p-4" }, "#"),
            React.createElement(SortableHeader, { label: "الشهر", field: "month", config: sortConfig, onSort: requestSort }),
            React.createElement(SortableHeader, { label: "البرنامج", field: "program", config: sortConfig, onSort: requestSort }),
            React.createElement(SortableHeader, { label: "النشاط", field: "activity", config: sortConfig, onSort: requestSort }),
            React.createElement(SortableHeader, { label: "التكرار", field: "count", config: sortConfig, onSort: requestSort }),
            React.createElement(SortableHeader, { label: "المستفيدين", field: "beneficiaries", config: sortConfig, onSort: requestSort })
          )
        ),
        React.createElement('tbody', { className: "divide-y divide-slate-100" },
          sortedData.map((row, i) =>
            React.createElement('tr', { key: i, className: "hover:bg-slate-50 print:border-b" },
              React.createElement('td', { className: "p-4 text-slate-400" }, i + 1),
              React.createElement('td', { className: "p-4 whitespace-nowrap" }, row.month),
              React.createElement('td', { className: "p-4 font-medium" }, row.program),
              React.createElement('td', { className: "p-4 font-medium print:text-black", style: { color: siteColor } }, row.activity),
              React.createElement('td', { className: "p-4" },
                React.createElement('span', { className: "px-3 py-1 rounded-full font-bold print:bg-transparent print:text-black", style: { backgroundColor: `${siteColor}20`, color: siteColor } }, row.count)
              ),
              React.createElement('td', { className: "p-4 font-bold" }, row.beneficiaries || 0)
            )
          )
        )
      )
    )
  );
}

function StatsPage({ reports, siteColor = '#3b82f6' }) {
  const [filterYear, setFilterYear] = useState('');
  const [filterMonth, setFilterMonth] = useState('');
  const allYears = useMemo(() => [...new Set(reports.map(r => r.date?.substring(0, 4)).filter(Boolean))].sort().reverse(), [reports]);
  const allMonths = useMemo(() => {
    const months = new Set();
    reports.forEach(r => {
      const m = r.date?.substring(0, 7);
      if (m && (!filterYear || m.startsWith(filterYear))) months.add(m);
    });
    return [...months].sort();
  }, [reports, filterYear]);

  const filteredReports = useMemo(() => {
    return [...reports]
      .filter(r => !filterYear || r.date?.startsWith(filterYear))
      .filter(r => !filterMonth || r.date?.startsWith(filterMonth));
  }, [reports, filterYear, filterMonth]);

  const stats = useMemo(() => {
    let totalBeneficiaries = 0;
    let totalActs = 0;
    const programSet = new Set();
    const categorySet = new Set();
    filteredReports.forEach(r => {
      if (r.program) programSet.add(r.program);
      if (r.target_audience) categorySet.add(r.target_audience);
      let reportBeneficiaries = 0;
      r.activities?.forEach(act => {
        totalActs++;
        reportBeneficiaries += parseInt(act.beneficiariesCount) || 0;
      });
      if (reportBeneficiaries > 0) {
        totalBeneficiaries += reportBeneficiaries;
      } else {
        totalBeneficiaries += parseInt(r.beneficiaries_count) || 0;
      }
    });
    return {
      reportsCount: filteredReports.length,
      actsCount: totalActs,
      beneficiaries: totalBeneficiaries,
      programs: programSet.size,
      categories: categorySet.size
    };
  }, [filteredReports]);

  const beneficiariesChartRef = useRef(null);
  const activitiesChartRef = useRef(null);
  const programsChartRef = useRef(null);
  const monthlyChartRef = useRef(null);
  const timelineChartRef = useRef(null);
  const beneficiariesChartInstance = useRef(null);
  const activitiesChartInstance = useRef(null);
  const programsChartInstance = useRef(null);
  const monthlyChartInstance = useRef(null);
  const timelineChartInstance = useRef(null);

  useEffect(() => {
    if (!filteredReports.length || !window.Chart) return;
    const Chart = window.Chart;

    const programData = {};
    filteredReports.forEach(r => {
      const prog = r.program || 'غير محدد';
      let reportBeneficiaries = 0;
      r.activities?.forEach(act => {
        reportBeneficiaries += parseInt(act.beneficiariesCount) || 0;
      });
      if (reportBeneficiaries > 0) {
        programData[prog] = (programData[prog] || 0) + reportBeneficiaries;
      } else {
        programData[prog] = (programData[prog] || 0) + (parseInt(r.beneficiaries_count) || 0);
      }
    });

    const activityData = {};
    filteredReports.forEach(r => {
      r.activities?.forEach(a => {
        const act = a.name || 'غير محدد';
        activityData[act] = (activityData[act] || 0) + (parseInt(a.beneficiariesCount) || 0);
      });
    });

    const monthlyBeneficiaries = {};
    filteredReports.forEach(r => {
      const month = r.date?.substring(0, 7) || 'غير محدد';
      let reportBeneficiaries = 0;
      r.activities?.forEach(act => {
        reportBeneficiaries += parseInt(act.beneficiariesCount) || 0;
      });
      if (reportBeneficiaries > 0) {
        monthlyBeneficiaries[month] = (monthlyBeneficiaries[month] || 0) + reportBeneficiaries;
      } else {
        monthlyBeneficiaries[month] = (monthlyBeneficiaries[month] || 0) + (parseInt(r.beneficiaries_count) || 0);
      }
    });

    const categoryData = {};
    filteredReports.forEach(r => {
      const cat = r.target_audience || 'غير محدد';
      let reportBeneficiaries = 0;
      r.activities?.forEach(act => {
        reportBeneficiaries += parseInt(act.beneficiariesCount) || 0;
      });
      if (reportBeneficiaries > 0) {
        categoryData[cat] = (categoryData[cat] || 0) + reportBeneficiaries;
      } else {
        categoryData[cat] = (categoryData[cat] || 0) + (parseInt(r.beneficiaries_count) || 0);
      }
    });

    const currentYear = filterYear || new Date().getFullYear().toString();
    const activityTimelineData = {};
    const timelineMonths = new Set();
    filteredReports.forEach(r => {
      const month = r.date?.substring(0, 7) || '';
      if (month.startsWith(currentYear)) {
        timelineMonths.add(month);
        r.activities?.forEach(act => {
          const actName = act.name;
          if (!activityTimelineData[actName]) activityTimelineData[actName] = {};
          activityTimelineData[actName][month] = (activityTimelineData[actName][month] || 0) + (parseInt(act.beneficiariesCount) || 0);
        });
      }
    });
    const sortedMonths = Array.from(timelineMonths).sort();

    const chartColors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16', '#f97316', '#14b8a6', '#a855f7', '#e11d48'];

    if (beneficiariesChartRef.current) {
      if (beneficiariesChartInstance.current) beneficiariesChartInstance.current.destroy();
      beneficiariesChartInstance.current = new Chart(beneficiariesChartRef.current, {
        type: 'bar',
        data: {
          labels: Object.keys(programData),
          datasets: [{ label: 'المستفيدين', data: Object.values(programData), backgroundColor: '#3b82f6' }]
        },
        options: { responsive: true, plugins: { title: { display: true, text: 'المستفيدين حسب البرنامج' }, legend: { display: false } } }
      });
    }

    if (activitiesChartRef.current) {
      if (activitiesChartInstance.current) activitiesChartInstance.current.destroy();
      const topActivities = Object.entries(activityData).sort((a, b) => b[1] - a[1]).slice(0, 8);
      activitiesChartInstance.current = new Chart(activitiesChartRef.current, {
        type: 'bar',
        data: {
          labels: topActivities.map(a => a[0]),
          datasets: [{ label: 'المستفيدين', data: topActivities.map(a => a[1]), backgroundColor: '#10b981' }]
        },
        options: { responsive: true, indexAxis: 'y', plugins: { title: { display: true, text: 'المستفيدين حسب النشاط' }, legend: { display: false } } }
      });
    }

    if (programsChartRef.current) {
      if (programsChartInstance.current) programsChartInstance.current.destroy();
      programsChartInstance.current = new Chart(programsChartRef.current, {
        type: 'bar',
        data: {
          labels: Object.keys(categoryData),
          datasets: [{ label: 'المستفيدين', data: Object.values(categoryData), backgroundColor: '#8b5cf6' }]
        },
        options: { responsive: true, plugins: { title: { display: true, text: 'المستفيدين حسب الفئة' }, legend: { display: false } } }
      });
    }

    if (monthlyChartRef.current) {
      if (monthlyChartInstance.current) monthlyChartInstance.current.destroy();
      const sortedMonths = Object.keys(monthlyBeneficiaries).sort().slice(-6);
      monthlyChartInstance.current = new Chart(monthlyChartRef.current, {
        type: 'line',
        data: {
          labels: sortedMonths,
          datasets: [{ label: 'المستفيدين', data: sortedMonths.map(m => monthlyBeneficiaries[m]), borderColor: '#10b981', backgroundColor: '#10b98130', fill: true }]
        },
        options: { responsive: true, plugins: { title: { display: true, text: 'المستفيدين الشهري' }, legend: { display: false } } }
      });
    }

    if (timelineChartRef.current && sortedMonths.length > 0) {
      if (timelineChartInstance.current) timelineChartInstance.current.destroy();
      const activities = Object.keys(activityTimelineData).slice(0, 8);
      const datasets = activities.map((act, idx) => ({
        label: act,
        data: sortedMonths.map(m => activityTimelineData[act]?.[m] || 0),
        borderColor: chartColors[idx % chartColors.length],
        backgroundColor: chartColors[idx % chartColors.length] + '40',
        fill: false,
        tension: 0.3
      }));
      timelineChartInstance.current = new Chart(timelineChartRef.current, {
        type: 'line',
        data: { labels: sortedMonths, datasets },
        options: {
          responsive: true,
          plugins: {
            title: { display: true, text: `المستفيدين حسب النشاط خلال سنة ${currentYear}` },
            legend: { position: 'bottom' }
          },
          scales: {
            y: { beginAtZero: true, title: { display: true, text: 'عدد المستفيدين' } },
            x: { title: { display: true, text: 'الشهر' } }
          }
        }
      });
    }

    return () => {
      beneficiariesChartInstance.current?.destroy();
      activitiesChartInstance.current?.destroy();
      programsChartInstance.current?.destroy();
      monthlyChartInstance.current?.destroy();
      timelineChartInstance.current?.destroy();
    };
  }, [filteredReports, siteColor]);

  const hasActiveFilters = filterYear || filterMonth;

  return React.createElement('div', { className: "space-y-6" },
    React.createElement('div', { className: "bg-white rounded-xl shadow-sm border border-slate-200 p-4 print:hidden" },
      React.createElement('div', { className: "flex flex-wrap items-center gap-3" },
        React.createElement('span', { className: "text-sm font-bold text-slate-600" }, "تصفية:"),
        React.createElement('select', {
          value: filterYear,
          onChange: (e) => { setFilterYear(e.target.value); setFilterMonth(''); },
          className: "px-3 py-2 border rounded-lg text-sm min-w-[110px]"
        }, React.createElement('option', { value: "" }, "كل السنوات"), allYears.map(y => React.createElement('option', { key: y, value: y }, y))),
        React.createElement('select', {
          value: filterMonth,
          onChange: (e) => setFilterMonth(e.target.value),
          className: "px-3 py-2 border rounded-lg text-sm min-w-[140px]",
          disabled: !filterYear
        }, React.createElement('option', { value: "" }, "كل الشهور"), allMonths.map(m => {
          const [y, mo] = m.split('-');
          const monthNames = ['يناير','فبراير','مارس','أبريل','مايو','يونيو','يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'];
          return React.createElement('option', { key: m, value: m }, monthNames[parseInt(mo) - 1] + ' ' + y);
        })),
        hasActiveFilters && React.createElement('button', {
          onClick: () => { setFilterYear(''); setFilterMonth(''); },
          className: "px-3 py-2 text-white rounded-lg text-sm hover:opacity-90",
          style: { backgroundColor: '#dc2626' }
        }, "إلغاء التصفية")
      )
    ),
    React.createElement('div', { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 print:grid-cols-2" },
      React.createElement(StatCard, { title: "إجمالي التقارير", value: stats.reportsCount, icon: "FileText", color: "#3b82f6" }),
      React.createElement(StatCard, { title: "إجمالي الأنشطة", value: stats.actsCount, icon: "CheckSquare", color: "#10b981" }),
      React.createElement(StatCard, { title: "عدد المستفيدين", value: stats.beneficiaries, icon: "Users", color: "#f59e0b" }),
      React.createElement(StatCard, { title: "البرامج المنفذة", value: stats.programs, icon: "LayoutDashboard", color: "#8b5cf6" })
    ),
    React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 gap-6" },
      React.createElement('div', { className: "bg-white p-4 rounded-xl shadow-sm border" }, React.createElement('canvas', { ref: beneficiariesChartRef })),
      React.createElement('div', { className: "bg-white p-4 rounded-xl shadow-sm border" }, React.createElement('canvas', { ref: activitiesChartRef })),
      React.createElement('div', { className: "bg-white p-4 rounded-xl shadow-sm border" }, React.createElement('canvas', { ref: programsChartRef })),
      React.createElement('div', { className: "bg-white p-4 rounded-xl shadow-sm border" }, React.createElement('canvas', { ref: monthlyChartRef }))
    ),
    React.createElement('div', { className: "bg-white p-4 rounded-xl shadow-sm border" }, React.createElement('canvas', { ref: timelineChartRef }))
  );
}

function StatCard({ title, value, icon, color = '#3b82f6' }) {
  return React.createElement('div', { className: "bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex items-center gap-4 print:border-slate-300" },
    React.createElement('div', { className: "p-4 rounded-xl print:bg-transparent print:text-black", style: { color, backgroundColor: `${color}20` } },
      React.createElement(Icon, { name: icon, className: "h-6 w-6" })
    ),
    React.createElement('div', null,
      React.createElement('p', { className: "text-xs font-bold text-slate-500 uppercase" }, title),
      React.createElement('p', { className: "text-2xl font-black text-slate-900" }, value)
    )
  );
}

function UploadModal({ onShowAlert, onClose, metadata, user, editingReport, onSave, siteColor = '#3b82f6', onDeleteTargetAudience, onDeleteProgram, onDeleteActivity, featuredActivities = [], programs = [] }) {
  const [formData, setFormData] = useState({
    date: editingReport?.date || new Date().toISOString().split('T')[0],
    targetAudience: editingReport?.target_audience || '', newTarget: '',
    program: editingReport?.program || '', newProgram: '',
    beneficiariesCount: editingReport?.beneficiaries_count || '',
    imageUrl: editingReport?.image_url || ''
  });
  const [activitiesList, setActivitiesList] = useState([]);
  const [newActivityName, setNewActivityName] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [imageFile, setImageFile] = useState(null);
  const [imagePreview, setImagePreview] = useState(editingReport?.image_url || '');
  const [uploadProgress, setUploadProgress] = useState(0);
  const [imageTab, setImageTab] = useState(editingReport?.image_url ? 'url' : 'upload');
  const [featuredActivityId, setFeaturedActivityId] = useState(editingReport?.featured_activity_id || '');
  const [linkedProgramId, setLinkedProgramId] = useState(editingReport?.linked_program_id || '');

  useEffect(() => {
    if (editingReport) {
      setFormData({
        date: editingReport.date || new Date().toISOString().split('T')[0],
        targetAudience: editingReport.target_audience || '',
        newTarget: '',
        program: editingReport.program || '',
        newProgram: '',
        beneficiariesCount: editingReport.beneficiaries_count || '',
        imageUrl: editingReport.image_url || ''
      });
      setFeaturedActivityId(editingReport.featured_activity_id || '');
      setLinkedProgramId(editingReport.linked_program_id || '');
      setImagePreview(editingReport.image_url || '');
      if (editingReport.activities) {
        const existingActivities = editingReport.activities.map(a => ({ name: a.name, description: a.description || '', beneficiariesCount: a.beneficiariesCount || 0, checked: true }));
        setActivitiesList([...(metadata.activityNames || []).map(name => {
          const existing = existingActivities.find(a => a.name === name);
          return existing || { name, description: '', beneficiariesCount: 0, checked: false };
        })]);
      }
    } else {
      setActivitiesList((metadata.activityNames || []).map(name => ({ name, description: '', beneficiariesCount: 0, checked: false })));
    }
  }, [metadata, editingReport]);

  const handleImageFile = (file) => {
    if (!file) return;
    setImageFile(file);
    const reader = new FileReader();
    reader.onloadend = () => setImagePreview(reader.result);
    reader.readAsDataURL(file);
  };

  const uploadImage = async () => {
    if (!imageFile) return formData.imageUrl;
    setUploadProgress(10);
    const ext = imageFile.name.split('.').pop();
    const fileName = `report-${Date.now()}-${Math.random().toString(36).substring(7)}.${ext}`;
    setUploadProgress(30);
    const { data, error } = await supabase.storage
      .from('report-images')
      .upload(fileName, imageFile, {
        cacheControl: '3600',
        upsert: false
      });
    if (error) throw error;
    setUploadProgress(70);
    const { data: { publicUrl } } = supabase.storage
      .from('report-images')
      .getPublicUrl(data.path);
    setUploadProgress(100);
    return publicUrl;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const finalTarget = formData.newTarget.trim() || formData.targetAudience;
    const finalProgram = formData.newProgram.trim() || formData.program;
    const selectedActs = activitiesList.filter(a => a.checked).map(a => ({ name: a.name, description: a.description, beneficiariesCount: parseInt(a.beneficiariesCount) || 0 }));
    const totalActivityBeneficiaries = selectedActs.reduce((sum, a) => sum + (a.beneficiariesCount || 0), 0);
    const finalBeneficiaries = totalActivityBeneficiaries > 0 ? totalActivityBeneficiaries : (parseInt(formData.beneficiariesCount) || 0);

    if (!finalTarget || !finalProgram || selectedActs.length === 0) return onShowAlert ? onShowAlert('بيانات ناقصة', 'أكمل البيانات المطلوبة') : alert('أكمل البيانات المطلوبة');

    setIsSubmitting(true);
    setUploadProgress(0);
    try {
      let finalImageUrl = formData.imageUrl;
      if (imageFile) {
        finalImageUrl = await uploadImage();
      }

      const newMeta = {
        targetAudiences: metadata.targetAudiences || [],
        programs: metadata.programs || [],
        activityNames: metadata.activityNames || []
      };
      let changed = false;
      if (finalTarget && !newMeta.targetAudiences.includes(finalTarget)) { newMeta.targetAudiences.push(finalTarget); changed = true; }
      if (finalProgram && !newMeta.programs.includes(finalProgram)) { newMeta.programs.push(finalProgram); changed = true; }
      selectedActs.forEach(a => { if (!newMeta.activityNames.includes(a.name)) { newMeta.activityNames.push(a.name); changed = true; } });
      if (changed) {
        await supabase.from('settings').upsert({ id: 'metadata', data: newMeta }, { onConflict: 'id' });
      }
      const reportData = {
        date: formData.date,
        target_audience: finalTarget,
        program: finalProgram,
        activities: selectedActs,
        beneficiaries_count: finalBeneficiaries,
        image_url: finalImageUrl || null,
        featured_activity_id: featuredActivityId || null,
        linked_program_id: linkedProgramId || null,
        updated_at: new Date().toISOString()
      };
      if (editingReport) {
        await supabase.from('reports').update(reportData).eq('id', editingReport.id);
        if (onShowAlert) onShowAlert('تم التحديث', 'تم تحديث التقرير بنجاح');
      } else {
        await supabase.from('reports').insert([{ ...reportData, created_at: new Date().toISOString() }]);
        if (onShowAlert) onShowAlert('تم الإضافة', 'تم إضافة التقرير بنجاح');
      }
      if (onSave) onSave();
      onClose();
    } catch (err) {
      if (onShowAlert) onShowAlert('خطأ', 'خطأ في الحفظ، تأكد من اتصالك بالإنترنت وصحة إعدادات Supabase'); else alert('خطأ في الحفظ');
    } finally { setIsSubmitting(false); setUploadProgress(0); }
  };

  return React.createElement('div', { className: "fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex justify-center items-center z-50 p-4 print:hidden" },
    React.createElement('div', { className: "bg-white rounded-2xl shadow-xl w-full max-w-4xl max-h-[95vh] flex flex-col overflow-hidden" },
      React.createElement('div', { className: "p-6 border-b flex justify-between items-center bg-slate-50" },
        React.createElement('h2', { className: "text-xl font-bold flex items-center gap-2" },
          React.createElement(Icon, { name: "Upload", style: { color: siteColor } }),
          " " + (editingReport ? 'تعديل تقرير' : 'رفع تقرير نشاط')
        ),
        React.createElement('button', { onClick: onClose, className: "text-slate-400 hover:text-red-500" },
          React.createElement(Icon, { name: "X" })
        )
      ),
      React.createElement('div', { className: "p-6 overflow-y-auto flex-1 space-y-6" },
        React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-3 gap-4" },
          React.createElement(InputGroup, { label: "التاريخ", type: "date", value: formData.date, onChange: v => setFormData({...formData, date: v}) }),
          React.createElement(InputGroup, { label: "عدد المستفيدين (الإجمالي)", type: "number", value: activitiesList.filter(a => a.checked).reduce((sum, a) => sum + (parseInt(a.beneficiariesCount) || 0), 0) || formData.beneficiariesCount, onChange: v => setFormData({...formData, beneficiariesCount: v}), placeholder: "0" }),
          React.createElement('div', null,
            React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "صورة التقرير (اختياري)"),
            React.createElement('div', { className: "flex gap-1 mb-2" },
              React.createElement('button', {
                type: "button",
                onClick: () => setImageTab('upload'),
                className: `flex-1 py-1.5 text-xs font-bold rounded ${imageTab === 'upload' ? 'text-white' : 'bg-slate-100 text-slate-600'}`,
                style: imageTab === 'upload' ? { backgroundColor: siteColor } : {}
              }, "رفع ملف"),
              React.createElement('button', {
                type: "button",
                onClick: () => setImageTab('url'),
                className: `flex-1 py-1.5 text-xs font-bold rounded ${imageTab === 'url' ? 'text-white' : 'bg-slate-100 text-slate-600'}`,
                style: imageTab === 'url' ? { backgroundColor: siteColor } : {}
              }, "رابط")
            ),
            imageTab === 'upload'
              ? React.createElement('div', { className: "space-y-2" },
                  React.createElement('label', {
                    className: "flex flex-col items-center justify-center w-full h-20 border-2 border-dashed rounded-lg cursor-pointer hover:bg-slate-50",
                    style: { borderColor: siteColor }
                  },
                    React.createElement('div', { className: "flex flex-col items-center justify-center pt-3" },
                      React.createElement(Icon, { name: "Upload", className: "h-4 w-4 mb-1", style: { color: siteColor } }),
                      React.createElement('p', { className: "text-xs text-slate-500" }, "اضغط لاختيار صورة")
                    ),
                    React.createElement('input', {
                      type: "file",
                      className: "hidden",
                      accept: "image/*",
                      onChange: (e) => handleImageFile(e.target.files[0])
                    })
                  ),
                  imageFile && React.createElement('p', { className: "text-xs text-slate-600 truncate" }, "📎 " + imageFile.name),
                  imagePreview && React.createElement('img', { src: imagePreview, className: "w-full h-20 object-cover rounded-lg", alt: "معاينة" })
                )
              : React.createElement('input', {
                  type: "url",
                  className: "w-full p-2.5 border rounded-lg focus:ring-2 outline-none",
                  style: { borderColor: siteColor },
                  value: formData.imageUrl,
                  onChange: (e) => {
                    setFormData({...formData, imageUrl: e.target.value});
                    setImagePreview(e.target.value);
                  },
                  placeholder: "https://example.com/image.jpg"
                })
          )
        ),
        React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 gap-6" },
          React.createElement(SelectOrNew, { label: "الفئة المستهدفة", options: metadata.targetAudiences, value: formData.targetAudience, newValue: formData.newTarget, onSelect: v => setFormData({...formData, targetAudience: v, newTarget: ''}), onNew: v => setFormData({...formData, newTarget: v, targetAudience: ''}), onDelete: onDeleteTargetAudience }),
          React.createElement(SelectOrNew, { label: "البرنامج", options: metadata.programs, value: formData.program, newValue: formData.newProgram, onSelect: v => setFormData({...formData, program: v, newProgram: ''}), onNew: v => setFormData({...formData, newProgram: v, program: ''}), onDelete: onDeleteProgram })
        ),
        featuredActivities.length > 0 && React.createElement('div', null,
          React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "نشاط مميز مرتبط (اختياري)"),
          React.createElement('select', {
            className: "w-full p-2.5 border rounded-lg outline-none bg-white",
            style: { borderColor: siteColor },
            value: featuredActivityId,
            onChange: (e) => setFeaturedActivityId(e.target.value)
          },
            React.createElement('option', { value: "" }, "-- بدون --"),
            featuredActivities.map(a => React.createElement('option', { key: a.id, value: a.id }, a.title || a.program))
          )
        ),
        programs.length > 0 && React.createElement('div', null,
          React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "برنامج مرتبط (اختياري)"),
          React.createElement('select', {
            className: "w-full p-2.5 border rounded-lg outline-none bg-white",
            style: { borderColor: siteColor },
            value: linkedProgramId,
            onChange: (e) => setLinkedProgramId(e.target.value)
          },
            React.createElement('option', { value: "" }, "-- بدون --"),
            programs.map(p => React.createElement('option', { key: p.id, value: p.id }, p.title))
          )
        ),
        React.createElement('div', { className: "border rounded-xl p-4 bg-slate-50" },
          React.createElement('h3', { className: "font-bold mb-4 flex items-center gap-2" },
            React.createElement(Icon, { name: "CheckSquare", style: { color: siteColor } }),
            " الأنشطة والوصف"
          ),
          React.createElement('div', { className: "grid grid-cols-1 sm:grid-cols-2 gap-3" },
            activitiesList.map((act, i) =>
              React.createElement('div', { key: i, className: "p-3 rounded-lg border bg-white", style: act.checked ? { borderColor: siteColor, boxShadow: `0 0 0 1px ${siteColor}` } : { borderColor: '#e2e8f0' } },
                React.createElement('div', { className: "flex items-center justify-between gap-2 mb-2" },
                  React.createElement('div', { className: "flex items-center gap-2" },
                    React.createElement('input', {
                      type: "checkbox",
                      checked: act.checked,
                      onChange: () => {
                        const newList = [...activitiesList];
                        newList[i].checked = !newList[i].checked;
                        setActivitiesList(newList);
                      }
                    }),
                    React.createElement('span', { className: "font-medium text-sm" }, act.name)
                  ),
                  onDeleteActivity && React.createElement('button', {
                    type: "button",
                    onClick: () => onDeleteActivity(act.name),
                    className: "text-red-500 hover:bg-red-50 p-1 rounded",
                    title: "حذف النشاط"
                  }, React.createElement(Icon, { name: "Trash2", className: "h-4 w-4" }))
                ),
                act.checked && React.createElement('div', { className: "space-y-2" },
                  React.createElement('input', {
                    type: "number",
                    placeholder: "عدد المستفيدين من هذا النشاط",
                    className: "w-full text-xs p-2 border rounded outline-none",
                    style: { borderColor: siteColor },
                    value: act.beneficiariesCount || '',
                    onChange: e => {
                      const newList = [...activitiesList];
                      newList[i].beneficiariesCount = e.target.value;
                      setActivitiesList(newList);
                    }
                  }),
                  React.createElement('textarea', {
                    placeholder: "وصف النشاط...",
                    className: "w-full text-xs p-2 border rounded h-16 outline-none",
                    style: { borderColor: siteColor },
                    value: act.description,
                    onChange: e => {
                      const newList = [...activitiesList];
                      newList[i].description = e.target.value;
                      setActivitiesList(newList);
                    }
                  })
                )
              )
            )
          ),
          React.createElement('div', { className: "mt-4 flex gap-2" },
            React.createElement('input', {
              type: "text",
              placeholder: "إضافة نشاط جديد...",
              className: "flex-1 p-2 border rounded-lg text-sm",
              value: newActivityName,
              onChange: e => setNewActivityName(e.target.value)
            }),
            React.createElement('button', {
              type: "button",
              onClick: () => {
                if (!newActivityName.trim()) return;
                setActivitiesList([...activitiesList, { name: newActivityName.trim(), description: '', beneficiariesCount: 0, checked: true }]);
                setNewActivityName('');
              },
              className: "bg-slate-800 text-white px-4 rounded-lg text-sm"
            }, React.createElement(Icon, { name: "Plus", className: "h-4 w-4" }))
          )
        )
      ),
      React.createElement('div', { className: "p-4 border-t bg-slate-50 flex justify-end gap-3" },
        uploadProgress > 0 && uploadProgress < 100
          ? React.createElement('div', { className: "flex-1 flex items-center gap-2" },
              React.createElement('div', { className: "flex-1 h-2 bg-slate-200 rounded-full overflow-hidden" },
                React.createElement('div', { className: "h-full transition-all duration-300", style: { width: uploadProgress + '%', backgroundColor: siteColor } })
              ),
              React.createElement('span', { className: "text-xs text-slate-500" }, uploadProgress + '%')
            )
          : React.createElement('span', null),
        React.createElement('button', { onClick: onClose, className: "px-6 py-2 text-slate-600 font-bold" }, "إلغاء"),
        React.createElement('button', {
          onClick: handleSubmit,
          disabled: isSubmitting,
          className: "px-8 py-2 text-white font-bold rounded-lg hover:opacity-90 disabled:opacity-50",
          style: { backgroundColor: siteColor }
        }, isSubmitting ? 'جاري الحفظ...' : 'حفظ التقرير')
      )
    )
  );
}

function InputGroup({ label, ...props }) {
  return React.createElement('div', null,
    React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, label),
    React.createElement('input', {
      className: "w-full p-2.5 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none",
      ...props,
      onChange: e => props.onChange(e.target.value)
    })
  );
}

function SelectOrNew({ label, options, value, newValue, onSelect, onNew, onDelete }) {
  return React.createElement('div', { className: "space-y-2" },
    React.createElement('label', { className: "block text-xs font-bold text-slate-500" }, label),
    React.createElement('div', { className: "flex gap-2" },
      React.createElement('select', { className: "flex-1 p-2.5 border rounded-lg bg-white", value, onChange: e => onSelect(e.target.value) },
        React.createElement('option', { value: "" }, "-- اختر من القائمة --"),
        options?.map((o, i) => React.createElement('option', { key: i, value: o }, o))
      ),
      onDelete && React.createElement('button', {
        type: "button",
        onClick: () => value && onDelete(value),
        className: "px-3 py-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200",
        title: "حذف"
      }, React.createElement(Icon, { name: "Trash2", className: "h-4 w-4" }))
    ),
    React.createElement('input', { className: "w-full p-2.5 border rounded-lg text-sm", placeholder: "أو أضف جديد...", value: newValue, onChange: e => onNew(e.target.value) })
  );
}

function LoginModal({ onClose, onLogin, siteColor = '#3b82f6' }) {
  const [u, setU] = useState('');
  const [p, setP] = useState('');
  return React.createElement('div', { className: "fixed inset-0 bg-slate-900/60 flex justify-center items-center z-50 p-4 print:hidden" },
    React.createElement('div', { className: "bg-white rounded-2xl shadow-xl w-full max-w-sm overflow-hidden" },
      React.createElement('div', { className: "p-8 text-center text-white", style: { backgroundColor: siteColor } },
        React.createElement(Icon, { name: "Lock", className: "h-12 w-12 mb-2" }),
        React.createElement('h2', { className: "text-xl font-bold" }, "دخول الإدارة")
      ),
      React.createElement('form', { className: "p-6 space-y-4", onSubmit: e => { e.preventDefault(); onLogin(u, p); } },
        React.createElement('input', { className: "w-full p-3 border rounded-lg", type: "text", placeholder: "البريد الإلكتروني أو اسم المستخدم", value: u, onChange: e => setU(e.target.value) }),
        React.createElement('input', { className: "w-full p-3 border rounded-lg", type: "password", placeholder: "كلمة المرور", value: p, onChange: e => setP(e.target.value) }),
        React.createElement('div', { className: "flex gap-2" },
          React.createElement('button', { type: "button", onClick: onClose, className: "flex-1 py-3 bg-slate-100 rounded-lg" }, "إلغاء"),
          React.createElement('button', { className: "flex-1 py-3 text-white rounded-lg font-bold", style: { backgroundColor: siteColor } }, "دخول")
        )
      )
    )
  );
}

function SettingsModal({ onShowAlert, onClose, settings, onSave, siteColor = '#3b82f6' }) {
  const [formData, setFormData] = useState({
    siteTitle: settings?.siteTitle || 'منصة إدارة الأنشطة',
    heroTitle: settings?.heroTitle || 'مرحباً بكم في منصة إدارة الأنشطة',
    primaryColor: settings?.primaryColor || '#3b82f6',
    logoUrl: settings?.logoUrl || '',
    siteUrl: settings?.siteUrl || '',
    address: settings?.address || '',
    phone: settings?.phone || '',
    bankAccounts: settings?.bankAccounts || '',
    footerEnabled: settings?.footerEnabled !== undefined ? settings.footerEnabled : true
  });
  const [logoFile, setLogoFile] = useState(null);
  const [logoPreview, setLogoPreview] = useState(settings?.logoUrl || '');
  const [logoTab, setLogoTab] = useState(settings?.logoUrl ? 'url' : 'upload');
  const [isUploading, setIsUploading] = useState(false);

  const handleLogoFile = (file) => {
    if (!file) return;
    setLogoFile(file);
    const reader = new FileReader();
    reader.onloadend = () => setLogoPreview(reader.result);
    reader.readAsDataURL(file);
  };

  const uploadLogo = async () => {
    if (!logoFile) return formData.logoUrl;
    const ext = logoFile.name.split('.').pop();
    const fileName = `logo-${Date.now()}.${ext}`;
    const { data, error } = await supabase.storage
      .from('report-images')
      .upload(fileName, logoFile, { cacheControl: '3600', upsert: true });
    if (error) throw error;
    const { data: { publicUrl } } = supabase.storage
      .from('report-images')
      .getPublicUrl(data.path);
    return publicUrl;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsUploading(true);
    try {
      let finalLogoUrl = formData.logoUrl;
      if (logoFile) {
        finalLogoUrl = await uploadLogo();
      }
      onSave({ ...formData, logoUrl: finalLogoUrl });
    } catch (err) {
      if (onShowAlert) onShowAlert('خطأ', 'خطأ في الحفظ: ' + (err.message || 'خطأ غير معروف')); else alert('خطأ في الحفظ');
    } finally { setIsSubmitting(false); }
  };

  return React.createElement('div', { className: "fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex justify-center items-center z-50 p-4 print:hidden" },
    React.createElement('div', { className: "bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden" },
      React.createElement('div', { className: "p-6 border-b flex justify-between items-center bg-slate-50" },
        React.createElement('h2', { className: "text-xl font-bold flex items-center gap-2" },
          React.createElement(Icon, { name: "Settings", style: { color: siteColor } }),
          " إعدادات الموقع"
        ),
        React.createElement('button', { onClick: onClose, className: "text-slate-400 hover:text-red-500" },
          React.createElement(Icon, { name: "X" })
        )
      ),
      React.createElement('form', { onSubmit: handleSubmit, className: "p-6 space-y-4" },
        React.createElement('div', null,
          React.createElement('label', { className: "block text-sm font-bold text-slate-600 mb-1" }, "شعار الموقع"),
          React.createElement('div', { className: "flex gap-1 mb-2" },
            React.createElement('button', {
              type: "button",
              onClick: () => setLogoTab('upload'),
              className: `flex-1 py-1.5 text-xs font-bold rounded ${logoTab === 'upload' ? 'text-white' : 'bg-slate-100 text-slate-600'}`,
              style: logoTab === 'upload' ? { backgroundColor: siteColor } : {}
            }, "رفع ملف"),
            React.createElement('button', {
              type: "button",
              onClick: () => setLogoTab('url'),
              className: `flex-1 py-1.5 text-xs font-bold rounded ${logoTab === 'url' ? 'text-white' : 'bg-slate-100 text-slate-600'}`,
              style: logoTab === 'url' ? { backgroundColor: siteColor } : {}
            }, "رابط")
          ),
          logoTab === 'upload'
            ? React.createElement('div', { className: "space-y-2" },
                React.createElement('label', {
                  className: "flex items-center justify-center w-full h-16 border-2 border-dashed rounded-lg cursor-pointer hover:bg-slate-50",
                  style: { borderColor: siteColor }
                },
                  React.createElement('div', { className: "flex items-center gap-2" },
                    React.createElement(Icon, { name: "Upload", className: "h-4 w-4", style: { color: siteColor } }),
                    React.createElement('p', { className: "text-xs text-slate-500" }, logoFile ? logoFile.name : "اضغط لاختيار شعار")
                  ),
                  React.createElement('input', {
                    type: "file",
                    className: "hidden",
                    accept: "image/*",
                    onChange: (e) => handleLogoFile(e.target.files[0])
                  })
                ),
                logoPreview && React.createElement('img', { src: logoPreview, className: "w-16 h-16 object-contain rounded-lg border", alt: "معاينة الشعار" })
              )
            : React.createElement('input', {
                type: "url",
                className: "w-full p-2.5 border rounded-lg",
                value: formData.logoUrl,
                onChange: (e) => { setFormData({...formData, logoUrl: e.target.value}); setLogoPreview(e.target.value); },
                placeholder: "https://example.com/logo.png"
              })
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-sm font-bold text-slate-600 mb-1" }, "اسم الموقع"),
          React.createElement('input', { type: "text", className: "w-full p-2.5 border rounded-lg", value: formData.siteTitle, onChange: (e) => setFormData({...formData, siteTitle: e.target.value}) })
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-sm font-bold text-slate-600 mb-1" }, "عنوان الصفحة الرئيسية"),
          React.createElement('input', { type: "text", className: "w-full p-2.5 border rounded-lg", value: formData.heroTitle, onChange: (e) => setFormData({...formData, heroTitle: e.target.value}) })
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-sm font-bold text-slate-600 mb-1" }, "اللون الرئيسي"),
          React.createElement('div', { className: "flex gap-3 items-center" },
            React.createElement('input', { type: "color", className: "w-12 h-12 rounded cursor-pointer", value: formData.primaryColor, onChange: (e) => setFormData({...formData, primaryColor: e.target.value}) }),
            React.createElement('input', { type: "text", className: "flex-1 p-2.5 border rounded-lg", value: formData.primaryColor, onChange: (e) => setFormData({...formData, primaryColor: e.target.value}) })
          )
        ),
        React.createElement('div', { className: "border-t pt-4 mt-4" },
          React.createElement('div', { className: "flex items-center justify-between mb-3" },
            React.createElement('label', { className: "text-sm font-bold text-slate-600" }, "تفعيل فوتر التواصل"),
            React.createElement('button', {
              type: "button",
              onClick: () => setFormData({...formData, footerEnabled: !formData.footerEnabled}),
              className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${formData.footerEnabled ? 'bg-green-500' : 'bg-slate-300'}`,
            },
              React.createElement('span', { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${formData.footerEnabled ? 'translate-x-6' : 'translate-x-1'}` })
            )
          )
        ),
        formData.footerEnabled && React.createElement('div', { className: "space-y-3 pt-2" },
          React.createElement('div', null,
            React.createElement('label', { className: "block text-sm font-bold text-slate-600 mb-1" }, "رابط الموقع الرسمي"),
            React.createElement('input', { type: "url", className: "w-full p-2.5 border rounded-lg", value: formData.siteUrl, onChange: (e) => setFormData({...formData, siteUrl: e.target.value}), placeholder: "https://example.com" })
          ),
          React.createElement('div', null,
            React.createElement('label', { className: "block text-sm font-bold text-slate-600 mb-1" }, "العنوان (رابط Google Maps)"),
            React.createElement('input', { type: "url", className: "w-full p-2.5 border rounded-lg", value: formData.address, onChange: (e) => setFormData({...formData, address: e.target.value}), placeholder: "https://maps.google.com/..." })
          ),
          React.createElement('div', null,
            React.createElement('label', { className: "block text-sm font-bold text-slate-600 mb-1" }, "أرقام التواصل"),
            React.createElement('input', { type: "text", className: "w-full p-2.5 border rounded-lg", value: formData.phone, onChange: (e) => setFormData({...formData, phone: e.target.value}), placeholder: "0501234567 - 0112345678" })
          ),
          React.createElement('div', null,
            React.createElement('label', { className: "block text-sm font-bold text-slate-600 mb-1" }, "الحسابات البنكية"),
            React.createElement('textarea', { className: "w-full p-2.5 border rounded-lg min-h-[80px]", value: formData.bankAccounts, onChange: (e) => setFormData({...formData, bankAccounts: e.target.value}), placeholder: "البنك الأهلي: SA1234567890123456789012\nبنك الراجحي: SA9876543210987654321098" })
          )
        ),
        React.createElement('div', { className: "flex gap-3 pt-4" },
          React.createElement('button', { type: "button", onClick: onClose, className: "flex-1 py-3 bg-slate-100 rounded-lg font-bold" }, "إلغاء"),
          React.createElement('button', { type: "submit", disabled: isUploading, className: "flex-1 py-3 text-white rounded-lg font-bold", style: { backgroundColor: siteColor } }, isUploading ? 'جاري الرفع...' : 'حفظ')
        )
      )
    )
  );
}

function EmptyState({ icon, text }) {
  return React.createElement('div', { className: "bg-white rounded-3xl border-2 border-dashed border-slate-200 p-20 text-center text-slate-400" },
    React.createElement('div', { className: "flex justify-center mb-4 opacity-20 scale-150" },
      React.createElement(Icon, { name: icon, className: "h-12 w-12" })
    ),
    React.createElement('p', { className: "text-lg font-bold" }, text)
  );
}

function getYoutubeThumbnail(url) {
  if (!url) return null;
  const match = url.match(/(?:youtu\.be\/|youtube\.com.*v=|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/);
  return match ? `https://img.youtube.com/vi/${match[1]}/hqdefault.jpg` : null;
}

function getYoutubeId(url) {
  if (!url) return null;
  const match = url.match(/(?:youtu\.be\/|youtube\.com.*v=|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/);
  return match ? match[1] : null;
}

function FeaturedActivitiesPage({ activities, isAdmin, userRole, onAdd, onEdit, onDelete, onPin, onSelect, siteColor = '#3b82f6' }) {
  const sorted = useMemo(() => {
    return [...activities].sort((a, b) => {
      if (a.is_pinned && !b.is_pinned) return -1;
      if (!a.is_pinned && b.is_pinned) return 1;
      return new Date(b.created_at) - new Date(a.created_at);
    });
  }, [activities]);

  const shareUrl = (activity) => window.location.origin + window.location.pathname + '#/featured/' + activity.id;

  const shareWhatsApp = (activity) => {
    const text = encodeURIComponent(`🌟 ${activity.title || activity.program}\n${activity.description?.substring(0, 100)}...\n${shareUrl(activity)}`);
    window.open(`https://wa.me/?text=${text}`, '_blank');
  };

  const shareTwitter = (activity) => {
    const text = encodeURIComponent(`🌟 ${activity.title || activity.program}`);
    const url = encodeURIComponent(shareUrl(activity));
    window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, '_blank');
  };

  if (activities.length === 0) return React.createElement('div', { className: "space-y-6" },
    userRole === 'super_admin' && React.createElement('div', { className: "flex justify-end" },
      React.createElement('button', {
        onClick: onAdd,
        className: "flex items-center gap-2 text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity",
        style: { backgroundColor: siteColor }
      }, React.createElement(Icon, { name: "Plus", className: "h-4 w-4" }), " إضافة نشاط مميز")
    ),
    React.createElement(EmptyState, { icon: "Star", text: "لا توجد أنشطة مميزة حالياً" })
  );

  return React.createElement('div', { className: "space-y-6" },
    userRole === 'super_admin' && React.createElement('div', { className: "flex justify-end" },
      React.createElement('button', {
        onClick: onAdd,
        className: "flex items-center gap-2 text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity",
        style: { backgroundColor: siteColor }
      }, React.createElement(Icon, { name: "Plus", className: "h-4 w-4" }), " إضافة نشاط مميز")
    ),
    React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" },
      sorted.map((activity) =>
        React.createElement('div', {
          key: activity.id,
          className: "bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer relative",
          onClick: () => onSelect(activity)
        },
          activity.is_pinned && React.createElement('div', {
            className: "absolute top-2 right-2 z-10 px-2 py-1 rounded-full text-xs font-bold text-white flex items-center gap-1",
            style: { backgroundColor: siteColor }
          }, React.createElement(Icon, { name: "Pin", className: "h-3 w-3" }), " مثبت"),
          activity.images && activity.images.length > 0
            ? React.createElement('div', { className: "w-full h-48 bg-slate-100 relative" },
                React.createElement('img', { src: activity.images[0], alt: activity.program, className: "w-full h-full object-cover" }),
                activity.images.length > 1 && React.createElement('div', {
                  className: "absolute bottom-2 left-2 bg-black/60 text-white text-xs px-2 py-1 rounded-full"
                }, "+" + (activity.images.length - 1) + " صور")
              )
            : React.createElement('div', { className: "w-full h-48 bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center" },
                React.createElement(Icon, { name: "Star", className: "h-12 w-12 text-slate-300" })
              ),
          React.createElement('div', { className: "p-5" },
            React.createElement('h3', { className: "text-lg font-bold text-slate-900 mb-2" }, activity.title || activity.program),
            activity.target_audience && React.createElement('p', { className: "text-sm text-slate-500 mb-2" },
              React.createElement(Icon, { name: "Users", className: "h-3 w-3 inline ml-1" }),
              activity.target_audience
            ),
            activity.description && React.createElement('p', { className: "text-sm text-slate-600 line-clamp-2 mb-3" },
              activity.description.substring(0, 120) + (activity.description.length > 120 ? '...' : '')
            ),
            (activity.videos && activity.videos.length > 0) && React.createElement('div', { className: "flex items-center gap-1 text-sm text-slate-500 mb-3" },
              React.createElement(Icon, { name: "Youtube", className: "h-4 w-4 text-red-500" }),
              React.createElement('span', null, activity.videos.length + " فيديو")
            ),
            React.createElement('div', { className: "flex items-center justify-between pt-3 border-t border-slate-100" },
              React.createElement('div', { className: "flex gap-1" },
                React.createElement('button', {
                  onClick: (e) => { e.stopPropagation(); shareWhatsApp(activity); },
                  className: "p-2 rounded-lg hover:bg-green-50 text-green-600 transition-colors",
                  title: "مشاركة عبر واتساب"
                }, React.createElement(Icon, { name: "Share2", className: "h-4 w-4" })),
                React.createElement('button', {
                  onClick: (e) => { e.stopPropagation(); shareTwitter(activity); },
                  className: "p-2 rounded-lg hover:bg-blue-50 text-blue-500 transition-colors",
                  title: "مشاركة عبر تويتر"
                }, React.createElement('svg', { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "currentColor" },
                  React.createElement('path', { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" })
                ))
              ),
              userRole === 'super_admin' && React.createElement('div', { className: "flex gap-1" },
                React.createElement('button', {
                  onClick: (e) => { e.stopPropagation(); onPin(activity.id, activity.is_pinned); },
                  className: `p-2 rounded-lg transition-colors ${activity.is_pinned ? 'text-amber-500 bg-amber-50' : 'text-slate-400 hover:bg-slate-50'}`,
                  title: activity.is_pinned ? "إلغاء التثبيت" : "تثبيت"
                }, React.createElement(Icon, { name: "Pin", className: "h-4 w-4" })),
                React.createElement('button', {
                  onClick: (e) => { e.stopPropagation(); onEdit(activity); },
                  className: "p-2 rounded-lg hover:bg-amber-50 text-amber-500 transition-colors",
                  title: "تعديل"
                }, React.createElement(Icon, { name: "Edit", className: "h-4 w-4" })),
                React.createElement('button', {
                  onClick: (e) => { e.stopPropagation(); onDelete(activity.id); },
                  className: "p-2 rounded-lg hover:bg-red-50 text-red-500 transition-colors",
                  title: "حذف"
                }, React.createElement(Icon, { name: "Trash2", className: "h-4 w-4" }))
              )
            )
          )
        )
      )
    )
  );
}

function FeaturedDetailModal({ onShowAlert, activity, onClose, siteColor = '#3b82f6' }) {
  const [imageIndex, setImageIndex] = useState(null);
  const [videoIndex, setVideoIndex] = useState(null);
  const shareUrl = window.location.origin + window.location.pathname + '#/featured/' + activity.id;

  useEffect(() => {
    window.location.hash = '#/featured/' + activity.id;
  }, [activity.id]);

  const nextImage = () => {
    if (!activity.images || activity.images.length === 0) return;
    setImageIndex(prev => (prev + 1) % activity.images.length);
  };

  const prevImage = () => {
    if (!activity.images || activity.images.length === 0) return;
    setImageIndex(prev => (prev - 1 + activity.images.length) % activity.images.length);
  };

  const nextVideo = () => {
    if (!activity.videos || activity.videos.length === 0) return;
    setVideoIndex(prev => (prev + 1) % activity.videos.length);
  };

  const prevVideo = () => {
    if (!activity.videos || activity.videos.length === 0) return;
    setVideoIndex(prev => (prev - 1 + activity.videos.length) % activity.videos.length);
  };

  useEffect(() => {
    const handleKey = (e) => {
      if (imageIndex !== null) {
        if (!activity.images || activity.images.length === 0) return;
        if (e.key === 'ArrowRight') {
          setImageIndex(prev => (prev - 1 + activity.images.length) % activity.images.length);
        } else if (e.key === 'ArrowLeft') {
          setImageIndex(prev => (prev + 1) % activity.images.length);
        } else if (e.key === 'Escape') {
          setImageIndex(null);
        }
      }
      if (videoIndex !== null) {
        if (e.key === 'Escape') setVideoIndex(null);
      }
    };
    window.addEventListener('keydown', handleKey);
    return () => window.removeEventListener('keydown', handleKey);
  }, [imageIndex, videoIndex, activity.images?.length, activity.videos?.length]);

  const shareWhatsApp = () => {
    const text = encodeURIComponent(`🌟 ${activity.title || activity.program}\n${activity.description?.substring(0, 100)}...\n${shareUrl}`);
    window.open(`https://wa.me/?text=${text}`, '_blank');
  };

  const shareTwitter = () => {
    const text = encodeURIComponent(`🌟 ${activity.title || activity.program}`);
    const url = encodeURIComponent(shareUrl);
    window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, '_blank');
  };

  const copyLink = () => {
    navigator.clipboard.writeText(shareUrl).then(() => { if(onShowAlert) onShowAlert('تم النسخ', 'تم نسخ الرابط!'); });
  };

  return React.createElement('div', {
    className: "fixed inset-0 bg-slate-900/80 backdrop-blur-sm flex justify-center items-center z-50 p-4",
    onClick: onClose
  },
    React.createElement('div', {
      className: "bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[90vh] flex flex-col overflow-hidden",
      onClick: e => e.stopPropagation()
    },
      React.createElement('div', { className: "p-6 border-b flex justify-between items-center bg-slate-50" },
        React.createElement('h2', { className: "text-xl font-bold flex items-center gap-2" },
          React.createElement(Icon, { name: "Star", style: { color: siteColor } }),
          " " + (activity.title || activity.program)
        ),
        React.createElement('button', { onClick: onClose, className: "text-slate-400 hover:text-red-500" },
          React.createElement(Icon, { name: "X" })
        )
      ),
      React.createElement('div', { className: "p-6 overflow-y-auto flex-1 space-y-6" },
        activity.target_audience && React.createElement('p', { className: "text-sm text-slate-500 flex items-center gap-2" },
          React.createElement(Icon, { name: "Users", style: { color: siteColor } }),
          activity.target_audience
        ),
        activity.description && React.createElement('div', { className: "prose max-w-none" },
          React.createElement('p', { className: "text-slate-700 leading-relaxed whitespace-pre-wrap" }, activity.description)
        ),
        activity.images && activity.images.length > 0 && React.createElement('div', null,
          React.createElement('h4', { className: "font-bold text-slate-800 mb-3 flex items-center gap-2" },
            React.createElement(Icon, { name: "Image", style: { color: siteColor } }),
            " ألبوم الصور"
          ),
          React.createElement('div', { className: "grid grid-cols-2 sm:grid-cols-3 gap-3" },
            activity.images.map((img, i) =>
              React.createElement('div', {
                key: i,
                className: "aspect-square rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity border border-slate-200",
                onClick: () => setImageIndex(i)
              },
                React.createElement('img', { src: img, alt: "صورة " + (i + 1), className: "w-full h-full object-cover" })
              )
            )
          )
        ),
        activity.videos && activity.videos.length > 0 && React.createElement('div', null,
          React.createElement('h4', { className: "font-bold text-slate-800 mb-3 flex items-center gap-2" },
            React.createElement(Icon, { name: "Youtube", className: "text-red-500" }),
            " ألبوم الفيديوهات"
          ),
          React.createElement('div', { className: "grid grid-cols-1 sm:grid-cols-2 gap-3" },
            activity.videos.map((vid, i) => {
              const thumb = getYoutubeThumbnail(vid);
              const vidId = getYoutubeId(vid);
              return React.createElement('div', {
                key: i,
                className: "relative rounded-lg overflow-hidden cursor-pointer group border border-slate-200",
                onClick: () => setVideoIndex(i)
              },
                thumb
                  ? React.createElement('img', { src: thumb, alt: "فيديو " + (i + 1), className: "w-full aspect-video object-cover" })
                  : React.createElement('div', { className: "w-full aspect-video bg-slate-100 flex items-center justify-center" },
                      React.createElement(Icon, { name: "Youtube", className: "h-12 w-12 text-red-500" })
                    ),
                React.createElement('div', { className: "absolute inset-0 bg-black/30 flex items-center justify-center group-hover:bg-black/50 transition-colors" },
                  React.createElement('div', { className: "bg-white/90 rounded-full p-3" },
                    React.createElement(Icon, { name: "Play", className: "h-6 w-6 text-red-500" })
                  )
                )
              );
            })
          )
        ),
        React.createElement('div', { className: "flex gap-2 pt-4 border-t border-slate-100" },
          React.createElement('button', {
            onClick: shareWhatsApp,
            className: "flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors text-sm font-medium"
          }, React.createElement(Icon, { name: "Share2", className: "h-4 w-4" }), " واتساب"),
          React.createElement('button', {
            onClick: shareTwitter,
            className: "flex items-center gap-2 px-4 py-2 bg-slate-800 text-white rounded-lg hover:bg-slate-900 transition-colors text-sm font-medium"
          }, React.createElement('svg', { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "currentColor" },
            React.createElement('path', { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" })
          ), " تويتر"),
          React.createElement('button', {
            onClick: copyLink,
            className: "flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors text-sm font-medium"
          }, React.createElement(Icon, { name: "Copy", className: "h-4 w-4" }), " نسخ الرابط")
        )
      )
    ),
    imageIndex !== null && React.createElement('div', {
      className: "fixed inset-0 bg-black/95 backdrop-blur-sm flex justify-center items-center z-[60] p-4",
      onClick: () => setImageIndex(null)
    },
      React.createElement('button', {
        onClick: () => setImageIndex(null),
        className: "absolute top-4 left-4 bg-white/20 hover:bg-white/40 p-3 rounded-full transition-colors z-10"
      }, React.createElement(Icon, { name: "X", className: "h-6 w-6 text-white" })),
      activity.images && activity.images.length > 1 && React.createElement('button', {
        onClick: (e) => { e.stopPropagation(); prevImage(); },
        className: "absolute right-4 bg-white/20 hover:bg-white/40 p-3 rounded-full transition-colors z-10"
      }, React.createElement(Icon, { name: "ChevronRight", className: "h-8 w-8 text-white" })),
      activity.images && activity.images.length > 1 && React.createElement('button', {
        onClick: (e) => { e.stopPropagation(); nextImage(); },
        className: "absolute left-4 bg-white/20 hover:bg-white/40 p-3 rounded-full transition-colors z-10"
      }, React.createElement(Icon, { name: "ChevronLeft", className: "h-8 w-8 text-white" })),
      React.createElement('img', {
        src: activity.images[imageIndex],
        alt: "صورة " + (imageIndex + 1),
        className: "max-w-full max-h-[90vh] object-contain rounded-lg",
        onClick: e => e.stopPropagation()
      }),
      activity.images && activity.images.length > 1 && React.createElement('div', {
        className: "absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-full text-sm font-medium"
      }, (imageIndex + 1) + " / " + activity.images.length)
    ),
    videoIndex !== null && React.createElement('div', {
      className: "fixed inset-0 bg-black/95 backdrop-blur-sm flex justify-center items-center z-[60] p-4",
      onClick: () => setVideoIndex(null)
    },
      React.createElement('button', {
        onClick: () => setVideoIndex(null),
        className: "absolute top-4 left-4 bg-white/20 hover:bg-white/40 p-3 rounded-full transition-colors z-10"
      }, React.createElement(Icon, { name: "X", className: "h-6 w-6 text-white" })),
      activity.videos && activity.videos.length > 1 && React.createElement('button', {
        onClick: (e) => { e.stopPropagation(); prevVideo(); },
        className: "absolute right-4 bg-white/20 hover:bg-white/40 p-3 rounded-full transition-colors z-10"
      }, React.createElement(Icon, { name: "ChevronRight", className: "h-8 w-8 text-white" })),
      activity.videos && activity.videos.length > 1 && React.createElement('button', {
        onClick: (e) => { e.stopPropagation(); nextVideo(); },
        className: "absolute left-4 bg-white/20 hover:bg-white/40 p-3 rounded-full transition-colors z-10"
      }, React.createElement(Icon, { name: "ChevronLeft", className: "h-8 w-8 text-white" })),
      React.createElement('div', { className: "w-full max-w-4xl aspect-video", onClick: e => e.stopPropagation() },
        React.createElement('iframe', {
          src: `https://www.youtube.com/embed/${getYoutubeId(activity.videos[videoIndex]) || activity.videos[videoIndex]}?autoplay=1`,
          className: "w-full h-full rounded-lg",
          allow: "autoplay; encrypted-media",
          allowFullScreen: true,
          frameBorder: "0"
        })
      ),
      activity.videos && activity.videos.length > 1 && React.createElement('div', {
        className: "absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-full text-sm font-medium"
      }, (videoIndex + 1) + " / " + activity.videos.length)
    )
  );
}

function FeaturedFormModal({ onShowAlert, onClose, editingActivity, siteColor = '#3b82f6', metadata = {} }) {
  const [formData, setFormData] = useState({
    title: editingActivity?.title || '',
    program: editingActivity?.program || '',
    target_audience: editingActivity?.target_audience || '',
    description: editingActivity?.description || '',
    images: editingActivity?.images || [],
    videos: editingActivity?.videos || [],
    is_pinned: editingActivity?.is_pinned || false
  });
  const [newImageUrl, setNewImageUrl] = useState('');
  const [newVideoUrl, setNewVideoUrl] = useState('');
  const [imagePreview, setImagePreview] = useState(editingActivity?.images?.[0] || '');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [imageFile, setImageFile] = useState(null);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [imageTab, setImageTab] = useState(editingActivity?.images?.[0] ? 'url' : 'upload');

  const addImage = () => {
    if (!newImageUrl.trim()) return;
    setFormData({ ...formData, images: [...formData.images, newImageUrl.trim()] });
    setNewImageUrl('');
    setImagePreview('');
  };

  const removeImage = (idx) => {
    setFormData({ ...formData, images: formData.images.filter((_, i) => i !== idx) });
  };

  const handleImageFile = (file) => {
    if (!file) return;
    setImageFile(file);
    const reader = new FileReader();
    reader.onloadend = () => setImagePreview(reader.result);
    reader.readAsDataURL(file);
  };

  const uploadImage = async () => {
    if (!imageFile) return newImageUrl.trim() || null;
    setUploadProgress(10);
    const ext = imageFile.name.split('.').pop();
    const fileName = `activities/${Date.now()}-${Math.random().toString(36).substring(7)}.${ext}`;
    setUploadProgress(30);
    const { data, error } = await supabase.storage
      .from('report-images')
      .upload(fileName, imageFile, {
        cacheControl: '3600',
        upsert: false
      });
    if (error) throw error;
    setUploadProgress(70);
    const { data: { publicUrl } } = supabase.storage
      .from('report-images')
      .getPublicUrl(data.path);
    setUploadProgress(100);
    return publicUrl;
  };

  const addVideo = () => {
    if (!newVideoUrl.trim()) return;
    setFormData({ ...formData, videos: [...formData.videos, newVideoUrl.trim()] });
    setNewVideoUrl('');
  };

  const removeVideo = (idx) => {
    setFormData({ ...formData, videos: formData.videos.filter((_, i) => i !== idx) });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!formData.title.trim()) {
      if (onShowAlert) onShowAlert('بيانات ناقصة', 'أدخل عنوان النشاط'); else alert('أدخل عنوان النشاط');
      return;
    }
    if (!formData.description.trim()) {
      if (onShowAlert) onShowAlert('بيانات ناقصة', 'أدخل وصف النشاط'); else alert('أدخل وصف النشاط');
      return;
    }

    setIsSubmitting(true);
    setUploadProgress(0);
    try {
      let finalImageUrl = null;
      if (imageFile) {
        finalImageUrl = await uploadImage();
      } else if (newImageUrl.trim()) {
        finalImageUrl = newImageUrl.trim();
      }

      const imagesArray = [...formData.images];
      if (finalImageUrl && !imagesArray.includes(finalImageUrl)) {
        imagesArray.push(finalImageUrl);
      }

      const dataToSave = {
        title: formData.title.trim(),
        program: formData.program.trim(),
        target_audience: formData.target_audience.trim(),
        description: formData.description.trim(),
        images: imagesArray,
        videos: formData.videos || [],
        is_pinned: formData.is_pinned || false
      };

      if (editingActivity) {
        const { error } = await supabase
          .from('featured_activities')
          .update(dataToSave)
          .eq('id', editingActivity.id)
          .select();
        if (error) throw error;
      } else {
        const { error } = await supabase
          .from('featured_activities')
          .insert([{ ...dataToSave, created_at: new Date().toISOString() }])
          .select();
        if (error) throw error;
      }
      onClose();
    } catch (err) {
      if (onShowAlert) onShowAlert('خطأ', 'خطأ في الحفظ: ' + (err.message || 'خطأ غير معروف')); else alert('خطأ في الحفظ');
    } finally {
      setIsSubmitting(false);
      setUploadProgress(0);
    }
  };

  return React.createElement('div', { className: "fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex justify-center items-center z-50 p-4 print:hidden" },
    React.createElement('div', { className: "bg-white rounded-2xl shadow-xl w-full max-w-3xl max-h-[95vh] flex flex-col overflow-hidden" },
      React.createElement('div', { className: "p-6 border-b flex justify-between items-center bg-slate-50" },
        React.createElement('h2', { className: "text-xl font-bold flex items-center gap-2" },
          React.createElement(Icon, { name: "Star", style: { color: siteColor } }),
          " " + (editingActivity ? 'تعديل نشاط مميز' : 'إضافة نشاط مميز جديد')
        ),
        React.createElement('button', { onClick: onClose, className: "text-slate-400 hover:text-red-500" },
          React.createElement(Icon, { name: "X" })
        )
      ),
      React.createElement('form', { onSubmit: handleSubmit, className: "p-6 overflow-y-auto flex-1 space-y-5" },
        React.createElement('div', null,
          React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "عنوان النشاط المميز *"),
          React.createElement('input', {
            type: "text", required: true,
            className: "w-full p-2.5 border rounded-lg outline-none",
            style: { borderColor: siteColor },
            value: formData.title,
            onChange: (e) => setFormData({...formData, title: e.target.value}),
            placeholder: "مثال: حملة توزيع السلال الغذائية"
          })
        ),
        React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 gap-4" },
          React.createElement('div', null,
            React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "البرنامج"),
            React.createElement('select', {
              className: "w-full p-2.5 border rounded-lg outline-none bg-white",
              style: { borderColor: siteColor },
              value: formData.program,
              onChange: (e) => setFormData({...formData, program: e.target.value})
            },
              React.createElement('option', { value: "" }, "-- اختر برنامج --"),
              (metadata.programs || []).map(p => React.createElement('option', { key: p, value: p }, p))
            )
          ),
          React.createElement('div', null,
            React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "الفئة المستهدفة"),
            React.createElement('select', {
              className: "w-full p-2.5 border rounded-lg outline-none bg-white",
              style: { borderColor: siteColor },
              value: formData.target_audience,
              onChange: (e) => setFormData({...formData, target_audience: e.target.value})
            },
              React.createElement('option', { value: "" }, "-- اختر فئة --"),
              (metadata.targetAudiences || []).map(t => React.createElement('option', { key: t, value: t }, t))
            )
          )
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "وصف النشاط *"),
          React.createElement('textarea', {
            required: true, rows: 5,
            className: "w-full p-2.5 border rounded-lg outline-none resize-none",
            style: { borderColor: siteColor },
            value: formData.description,
            onChange: (e) => setFormData({...formData, description: e.target.value}),
            placeholder: "اكتب وصفاً تفصيلياً للنشاط..."
          })
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "صورة النشاط (اختياري)"),
          React.createElement('div', { className: "flex gap-1 mb-2" },
            React.createElement('button', {
              type: "button",
              onClick: () => setImageTab('upload'),
              className: `flex-1 py-1.5 text-xs font-bold rounded ${imageTab === 'upload' ? 'text-white' : 'bg-slate-100 text-slate-600'}`,
              style: imageTab === 'upload' ? { backgroundColor: siteColor } : {}
            }, "رفع ملف"),
            React.createElement('button', {
              type: "button",
              onClick: () => setImageTab('url'),
              className: `flex-1 py-1.5 text-xs font-bold rounded ${imageTab === 'url' ? 'text-white' : 'bg-slate-100 text-slate-600'}`,
              style: imageTab === 'url' ? { backgroundColor: siteColor } : {}
            }, "رابط")
          ),
          imageTab === 'upload'
            ? React.createElement('div', { className: "space-y-2" },
                React.createElement('label', {
                  className: "flex flex-col items-center justify-center w-full h-20 border-2 border-dashed rounded-lg cursor-pointer hover:bg-slate-50",
                  style: { borderColor: siteColor }
                },
                  React.createElement('div', { className: "flex flex-col items-center justify-center pt-3" },
                    React.createElement(Icon, { name: "Upload", className: "h-4 w-4 mb-1", style: { color: siteColor } }),
                    React.createElement('p', { className: "text-xs text-slate-500" }, imageFile ? imageFile.name : "اضغط لاختيار صورة")
                  ),
                  React.createElement('input', {
                    type: "file",
                    className: "hidden",
                    accept: "image/*",
                    onChange: (e) => handleImageFile(e.target.files[0])
                  })
                ),
                imagePreview && React.createElement('img', { src: imagePreview, className: "w-full h-20 object-cover rounded-lg", alt: "معاينة" })
              )
            : React.createElement('div', { className: "flex gap-2" },
                React.createElement('input', {
                  type: "url",
                  className: "flex-1 p-2.5 border rounded-lg outline-none text-sm",
                  style: { borderColor: siteColor },
                  value: newImageUrl,
                  onChange: (e) => { setNewImageUrl(e.target.value); setImagePreview(e.target.value); },
                  placeholder: "https://example.com/image.jpg"
                }),
                React.createElement('button', {
                  type: "button", onClick: addImage,
                  className: "px-4 py-2 text-white rounded-lg text-sm",
                  style: { backgroundColor: siteColor }
                }, React.createElement(Icon, { name: "Plus", className: "h-4 w-4" }))
              ),
          formData.images.length > 0 && React.createElement('div', { className: "grid grid-cols-4 gap-2 mt-2" },
            formData.images.map((img, i) =>
              React.createElement('div', { key: i, className: "relative group" },
                React.createElement('img', { src: img, alt: "صورة " + (i+1), className: "w-full aspect-square object-cover rounded-lg border" }),
                React.createElement('button', {
                  type: "button",
                  onClick: () => removeImage(i),
                  className: "absolute top-1 left-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
                }, React.createElement(Icon, { name: "X", className: "h-3 w-3" }))
              )
            )
          )
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-2" }, "فيديوهات يوتيوب (روابط)"),
          React.createElement('div', { className: "flex gap-2 mb-2" },
            React.createElement('input', {
              type: "url",
              className: "flex-1 p-2.5 border rounded-lg outline-none text-sm",
              style: { borderColor: siteColor },
              value: newVideoUrl,
              onChange: (e) => setNewVideoUrl(e.target.value),
              placeholder: "https://www.youtube.com/watch?v=..."
            }),
            React.createElement('button', {
              type: "button", onClick: addVideo,
              className: "px-4 py-2 bg-red-500 text-white rounded-lg text-sm"
            }, React.createElement(Icon, { name: "Youtube", className: "h-4 w-4" }))
          ),
          formData.videos.length > 0 && React.createElement('div', { className: "grid grid-cols-3 gap-2" },
            formData.videos.map((vid, i) => {
              const thumb = getYoutubeThumbnail(vid);
              return React.createElement('div', { key: i, className: "relative group" },
                thumb
                  ? React.createElement('img', { src: thumb, alt: "فيديو " + (i+1), className: "w-full aspect-video object-cover rounded-lg border" })
                  : React.createElement('div', { className: "w-full aspect-video bg-slate-100 rounded-lg border flex items-center justify-center" },
                      React.createElement(Icon, { name: "Youtube", className: "h-8 w-8 text-red-500" })
                    ),
                React.createElement('button', {
                  type: "button",
                  onClick: () => removeVideo(i),
                  className: "absolute top-1 left-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
                }, React.createElement(Icon, { name: "X", className: "h-3 w-3" }))
              );
            })
          )
        ),
        React.createElement('div', { className: "flex items-center gap-2" },
          React.createElement('input', {
            type: "checkbox",
            id: "is_pinned",
            checked: formData.is_pinned,
            onChange: (e) => setFormData({...formData, is_pinned: e.target.checked})
          }),
          React.createElement('label', { htmlFor: "is_pinned", className: "text-sm font-bold text-slate-700 flex items-center gap-1" },
            React.createElement(Icon, { name: "Pin", className: "h-4 w-4 text-amber-500" }),
            " تثبيت هذا النشاط في الأعلى"
          )
        ),
        React.createElement('div', { className: "p-4 border-t bg-slate-50 flex justify-end gap-3" },
          React.createElement('button', { type: "button", onClick: onClose, className: "px-6 py-2 text-slate-600 font-bold" }, "إلغاء"),
          React.createElement('button', {
            type: "submit",
            disabled: isSubmitting,
            className: "px-8 py-2 text-white font-bold rounded-lg hover:opacity-90 disabled:opacity-50",
            style: { backgroundColor: siteColor }
          }, isSubmitting ? 'جاري الحفظ...' : (editingActivity ? 'تحديث' : 'إضافة'))
        )
      )
    )
  );
}

function AccountsManagementModal({ onShowAlert, onClose, adminUsers, onCreateUser, onDeleteUser, isCreating, isDeleting, currentUserId, siteColor = '#3b82f6' }) {
  const [activeTab, setActiveTab] = useState('register');
  const [email, setEmail] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [role, setRole] = useState('editor');
  const [showPassword, setShowPassword] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email.trim() || !username.trim() || !password.trim()) {
      return onShowAlert('بيانات ناقصة', 'أدخل جميع الحقول المطلوبة');
    }
    if (password !== confirmPassword) {
      return onShowAlert('خطأ', 'كلمتا المرور غير متطابقتين');
    }
    if (password.length < 6) {
      return onShowAlert('خطأ', 'كلمة المرور يجب أن تكون 6 أحرف على الأقل');
    }
    await onCreateUser(email.trim(), password.trim(), role, username.trim());
    if (!isCreating) {
      setEmail('');
      setUsername('');
      setPassword('');
      setConfirmPassword('');
      setRole('editor');
      setShowPassword(false);
    }
  };

  return React.createElement('div', { className: "fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex justify-center items-center z-50 p-4 print:hidden" },
    React.createElement('div', { className: "bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col overflow-hidden" },
      React.createElement('div', { className: "p-6 border-b flex justify-between items-center bg-slate-50" },
        React.createElement('h2', { className: "text-xl font-bold flex items-center gap-2" },
          React.createElement(Icon, { name: "Users", style: { color: siteColor } }),
          " إدارة الحسابات"
        ),
        React.createElement('button', { onClick: onClose, className: "text-slate-400 hover:text-red-500" },
          React.createElement(Icon, { name: "X" })
        )
      ),
      React.createElement('div', { className: "flex border-b" },
        React.createElement('button', {
          onClick: () => setActiveTab('register'),
          className: `flex-1 py-3 text-sm font-bold transition-all border-b-2 ${activeTab === 'register' ? '' : 'border-transparent text-slate-400 hover:text-slate-600'}`,
          style: activeTab === 'register' ? { borderColor: siteColor, color: siteColor, backgroundColor: `${siteColor}10` } : {}
        }, React.createElement(Icon, { name: "Plus", className: "h-4 w-4" }), " تسجيل حساب جديد"),
        React.createElement('button', {
          onClick: () => setActiveTab('list'),
          className: `flex-1 py-3 text-sm font-bold transition-all border-b-2 ${activeTab === 'list' ? '' : 'border-transparent text-slate-400 hover:text-slate-600'}`,
          style: activeTab === 'list' ? { borderColor: siteColor, color: siteColor, backgroundColor: `${siteColor}10` } : {}
        }, React.createElement(Icon, { name: "List", className: "h-4 w-4" }), " الحسابات الحالية")
      ),
      React.createElement('div', { className: "p-6 overflow-y-auto flex-1" },
        activeTab === 'register'
          ? React.createElement('form', { onSubmit: handleSubmit, className: "space-y-4" },
              React.createElement('div', { className: "bg-slate-50 p-4 rounded-xl space-y-4" },
                React.createElement('h3', { className: "font-bold text-slate-700 flex items-center gap-2" },
                  React.createElement(Icon, { name: "Plus", style: { color: siteColor }, className: "h-4 w-4" }),
                  " بيانات الحساب الجديد"
                ),
                React.createElement('div', null,
                  React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "البريد الإلكتروني *"),
                  React.createElement('input', {
                    type: "email", required: true,
                    className: "w-full p-2.5 border rounded-lg outline-none",
                    style: { borderColor: siteColor },
                    value: email,
                    onChange: (e) => setEmail(e.target.value),
                    placeholder: "user@example.com"
                  })
                ),
                React.createElement('div', null,
                  React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "اسم المستخدم *"),
                  React.createElement('input', {
                    type: "text", required: true,
                    className: "w-full p-2.5 border rounded-lg outline-none",
                    style: { borderColor: siteColor },
                    value: username,
                    onChange: (e) => setUsername(e.target.value),
                    placeholder: "username"
                  })
                ),
                React.createElement('div', { className: "grid grid-cols-1 sm:grid-cols-2 gap-3" },
                  React.createElement('div', null,
                    React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "كلمة المرور *"),
                    React.createElement('div', { className: "relative" },
                      React.createElement('input', {
                        type: showPassword ? "text" : "password", required: true,
                        className: "w-full p-2.5 border rounded-lg outline-none pl-10",
                        style: { borderColor: siteColor },
                        value: password,
                        onChange: (e) => setPassword(e.target.value),
                        placeholder: "********"
                      }),
                      React.createElement('button', {
                        type: "button",
                        onClick: () => setShowPassword(!showPassword),
                        className: "absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                      }, React.createElement(Icon, { name: showPassword ? "EyeOff" : "Eye", className: "h-4 w-4" }))
                    )
                  ),
                  React.createElement('div', null,
                    React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "تأكيد كلمة المرور *"),
                    React.createElement('input', {
                      type: showPassword ? "text" : "password", required: true,
                      className: "w-full p-2.5 border rounded-lg outline-none",
                      style: { borderColor: confirmPassword && confirmPassword !== password ? '#ef4444' : siteColor },
                      value: confirmPassword,
                      onChange: (e) => setConfirmPassword(e.target.value),
                      placeholder: "أعد كتابة كلمة المرور"
                    })
                  )
                ),
                React.createElement('div', null,
                  React.createElement('label', { className: "block text-xs font-bold text-slate-500 mb-1" }, "الرتبة"),
                  React.createElement('select', {
                    className: "w-full p-2.5 border rounded-lg outline-none bg-white",
                    style: { borderColor: siteColor },
                    value: role,
                    onChange: (e) => setRole(e.target.value)
                  },
                    React.createElement('option', { value: "editor" }, "محرر (editor)"),
                    React.createElement('option', { value: "super_admin" }, "مدير عام (super_admin)")
                  )
                )
              ),
              React.createElement('div', { className: "flex justify-end" },
                React.createElement('button', {
                  type: "submit",
                  disabled: isCreating,
                  className: "py-2.5 px-8 text-white font-bold rounded-lg hover:opacity-90 disabled:opacity-50",
                  style: { backgroundColor: siteColor }
                }, isCreating ? 'جاري التسجيل...' : 'تسجيل الحساب')
              )
            )
          : React.createElement('div', { className: "space-y-3" },
              adminUsers.length === 0
                ? React.createElement('p', { className: "text-slate-400 text-center py-8" }, "لا توجد حسابات")
                : adminUsers.map((u) =>
                    React.createElement('div', {
                      key: u.id,
                      className: "flex items-center justify-between p-3 rounded-lg border border-slate-200 bg-white"
                    },
                      React.createElement('div', { className: "flex items-center gap-3" },
                        React.createElement('div', {
                          className: "h-10 w-10 rounded-full flex items-center justify-center text-white font-bold text-sm",
                          style: { backgroundColor: siteColor }
                        }, (u.email || '?').charAt(0).toUpperCase()),
                        React.createElement('div', null,
                          React.createElement('p', { className: "font-medium text-sm text-slate-800" }, u.username ? u.username + ' (' + u.email + ')' : u.email),
                          React.createElement('span', {
                            className: "text-xs px-2 py-0.5 rounded-full font-bold",
                            style: {
                              backgroundColor: u.role === 'super_admin' ? `${siteColor}20` : '#f59e0b20',
                              color: u.role === 'super_admin' ? siteColor : '#f59e0b'
                            }
                          }, u.role === 'super_admin' ? 'مدير عام' : 'محرر')
                        )
                      ),
                      u.id !== currentUserId
                        ? React.createElement('button', {
                            onClick: () => onDeleteUser(u.id),
                            disabled: isDeleting === u.id,
                            className: "p-2 rounded-lg hover:bg-red-50 text-red-500 transition-colors disabled:opacity-50",
                            title: "حذف"
                          }, isDeleting === u.id
                            ? React.createElement('span', { className: "text-xs" }, "جاري...")
                            : React.createElement(Icon, { name: "Trash2", className: "h-4 w-4" })
                          )
                        : React.createElement('span', { className: "text-xs text-slate-400 px-2" }, "(أنت)")
                    )
                  )
            )
      ),
      React.createElement('div', { className: "p-4 border-t bg-slate-50 flex justify-end" },
        React.createElement('button', { onClick: onClose, className: "px-6 py-2 text-slate-600 font-bold" }, "إغلاق")
      )
    )
  );
}

// Mount the app
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));

// ========== PROGRAMS PAGE ==========
function ProgramsPage({ activities, isAdmin, userRole, onAdd, onEdit, onDelete, onPin, onSelect, siteColor = '#3b82f6' }) {
  const sorted = useMemo(() => {
    return [...activities].sort((a, b) => {
      if (a.is_pinned && !b.is_pinned) return -1;
      if (!a.is_pinned && b.is_pinned) return 1;
      return new Date(b.created_at) - new Date(a.created_at);
    });
  }, [activities]);

  const shareUrl = (activity) => window.location.origin + window.location.pathname + '#/programs/' + activity.id;

  const shareWhatsApp = (activity) => {
    const text = encodeURIComponent(`🏢 ${activity.title || activity.description}\n${activity.description?.substring(0, 100)}...\n${shareUrl(activity)}`);
    window.open(`https://wa.me/?text=${text}`, '_blank');
  };

  const shareTwitter = (activity) => {
    const text = encodeURIComponent(`🏢 ${activity.title || activity.description}`);
    const url = encodeURIComponent(shareUrl(activity));
    window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, '_blank');
  };

  if (activities.length === 0) return React.createElement('div', { className: "space-y-6" },
    userRole === 'super_admin' && React.createElement('div', { className: "flex justify-end" },
      React.createElement('button', {
        onClick: onAdd,
        className: "flex items-center gap-2 text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity",
        style: { backgroundColor: siteColor }
      }, React.createElement(Icon, { name: "Plus", className: "h-4 w-4" }), " إضافة برنامج")
    ),
    React.createElement(EmptyState, { icon: "LayoutDashboard", text: "لا توجد برامج حالياً" })
  );

  return React.createElement('div', { className: "space-y-6" },
    React.createElement('div', { className: "bg-white rounded-xl shadow-sm border border-slate-200 p-4" },
      React.createElement('h2', { className: "text-xl font-bold text-slate-800 mb-2" }, "برامج الجمعية الرئيسية"),
      React.createElement('p', { className: "text-slate-500 text-sm" }, "تصفح البرامج والمبادرات التي تنفذها الجمعية")
    ),
    userRole === 'super_admin' && React.createElement('div', { className: "flex justify-end" },
      React.createElement('button', {
        onClick: onAdd,
        className: "flex items-center gap-2 text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity",
        style: { backgroundColor: siteColor }
      }, React.createElement(Icon, { name: "Plus", className: "h-4 w-4" }), " إضافة برنامج")
    ),
    React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" },
      sorted.map((activity) =>
        React.createElement('div', {
          key: activity.id,
          className: "bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer relative",
          onClick: () => onSelect(activity)
        },
          activity.is_pinned && React.createElement('div', {
            className: "absolute top-2 right-2 z-10 px-2 py-1 rounded-full text-xs font-bold text-white flex items-center gap-1",
            style: { backgroundColor: siteColor }
          }, React.createElement(Icon, { name: "Pin", className: "h-3 w-3" }), " مثبت"),
          activity.images && activity.images.length > 0
            ? React.createElement('div', { className: "w-full h-48 bg-slate-100 relative" },
                React.createElement('img', { src: activity.images[0], alt: activity.title, className: "w-full h-full object-cover" }),
                activity.images.length > 1 && React.createElement('div', {
                  className: "absolute bottom-2 left-2 bg-black/60 text-white text-xs px-2 py-1 rounded-full"
                }, "+" + (activity.images.length - 1) + " صور")
              )
            : React.createElement('div', { className: "w-full h-48 bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center" },
                React.createElement(Icon, { name: "LayoutDashboard", className: "h-12 w-12 text-slate-300" })
              ),
          React.createElement('div', { className: "p-5" },
            React.createElement('h3', { className: "text-lg font-bold text-slate-900 mb-2" }, activity.title),
            activity.target_audience && React.createElement('p', { className: "text-sm text-slate-500 mb-2" },
              React.createElement(Icon, { name: "Users", className: "h-3 w-3 inline ml-1" }),
              activity.target_audience
            ),
            activity.description && React.createElement('p', { className: "text-sm text-slate-600 line-clamp-2 mb-3" },
              activity.description.substring(0, 120) + (activity.description.length > 120 ? '...' : '')
            ),
            activity.objectives && activity.objectives.length > 0 && React.createElement('div', { className: "mb-2" },
              React.createElement('p', { className: "text-xs font-bold text-slate-600 mb-1" }, "الأهداف:"),
              React.createElement('ul', { className: "text-xs text-slate-500 space-y-1" },
                activity.objectives.slice(0, 2).map((obj, idx) =>
                  React.createElement('li', { key: idx, className: "flex items-start gap-1" },
                    React.createElement('span', { 
                      className: "inline-flex items-center justify-center w-4 h-4 rounded-full text-white text-[10px] font-bold flex-shrink-0",
                      style: { backgroundColor: siteColor }
                    }, idx + 1),
                    React.createElement('span', { className: "line-clamp-1" }, obj)
                  )
                ),
                activity.objectives.length > 2 && React.createElement('li', { className: "text-xs" }, "+" + (activity.objectives.length - 2) + " أهداف أخرى")
              )
            ),
            activity.activities && activity.activities.length > 0 && React.createElement('div', { className: "mb-2" },
              React.createElement('p', { className: "text-xs font-bold text-slate-600 mb-1" }, "الأنشطة:"),
              React.createElement('ul', { className: "text-xs text-slate-500 space-y-1" },
                activity.activities.slice(0, 2).map((act, idx) =>
                  React.createElement('li', { key: idx, className: "flex items-start gap-1" },
                    React.createElement('span', { 
                      className: "inline-flex items-center justify-center w-4 h-4 rounded-full text-white text-[10px] font-bold flex-shrink-0",
                      style: { backgroundColor: '#10b981' }
                    }, idx + 1),
                    React.createElement('span', { className: "line-clamp-1" }, act)
                  )
                ),
                activity.activities.length > 2 && React.createElement('li', { className: "text-xs" }, "+" + (activity.activities.length - 2) + " أنشطة أخرى")
              )
            ),
            activity.execution_scope && React.createElement('p', { className: "text-xs text-slate-500 mb-2" },
              React.createElement(Icon, { name: "ExternalLink", className: "h-3 w-3 inline ml-1" }),
              activity.execution_scope
            ),
            (activity.videos && activity.videos.length > 0) && React.createElement('div', { className: "flex items-center gap-1 text-sm text-slate-500 mb-3" },
              React.createElement(Icon, { name: "Youtube", className: "h-4 w-4 text-red-500" }),
              React.createElement('span', null, activity.videos.length + " فيديو")
            ),
            React.createElement('div', { className: "flex items-center justify-between pt-3 border-t border-slate-100" },
              React.createElement('div', { className: "flex gap-1" },
                React.createElement('button', {
                  onClick: (e) => { e.stopPropagation(); shareWhatsApp(activity); },
                  className: "p-2 rounded-lg hover:bg-green-50 text-green-600 transition-colors",
                  title: "مشاركة عبر واتساب"
                }, React.createElement(Icon, { name: "Share2", className: "h-4 w-4" })),
                React.createElement('button', {
                  onClick: (e) => { e.stopPropagation(); shareTwitter(activity); },
                  className: "p-2 rounded-lg hover:bg-blue-50 text-blue-500 transition-colors",
                  title: "مشاركة عبر تويتر"
                }, React.createElement('svg', { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "currentColor" },
                  React.createElement('path', { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" })
                ))
              ),
              userRole === 'super_admin' && React.createElement('div', { className: "flex gap-1" },
                React.createElement('button', {
                  onClick: (e) => { e.stopPropagation(); onPin(activity.id, activity.is_pinned); },
                  className: `p-2 rounded-lg transition-colors ${activity.is_pinned ? 'text-amber-500 bg-amber-50' : 'text-slate-400 hover:bg-slate-50'}`,
                  title: activity.is_pinned ? "إلغاء التثبيت" : "تثبيت"
                }, React.createElement(Icon, { name: "Pin", className: "h-4 w-4" })),
                React.createElement('button', {
                  onClick: (e) => { e.stopPropagation(); onEdit(activity); },
                  className: "p-2 rounded-lg hover:bg-amber-50 text-amber-500 transition-colors",
                  title: "تعديل"
                }, React.createElement(Icon, { name: "Edit", className: "h-4 w-4" })),
                React.createElement('button', {
                  onClick: (e) => { e.stopPropagation(); onDelete(activity.id); },
                  className: "p-2 rounded-lg hover:bg-red-50 text-red-500 transition-colors",
                  title: "حذف"
                }, React.createElement(Icon, { name: "Trash2", className: "h-4 w-4" }))
              )
            )
          )
        )
      )
    )
  );
}

function ProgramFormModal({ onShowAlert, onClose, editingActivity, siteColor = '#3b82f6' }) {
  const [formData, setFormData] = useState({
    title: editingActivity?.title || '',
    target_audience: editingActivity?.target_audience || '',
    description: editingActivity?.description || '',
    objectives: editingActivity?.objectives || [],
    activities: editingActivity?.activities || [],
    execution_scope: editingActivity?.execution_scope || '',
    images: editingActivity?.images || [],
    videos: editingActivity?.videos || [],
    is_pinned: editingActivity?.is_pinned || false
  });
  const [newImageUrl, setNewImageUrl] = useState('');
  const [newVideoUrl, setNewVideoUrl] = useState('');
  const [imagePreview, setImagePreview] = useState(editingActivity?.images?.[0] || '');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [imageFile, setImageFile] = useState(null);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [imageTab, setImageTab] = useState(editingActivity?.images?.[0] ? 'url' : 'upload');
  const [newObjective, setNewObjective] = useState('');
  const [newActivity, setNewActivity] = useState('');

  const addObjective = () => {
    if (!newObjective.trim()) return;
    setFormData({ ...formData, objectives: [...formData.objectives, newObjective.trim()] });
    setNewObjective('');
  };

  const removeObjective = (idx) => {
    setFormData({ ...formData, objectives: formData.objectives.filter((_, i) => i !== idx) });
  };

  const addActivity = () => {
    if (!newActivity.trim()) return;
    setFormData({ ...formData, activities: [...formData.activities, newActivity.trim()] });
    setNewActivity('');
  };

  const removeActivity = (idx) => {
    setFormData({ ...formData, activities: formData.activities.filter((_, i) => i !== idx) });
  };

  const addImage = () => {
    if (imageTab === 'upload') {
      if (!imageFile || !imagePreview) return;
      setFormData({ ...formData, images: [...formData.images, imagePreview] });
      setImageFile(null);
      setImagePreview(editingActivity?.images?.[0] || '');
    } else {
      if (!newImageUrl.trim()) return;
      setFormData({ ...formData, images: [...formData.images, newImageUrl.trim()] });
      setNewImageUrl('');
      setImagePreview('');
    }
  };

  const removeImage = (idx) => {
    setFormData({ ...formData, images: formData.images.filter((_, i) => i !== idx) });
  };

  const handleImageFile = (file) => {
    if (!file) return;
    setImageFile(file);
    const reader = new FileReader();
    reader.onloadend = () => setImagePreview(reader.result);
    reader.readAsDataURL(file);
  };

  const uploadImage = async () => {
    if (!imageFile) return newImageUrl.trim() || null;
    setUploadProgress(10);
    const ext = imageFile.name.split('.').pop();
    const fileName = `programs/${Date.now()}-${Math.random().toString(36).substring(7)}.${ext}`;
    setUploadProgress(30);
    const { data, error } = await supabase.storage
      .from('report-images')
      .upload(fileName, imageFile, {
        cacheControl: '3600',
        upsert: false
      });
    if (error) throw error;
    setUploadProgress(70);
    const { data: { publicUrl } } = supabase.storage
      .from('report-images')
      .getPublicUrl(data.path);
    setUploadProgress(100);
    return publicUrl;
  };

  const addVideo = () => {
    if (!newVideoUrl.trim()) return;
    setFormData({ ...formData, videos: [...formData.videos, newVideoUrl.trim()] });
    setNewVideoUrl('');
  };

  const removeVideo = (idx) => {
    setFormData({ ...formData, videos: formData.videos.filter((_, i) => i !== idx) });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!formData.title.trim()) {
      if (onShowAlert) onShowAlert('بيانات ناقصة', 'أدخل اسم البرنامج'); else alert('أدخل اسم البرنامج');
      return;
    }
    if (!formData.description.trim()) {
      if (onShowAlert) onShowAlert('بيانات ناقصة', 'أدخل وصف البرنامج'); else alert('أدخل وصف البرنامج');
      return;
    }

    setIsSubmitting(true);
    setUploadProgress(0);
    try {
      let finalImages = [...formData.images];
      
      if (imageTab === 'upload' && imageFile) {
        const uploadedUrl = await uploadImage();
        if (uploadedUrl && !finalImages.includes(uploadedUrl)) {
          finalImages.push(uploadedUrl);
        }
      } else if (imageTab === 'url' && newImageUrl.trim() && !formData.images.includes(newImageUrl.trim())) {
        finalImages.push(newImageUrl.trim());
      }

      const dataToSave = {
        title: formData.title.trim(),
        target_audience: formData.target_audience.trim(),
        description: formData.description.trim(),
        objectives: formData.objectives || [],
        activities: formData.activities || [],
        execution_scope: formData.execution_scope.trim(),
        images: finalImages,
        videos: formData.videos || [],
        is_pinned: formData.is_pinned || false
      };

      if (editingActivity) {
        const { error } = await supabase
          .from('programs')
          .update(dataToSave)
          .eq('id', editingActivity.id)
          .select();
        if (error) throw error;
      } else {
        const { error } = await supabase
          .from('programs')
          .insert([{ ...dataToSave, created_at: new Date().toISOString() }])
          .select();
        if (error) throw error;
      }
      onClose();
    } catch (error) {
      console.error(error);
      if (onShowAlert) onShowAlert('خطأ', 'حدث خطأ في حفظ البرنامج'); else alert('حدث خطأ في حفظ البرنامج');
    } finally {
      setIsSubmitting(false);
    }
  };

  return React.createElement('div', {
    className: "fixed inset-0 bg-slate-900/60 backdrop-blur-sm flex justify-center items-center z-50 p-4",
    onClick: onClose
  },
    React.createElement('div', {
      className: "bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto",
      onClick: e => e.stopPropagation()
    },
      React.createElement('div', {
        className: "p-4 text-white flex justify-between items-center sticky top-0",
        style: { backgroundColor: siteColor }
      },
        React.createElement('h2', { className: "text-lg font-bold" }, editingActivity ? "تعديل برنامج" : "إضافة برنامج جديد"),
        React.createElement('button', { onClick: onClose, className: "p-1 hover:bg-white/20 rounded" },
          React.createElement(Icon, { name: "X", className: "h-5 w-5" })
        )
      ),
      React.createElement('form', { onSubmit: handleSubmit, className: "p-4 space-y-4" },
        React.createElement('div', null,
          React.createElement('label', { className: "block text-sm font-medium text-slate-700 mb-1" }, "اسم البرنامج *"),
          React.createElement('input', {
            type: 'text',
            value: formData.title,
            onChange: (e) => setFormData({ ...formData, title: e.target.value }),
            className: "w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500",
            placeholder: "أدخل اسم البرنامج"
          })
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-sm font-medium text-slate-700 mb-1" }, "الفئة المستهدفة"),
          React.createElement('input', {
            type: 'text',
            value: formData.target_audience,
            onChange: (e) => setFormData({ ...formData, target_audience: e.target.value }),
            className: "w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500",
            placeholder: "أدخل الفئة المستهدفة"
          })
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-sm font-medium text-slate-700 mb-1" }, "الوصف *"),
          React.createElement('textarea', {
            value: formData.description,
            onChange: (e) => setFormData({ ...formData, description: e.target.value }),
            className: "w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 min-h-[120px]",
            placeholder: "أدخل وصف البرنامج"
          })
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-sm font-medium text-slate-700 mb-1" }, "أهداف البرنامج"),
          React.createElement('div', { className: "flex gap-2 mb-2" },
            React.createElement('input', {
              type: 'text',
              value: newObjective,
              onChange: (e) => setNewObjective(e.target.value),
              onKeyPress: (e) => { if (e.key === 'Enter') { e.preventDefault(); addObjective(); } },
              className: "flex-1 px-3 py-2 border rounded-lg",
              placeholder: "أدخل هدفاً جديداً"
            }),
            React.createElement('button', {
              type: 'button',
              onClick: addObjective,
              className: "px-4 py-2 text-white rounded-lg",
              style: { backgroundColor: siteColor }
            }, "إضافة")
          ),
          formData.objectives.length > 0 && React.createElement('div', { className: "space-y-2 mt-2" },
            formData.objectives.map((obj, idx) =>
              React.createElement('div', { key: idx, className: "flex items-center justify-between bg-slate-50 p-2 rounded" },
                React.createElement('span', { className: "text-sm text-slate-700 flex-1" }, (idx + 1) + ". " + obj),
                React.createElement('button', {
                  type: 'button',
                  onClick: () => removeObjective(idx),
                  className: "p-1 text-red-500 hover:bg-red-50 rounded mr-2"
                }, React.createElement(Icon, { name: "X", className: "h-4 w-4" }))
              )
            )
          )
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-sm font-medium text-slate-700 mb-1" }, "الأنشطة"),
          React.createElement('div', { className: "flex gap-2 mb-2" },
            React.createElement('input', {
              type: 'text',
              value: newActivity,
              onChange: (e) => setNewActivity(e.target.value),
              onKeyPress: (e) => { if (e.key === 'Enter') { e.preventDefault(); addActivity(); } },
              className: "flex-1 px-3 py-2 border rounded-lg",
              placeholder: "أدخل نشاطاً جديداً"
            }),
            React.createElement('button', {
              type: 'button',
              onClick: addActivity,
              className: "px-4 py-2 text-white rounded-lg",
              style: { backgroundColor: siteColor }
            }, "إضافة")
          ),
          formData.activities.length > 0 && React.createElement('div', { className: "space-y-2 mt-2" },
            formData.activities.map((act, idx) =>
              React.createElement('div', { key: idx, className: "flex items-center justify-between bg-slate-50 p-2 rounded" },
                React.createElement('span', { className: "text-sm text-slate-700 flex-1" }, (idx + 1) + ". " + act),
                React.createElement('button', {
                  type: 'button',
                  onClick: () => removeActivity(idx),
                  className: "p-1 text-red-500 hover:bg-red-50 rounded mr-2"
                }, React.createElement(Icon, { name: "X", className: "h-4 w-4" }))
              )
            )
          )
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-sm font-medium text-slate-700 mb-1" }, "نطاق التنفيذ"),
          React.createElement('input', {
            type: 'text',
            value: formData.execution_scope,
            onChange: (e) => setFormData({ ...formData, execution_scope: e.target.value }),
            className: "w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500",
            placeholder: "أدخل نطاق التنفيذ (داخلي / خارجي / دولي)"
          })
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-sm font-medium text-slate-700 mb-1" }, "الصور"),
          React.createElement('div', { className: "flex gap-1 mb-2" },
            React.createElement('button', {
              type: 'button',
              onClick: () => setImageTab('upload'),
              className: `flex-1 py-1.5 text-xs font-bold rounded ${imageTab === 'upload' ? 'text-white' : 'bg-slate-100 text-slate-600'}`,
              style: imageTab === 'upload' ? { backgroundColor: siteColor } : {}
            }, "رفع ملف"),
            React.createElement('button', {
              type: 'button',
              onClick: () => setImageTab('url'),
              className: `flex-1 py-1.5 text-xs font-bold rounded ${imageTab === 'url' ? 'text-white' : 'bg-slate-100 text-slate-600'}`,
              style: imageTab === 'url' ? { backgroundColor: siteColor } : {}
            }, "رابط")
          ),
          imageTab === 'upload'
            ? React.createElement('div', { className: "space-y-2" },
                React.createElement('label', {
                  className: "flex flex-col items-center justify-center w-full h-20 border-2 border-dashed rounded-lg cursor-pointer hover:bg-slate-50",
                  style: { borderColor: siteColor }
                },
                  React.createElement('div', { className: "flex flex-col items-center justify-center pt-3" },
                    React.createElement(Icon, { name: "Upload", className: "h-4 w-4 mb-1", style: { color: siteColor } }),
                    React.createElement('p', { className: "text-xs text-slate-500" }, imageFile ? imageFile.name : "اضغط لاختيار صورة")
                  ),
                  React.createElement('input', {
                    type: "file",
                    className: "hidden",
                    accept: "image/*",
                    onChange: (e) => handleImageFile(e.target.files[0])
                  })
                ),
                imagePreview && !imagePreview.startsWith('http') && React.createElement('div', { className: "flex items-center gap-2" },
                  React.createElement('img', { src: imagePreview, className: "w-20 h-20 object-cover rounded-lg", alt: "معاينة" }),
                  React.createElement('button', {
                    type: 'button',
                    onClick: addImage,
                    className: "flex-1 py-2 text-white rounded-lg font-medium",
                    style: { backgroundColor: siteColor }
                  }, "إضافة الصورة")
                )
              )
            : React.createElement('div', { className: "flex gap-2" },
                React.createElement('input', {
                  type: 'text',
                  value: newImageUrl,
                  onChange: (e) => { setNewImageUrl(e.target.value); setImagePreview(e.target.value); },
                  className: "flex-1 px-3 py-2 border rounded-lg",
                  placeholder: "رابط الصورة"
                }),
                React.createElement('button', {
                  type: 'button',
                  onClick: addImage,
                  className: "px-4 py-2 text-white rounded-lg",
                  style: { backgroundColor: siteColor }
                }, "إضافة")
              ),
          formData.images.length > 0 && React.createElement('div', { className: "grid grid-cols-4 gap-2 mt-2" },
            formData.images.map((img, idx) =>
              React.createElement('div', { key: idx, className: "relative group" },
                React.createElement('img', { src: img, alt: "صورة", className: "w-full h-16 object-cover rounded" }),
                React.createElement('button', {
                  type: 'button',
                  onClick: () => removeImage(idx),
                  className: "absolute top-0 left-0 bg-red-500 text-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
                }, React.createElement(Icon, { name: "X", className: "h-3 w-3" }))
              )
            )
          )
        ),
        React.createElement('div', null,
          React.createElement('label', { className: "block text-sm font-medium text-slate-700 mb-1" }, "الفيديوهات (روابط YouTube)"),
          React.createElement('div', { className: "flex gap-2 mb-2" },
            React.createElement('input', {
              type: 'text',
              value: newVideoUrl,
              onChange: (e) => setNewVideoUrl(e.target.value),
              className: "flex-1 px-3 py-2 border rounded-lg",
              placeholder: "رابط الفيديو"
            }),
            React.createElement('button', {
              type: 'button',
              onClick: addVideo,
              className: "px-4 py-2 text-white rounded-lg",
              style: { backgroundColor: siteColor }
            }, "إضافة")
          ),
          formData.videos.length > 0 && React.createElement('div', { className: "space-y-2 mt-2" },
            formData.videos.map((vid, idx) =>
              React.createElement('div', { key: idx, className: "flex items-center justify-between bg-slate-50 p-2 rounded" },
                React.createElement('span', { className: "text-sm text-slate-600 truncate flex-1" }, vid),
                React.createElement('button', {
                  type: 'button',
                  onClick: () => removeVideo(idx),
                  className: "p-1 text-red-500 hover:bg-red-50 rounded"
                }, React.createElement(Icon, { name: "X", className: "h-4 w-4" }))
              )
            )
          )
        ),
        React.createElement('div', { className: "flex items-center gap-2" },
          React.createElement('input', {
            type: 'checkbox',
            id: 'is_pinned',
            checked: formData.is_pinned,
            onChange: (e) => setFormData({ ...formData, is_pinned: e.target.checked }),
            className: "w-4 h-4"
          }),
          React.createElement('label', { htmlFor: 'is_pinned', className: "text-sm text-slate-700" }, "تثبيت في الأعلى")
        ),
        React.createElement('div', { className: "flex gap-2 pt-4" },
          React.createElement('button', {
            type: 'submit',
            disabled: isSubmitting,
            className: "flex-1 py-3 text-white rounded-lg font-bold disabled:opacity-50",
            style: { backgroundColor: siteColor }
          }, isSubmitting ? "جاري الحفظ..." : (editingActivity ? "حفظ التعديلات" : "إضافة البرنامج")),
          React.createElement('button', {
            type: 'button',
            onClick: onClose,
            className: "flex-1 py-3 bg-slate-100 text-slate-700 rounded-lg font-bold hover:bg-slate-200"
          }, "إلغاء")
        )
      )
    )
  );
}

function ProgramDetailModal({ onShowAlert, activity, onClose, siteColor = '#3b82f6' }) {
  const [imageIndex, setImageIndex] = useState(null);
  const [videoIndex, setVideoIndex] = useState(null);
  const shareUrl = window.location.origin + window.location.pathname + '#/programs/' + activity.id;

  useEffect(() => {
    window.location.hash = '#/programs/' + activity.id;
  }, [activity.id]);

  const nextImage = () => {
    if (!activity.images || activity.images.length === 0) return;
    setImageIndex(prev => (prev + 1) % activity.images.length);
  };

  const prevImage = () => {
    if (!activity.images || activity.images.length === 0) return;
    setImageIndex(prev => (prev - 1 + activity.images.length) % activity.images.length);
  };

  const nextVideo = () => {
    if (!activity.videos || activity.videos.length === 0) return;
    setVideoIndex(prev => (prev + 1) % activity.videos.length);
  };

  const prevVideo = () => {
    if (!activity.videos || activity.videos.length === 0) return;
    setVideoIndex(prev => (prev - 1 + activity.videos.length) % activity.videos.length);
  };

  useEffect(() => {
    const handleKey = (e) => {
      if (imageIndex !== null) {
        if (!activity.images || activity.images.length === 0) return;
        if (e.key === 'ArrowRight') {
          setImageIndex(prev => (prev - 1 + activity.images.length) % activity.images.length);
        } else if (e.key === 'ArrowLeft') {
          setImageIndex(prev => (prev + 1) % activity.images.length);
        } else if (e.key === 'Escape') {
          setImageIndex(null);
        }
      }
      if (videoIndex !== null) {
        if (e.key === 'Escape') setVideoIndex(null);
      }
    };
    window.addEventListener('keydown', handleKey);
    return () => window.removeEventListener('keydown', handleKey);
  }, [imageIndex, videoIndex, activity.images?.length, activity.videos?.length]);

  const getYoutubeId = (url) => {
    const match = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/);
    return match ? match[1] : null;
  };

  const getYoutubeThumbnail = (url) => {
    const id = getYoutubeId(url);
    return id ? `https://img.youtube.com/vi/${id}/hqdefault.jpg` : null;
  };

  const shareWhatsApp = () => {
    const text = encodeURIComponent(`🏢 ${activity.title}\n${activity.description?.substring(0, 100)}...\n${shareUrl}`);
    window.open(`https://wa.me/?text=${text}`, '_blank');
  };

  const shareTwitter = () => {
    const text = encodeURIComponent(`🏢 ${activity.title}`);
    const url = encodeURIComponent(shareUrl);
    window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, '_blank');
  };

  const copyLink = () => {
    navigator.clipboard.writeText(shareUrl).then(() => { if(onShowAlert) onShowAlert('تم النسخ', 'تم نسخ الرابط!'); });
  };

  return React.createElement('div', {
    className: "fixed inset-0 bg-slate-900/80 backdrop-blur-sm flex justify-center items-center z-50 p-4",
    onClick: onClose
  },
    React.createElement('div', {
      className: "bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[90vh] flex flex-col overflow-hidden",
      onClick: e => e.stopPropagation()
    },
      React.createElement('div', { className: "p-6 border-b flex justify-between items-center bg-slate-50" },
        React.createElement('h2', { className: "text-xl font-bold flex items-center gap-2" },
          React.createElement(Icon, { name: "LayoutDashboard", style: { color: siteColor } }),
          " " + activity.title
        ),
        React.createElement('button', { onClick: onClose, className: "text-slate-400 hover:text-red-500" },
          React.createElement(Icon, { name: "X" })
        )
      ),
      React.createElement('div', { className: "p-6 overflow-y-auto flex-1 space-y-6" },
        activity.target_audience && React.createElement('p', { className: "text-sm text-slate-500 flex items-center gap-2" },
          React.createElement(Icon, { name: "Users", style: { color: siteColor } }),
          activity.target_audience
        ),
        activity.description && React.createElement('div', { className: "text-slate-700 leading-relaxed whitespace-pre-line" },
          activity.description
        ),
        activity.objectives && activity.objectives.length > 0 && React.createElement('div', { className: "bg-slate-50 p-4 rounded-lg" },
          React.createElement('p', { className: "font-bold text-slate-800 mb-3 flex items-center gap-2" },
            React.createElement(Icon, { name: "CheckSquare", style: { color: siteColor } }),
            "أهداف البرنامج:"
          ),
          React.createElement('ul', { className: "space-y-2" },
            activity.objectives.map((obj, idx) =>
              React.createElement('li', { key: idx, className: "text-slate-700 flex items-start gap-2" },
                React.createElement('span', { 
                  className: "inline-flex items-center justify-center w-6 h-6 rounded-full text-white text-xs font-bold flex-shrink-0",
                  style: { backgroundColor: siteColor }
                }, idx + 1),
                React.createElement('span', null, obj)
              )
            )
          )
        ),
        activity.activities && activity.activities.length > 0 && React.createElement('div', { className: "bg-green-50 p-4 rounded-lg" },
          React.createElement('p', { className: "font-bold text-slate-800 mb-3 flex items-center gap-2" },
            React.createElement(Icon, { name: "List", style: { color: '#10b981' } }),
            "الأنشطة:"
          ),
          React.createElement('ul', { className: "space-y-2" },
            activity.activities.map((act, idx) =>
              React.createElement('li', { key: idx, className: "text-slate-700 flex items-start gap-2" },
                React.createElement('span', { 
                  className: "inline-flex items-center justify-center w-6 h-6 rounded-full text-white text-xs font-bold flex-shrink-0",
                  style: { backgroundColor: '#10b981' }
                }, idx + 1),
                React.createElement('span', null, act)
              )
            )
          )
        ),
        activity.execution_scope && React.createElement('p', { className: "text-sm text-slate-600 flex items-center gap-2 bg-blue-50 p-3 rounded-lg" },
          React.createElement(Icon, { name: "ExternalLink", style: { color: siteColor } }),
          React.createElement('span', { className: "font-medium" }, "نطاق التنفيذ: "),
          activity.execution_scope
        ),
        activity.images && activity.images.length > 0 && React.createElement('div', { className: "space-y-2" },
          React.createElement('p', { className: "font-bold text-slate-800" }, "الصور:"),
          React.createElement('div', { className: "grid grid-cols-2 md:grid-cols-3 gap-2" },
            activity.images.map((img, i) =>
              React.createElement('div', {
                key: i,
                className: "relative rounded-lg overflow-hidden cursor-pointer group",
                onClick: () => setImageIndex(i)
              },
                React.createElement('img', { src: img, alt: "صورة " + (i + 1), className: "w-full aspect-video object-cover" }),
                React.createElement('div', { className: "absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center" },
                  React.createElement(Icon, { name: "Eye", className: "h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" })
                )
              )
            )
          )
        ),
        activity.videos && activity.videos.length > 0 && React.createElement('div', { className: "space-y-2" },
          React.createElement('p', { className: "font-bold text-slate-800" }, "الفيديوهات:"),
          React.createElement('div', { className: "grid grid-cols-2 md:grid-cols-3 gap-2" },
            activity.videos.map((vid, i) => {
              const thumb = getYoutubeThumbnail(vid);
              const vidId = getYoutubeId(vid);
              return React.createElement('div', {
                key: i,
                className: "relative rounded-lg overflow-hidden cursor-pointer group border border-slate-200",
                onClick: () => setVideoIndex(i)
              },
                thumb
                  ? React.createElement('img', { src: thumb, alt: "فيديو " + (i + 1), className: "w-full aspect-video object-cover" })
                  : React.createElement('div', { className: "w-full aspect-video bg-slate-100 flex items-center justify-center" },
                      React.createElement(Icon, { name: "Youtube", className: "h-12 w-12 text-red-500" })
                    ),
                React.createElement('div', { className: "absolute inset-0 bg-black/30 flex items-center justify-center group-hover:bg-black/50 transition-colors" },
                  React.createElement('div', { className: "bg-white/90 rounded-full p-3" },
                    React.createElement(Icon, { name: "Play", className: "h-6 w-6 text-red-500" })
                  )
                )
              );
            })
          )
        ),
        React.createElement('div', { className: "flex gap-2 pt-4 border-t border-slate-100" },
          React.createElement('button', {
            onClick: shareWhatsApp,
            className: "flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors text-sm font-medium"
          }, React.createElement(Icon, { name: "Share2", className: "h-4 w-4" }), " واتساب"),
          React.createElement('button', {
            onClick: shareTwitter,
            className: "flex items-center gap-2 px-4 py-2 bg-slate-800 text-white rounded-lg hover:bg-slate-900 transition-colors text-sm font-medium"
          }, React.createElement('svg', { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "currentColor" },
            React.createElement('path', { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" })
          ), "تويتر"),
          React.createElement('button', {
            onClick: copyLink,
            className: "flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors text-sm font-medium"
          }, React.createElement(Icon, { name: "Copy", className: "h-4 w-4" }), " نسخ الرابط")
        )
      ),
      React.createElement('div', { className: "p-4 border-t bg-slate-50 flex justify-end" },
        React.createElement('button', { onClick: onClose, className: "px-6 py-2 text-slate-600 font-bold" }, "إغلاق")
      )
    ),
    imageIndex !== null && activity.images && React.createElement('div', {
      className: "fixed inset-0 bg-black/95 z-[9999] flex items-center justify-center p-4",
      onClick: () => setImageIndex(null)
    },
      React.createElement('button', {
        onClick: (e) => { e.stopPropagation(); prevImage(); },
        className: "absolute left-4 text-white p-4 hover:bg-white/20 rounded-full"
      }, React.createElement(Icon, { name: "ChevronLeft", className: "h-8 w-8" })),
      React.createElement('img', { src: activity.images[imageIndex], alt: "صورة", className: "max-w-full max-h-[80vh] object-contain" }),
      React.createElement('button', {
        onClick: (e) => { e.stopPropagation(); nextImage(); },
        className: "absolute right-4 text-white p-4 hover:bg-white/20 rounded-full"
      }, React.createElement(Icon, { name: "ChevronRight", className: "h-8 w-8" })),
      React.createElement('div', { className: "absolute bottom-4 text-white" },
        (imageIndex + 1) + " / " + activity.images.length
      )
    ),
    videoIndex !== null && activity.videos && React.createElement('div', {
      className: "fixed inset-0 bg-black/95 z-[9999] flex items-center justify-center p-4",
      onClick: () => setVideoIndex(null)
    },
      React.createElement('button', {
        onClick: (e) => { e.stopPropagation(); prevVideo(); },
        className: "absolute left-4 text-white p-4 hover:bg-white/20 rounded-full"
      }, React.createElement(Icon, { name: "ChevronLeft", className: "h-8 w-8" })),
      React.createElement('div', { className: "w-full max-w-3xl aspect-video" },
        React.createElement('iframe', {
          src: `https://www.youtube.com/embed/${getYoutubeId(activity.videos[videoIndex])}?autoplay=1`,
          className: "w-full h-full rounded-lg",
          frameBorder: "0",
          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
          allowFullScreen: true
        })
      ),
      React.createElement('button', {
        onClick: (e) => { e.stopPropagation(); nextVideo(); },
        className: "absolute right-4 text-white p-4 hover:bg-white/20 rounded-full"
      }, React.createElement(Icon, { name: "ChevronRight", className: "h-8 w-8" })),
      React.createElement('div', { className: "absolute bottom-4 text-white" },
        (videoIndex + 1) + " / " + activity.videos.length
      )
    )
  );
}