/* === Private admin dashboard === */

const ADMIN_TOKEN_KEY = 'aisubs_admin_token';
const ADMIN_CARD_LIMIT = 5;

const formatOnlineAgo = (seconds, lang) => {
  if (seconds <= 5) return lang === 'en' ? 'now' : 'الآن';
  if (seconds < 60) return lang === 'en' ? `${seconds}s ago` : `منذ ${seconds}ث`;
  const minutes = Math.max(1, Math.floor(seconds / 60));
  return lang === 'en' ? `${minutes}m ago` : `منذ ${minutes}د`;
};

const formatRouteLabel = (route, lang) => {
  if (!route) return lang === 'en' ? 'Unknown' : 'غير معروف';
  const labels = {
    home: lang === 'en' ? 'Home' : 'الرئيسية',
    catalog: lang === 'en' ? 'Catalog' : 'الكتالوج',
    cart: lang === 'en' ? 'Cart' : 'السلة'
  };
  if (labels[route]) return labels[route];
  if (route.startsWith('brand:')) return `${lang === 'en' ? 'Brand' : 'براند'}: ${route.slice(6)}`;
  if (route.startsWith('cat:')) return `${lang === 'en' ? 'Category' : 'قسم'}: ${route.slice(4)}`;
  return route;
};

const formatEventLabel = (type, lang) => {
  const labels = {
    page_view: ['مشاهدة صفحة', 'Page view'],
    brand_view: ['مشاهدة براند', 'Brand view'],
    plan_select: ['اختيار باقة', 'Plan select'],
    add_to_cart: ['إضافة للسلة', 'Add to cart'],
    lead_submit: ['Lead جديد', 'New lead'],
    comment_submit: ['تعليق جديد', 'New review'],
    comment_pending: ['تعليق قيد المراجعة', 'Review pending'],
    comment_approved: ['تعليق موافق عليه', 'Review approved'],
    comment_rejected: ['تعليق مرفوض', 'Review rejected'],
    whatsapp_click: ['ضغط واتساب', 'WhatsApp click'],
    whatsapp_blocked: ['حظر واتساب', 'WhatsApp blocked'],
    cart_view: ['مشاهدة السلة', 'Cart view'],
    language_change: ['تغيير اللغة', 'Language change'],
    heartbeat: ['نشط الآن', 'Active now']
  };
  const item = labels[type];
  if (!item) return type || (lang === 'en' ? 'Event' : 'حدث');
  return lang === 'en' ? item[1] : item[0];
};

const topByLocal = (items, key, limit = 8) => {
  const map = new Map();
  (items || []).forEach((item) => {
    const value = item && item[key];
    if (!value) return;
    map.set(value, (map.get(value) || 0) + 1);
  });
  return [...map.entries()]
    .map(([label, count]) => ({ label, count }))
    .sort((a, b) => b.count - a.count)
    .slice(0, limit);
};

const formatLocation = (item, lang) => {
  const location = [item?.city, item?.region, item?.country].filter(Boolean).join(', ');
  return location || (lang === 'en' ? 'Unknown' : 'غير معروف');
};

const formatIpSignal = (item, lang) => {
  if (item?.ipAddress) return `IP ${item.ipAddress}`;
  const hash = String(item?.ipHash || '').slice(0, 10);
  if (!hash) return lang === 'en' ? 'No IP signal' : 'بدون إشارة IP';
  return `IP #${hash}${item?.ipFamily ? ` · ${item.ipFamily}` : ''}`;
};

const formatCooldown = (ms, lang) => {
  const totalMinutes = Math.max(1, Math.ceil(Number(ms || 0) / 60000));
  const hours = Math.floor(totalMinutes / 60);
  const minutes = totalMinutes % 60;
  if (lang === 'en') return [hours ? `${hours}h` : '', minutes ? `${minutes}m` : ''].filter(Boolean).join(' ') || 'now';
  return [hours ? `${hours}س` : '', minutes ? `${minutes}د` : ''].filter(Boolean).join(' ') || 'الآن';
};

const adminNumber = (value) => {
  const number = Number(value);
  return Number.isFinite(number) ? number : 0;
};

const adminPercent = (value, max) => {
  const peak = Math.max(1, adminNumber(max));
  return Math.max(2, Math.min(100, Math.round(adminNumber(value) / peak * 100)));
};

const formatAdminBytes = (value) => {
  const bytes = adminNumber(value);
  if (bytes < 1024) return `${bytes} B`;
  const kb = bytes / 1024;
  if (kb < 1024) return `${kb.toFixed(kb >= 10 ? 0 : 1)} KB`;
  const mb = kb / 1024;
  return `${mb.toFixed(mb >= 10 ? 1 : 2)} MB`;
};

const formatAdminDate = (value, lang) => {
  if (!value) return lang === 'en' ? 'Not available' : 'غير متاح';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return date.toLocaleString(lang === 'en' ? 'en-US' : 'ar-EG', {
    dateStyle: 'medium',
    timeStyle: 'short'
  });
};

const includesAdminQuery = (query, ...values) => {
  if (!query) return true;
  return values.some((value) => String(value || '').toLowerCase().includes(query));
};

const adminEventTone = (type = '') => {
  if (/blocked|failed|error/i.test(type)) return 'danger';
  if (/lead|whatsapp|add_to_cart|plan_select|comment_approved/i.test(type)) return 'success';
  if (/comment/i.test(type)) return 'accent';
  if (/cart|brand/i.test(type)) return 'accent';
  return 'neutral';
};

const AdminPage = ({ lang, settings, onSettingsChange }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const [password, setPassword] = useState('');
  const [token, setToken] = useState(() => {
    try { return localStorage.getItem(ADMIN_TOKEN_KEY) || ''; } catch (e) { return ''; }
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [summary, setSummary] = useState(null);
  const [draft, setDraft] = useState(settings || {});
  const [activeSection, setActiveSection] = useState('overview');
  const [adminNavOpen, setAdminNavOpen] = useState(false);
  const [adminSearch, setAdminSearch] = useState('');

  useEffect(() => {
    setDraft(settings || {});
  }, [settings]);

  const api = useCallback((url, options = {}) => {
    return fetch(url, {
      ...options,
      headers: {
        'Content-Type': 'application/json',
        ...(token ? { Authorization: `Bearer ${token}` } : {}),
        ...(options.headers || {})
      }
    });
  }, [token]);

  const loadSummary = useCallback(async (options = {}) => {
    if (!token) return;
    const silent = Boolean(options && options.silent);
    if (!silent) {
      setLoading(true);
      setError('');
    }
    try {
      const res = await api('/api/admin/summary');
      const data = await res.json();
      if (!res.ok || !data.ok) throw new Error(data.error || 'Unable to load admin data');
      setSummary(data.summary);
      setDraft(data.settings || {});
      if (data.settings) onSettingsChange(data.settings);
    } catch (err) {
      const unauthorized = /unauthorized/i.test(err.message) || err.message === 'Unauthorized';
      if (!silent || unauthorized) setError(err.message);
      if (unauthorized) {
        setToken('');
        try { localStorage.removeItem(ADMIN_TOKEN_KEY); } catch (e) {}
      }
    } finally {
      if (!silent) setLoading(false);
    }
  }, [api, token, onSettingsChange]);

  useEffect(() => {
    loadSummary();
  }, [loadSummary]);

  useEffect(() => {
    if (!token) return;
    const intervalId = window.setInterval(() => loadSummary({ silent: true }), 15000);
    return () => window.clearInterval(intervalId);
  }, [token, loadSummary]);

  const login = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      const res = await fetch('/api/admin/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ password })
      });
      const data = await res.json();
      if (!res.ok || !data.ok) throw new Error(data.error || 'Login failed');
      setToken(data.token);
      try { localStorage.setItem(ADMIN_TOKEN_KEY, data.token); } catch (err) {}
      setPassword('');
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const saveSettings = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      const res = await api('/api/admin/settings', {
        method: 'PUT',
        body: JSON.stringify(draft)
      });
      const data = await res.json();
      if (!res.ok || !data.ok) throw new Error(data.error || 'Unable to save settings');
      onSettingsChange(data.settings);
      setDraft(data.settings);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const clearEvents = async () => {
    if (!confirm(t('مسح كل بيانات التتبع؟', 'Clear all tracking events?'))) return;
    setLoading(true);
    setError('');
    try {
      const res = await api('/api/admin/events', { method: 'DELETE' });
      const data = await res.json();
      if (!res.ok || !data.ok) throw new Error(data.error || 'Unable to clear events');
      await loadSummary();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const clearLeads = async () => {
    if (!confirm(t('مسح كل بيانات الـ leads؟', 'Clear all leads?'))) return;
    setLoading(true);
    setError('');
    try {
      const res = await api('/api/admin/leads', { method: 'DELETE' });
      const data = await res.json();
      if (!res.ok || !data.ok) throw new Error(data.error || 'Unable to clear leads');
      await loadSummary();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const moderateComment = async (commentId, status) => {
    if (!commentId || !status) return;
    setLoading(true);
    setError('');
    try {
      const res = await api(`/api/admin/comments/${encodeURIComponent(commentId)}`, {
        method: 'PATCH',
        body: JSON.stringify({ status })
      });
      const data = await res.json();
      if (!res.ok || !data.ok) throw new Error(data.error || 'Unable to update comment');
      await loadSummary();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const deleteComment = async (commentId) => {
    if (!commentId) return;
    if (!confirm(t('مسح التعليق نهائياً؟', 'Delete this review permanently?'))) return;
    setLoading(true);
    setError('');
    try {
      const res = await api(`/api/admin/comments/${encodeURIComponent(commentId)}`, { method: 'DELETE' });
      const data = await res.json();
      if (!res.ok || !data.ok) throw new Error(data.error || 'Unable to delete comment');
      await loadSummary();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const resetWhatsAppLimit = async (sessionId) => {
    if (!sessionId) return;
    setLoading(true);
    setError('');
    try {
      const res = await api(`/api/admin/whatsapp-limits/${encodeURIComponent(sessionId)}`, { method: 'DELETE' });
      const data = await res.json();
      if (!res.ok || !data.ok) throw new Error(data.error || 'Unable to reset WhatsApp cooldown');
      await loadSummary();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const clearWhatsAppLimits = async () => {
    if (!confirm(t('مسح كل حدود واتساب المؤقتة؟', 'Clear all WhatsApp cooldowns?'))) return;
    setLoading(true);
    setError('');
    try {
      const res = await api('/api/admin/whatsapp-limits', { method: 'DELETE' });
      const data = await res.json();
      if (!res.ok || !data.ok) throw new Error(data.error || 'Unable to clear WhatsApp cooldowns');
      await loadSummary();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const downloadStorageBackup = async () => {
    setLoading(true);
    setError('');
    try {
      const res = await api('/api/admin/storage/backup');
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || 'Unable to download backup');
      }
      const blob = await res.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `analytics-backup-${new Date().toISOString().slice(0, 10)}.json`;
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const logout = () => {
    setToken('');
    setSummary(null);
    try { localStorage.removeItem(ADMIN_TOKEN_KEY); } catch (e) {}
  };

  if (!token) {
    return (
      <div className="admin-page">
        <form className="admin-login" onSubmit={login}>
          <div className="admin-kicker">Private Admin</div>
          <h1>{t('لوحة التحكم', 'Admin Dashboard')}</h1>
          <p>{t('أدخل كلمة المرور لمتابعة الزيارات وإدارة إعدادات الموقع.', 'Enter the password to view analytics and manage site settings.')}</p>
          <input dir="auto" type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={t('كلمة المرور', 'Password')} />
          {error && <div className="admin-error">{error}</div>}
          <button className="btn btn-gold" disabled={loading || !password} style={{ justifyContent: 'center' }}>
            {loading ? t('جاري الدخول...', 'Signing in...') : t('دخول', 'Sign in')}
          </button>
          <small>{t('لو ظهرت رسالة ADMIN_PASSWORD، اضبطه من Variables في Railway.', 'If ADMIN_PASSWORD appears, set it in Railway Variables.')}</small>
        </form>
      </div>
    );
  }

  const totals = summary?.totals || {};
  const funnel = summary?.funnel || {};
  const storage = summary?.storage || {};
  const recent = summary?.recent || [];
  const leads = summary?.leads || [];
  const comments = summary?.comments || [];
  const online = summary?.online || [];
  const topRoutes = summary?.topRoutes || [];
  const topBrands = summary?.topBrands || [];
  const topPlans = summary?.topPlans || [];
  const topDevices = summary?.topDevices || [];
  const topCities = summary?.topCities || [];
  const topCountries = summary?.topCountries || [];
  const topIpAddresses = summary?.topIpAddresses || [];
  const topIpHashes = (topIpAddresses.length ? [] : (summary?.topIpHashes || [])).map((item) => ({
    ...item,
    label: `IP #${String(item.label || '').slice(0, 10)}`
  }));
  const topIpSignals = topIpAddresses.length ? topIpAddresses : topIpHashes;
  const topReferrers = summary?.topReferrers || [];
  const topLeadInterests = summary?.topLeadInterests || [];
  const topCommentBrands = summary?.topCommentBrands || [];
  const whatsappLimits = summary?.whatsappLimits || [];
  const whatsappBlocked = whatsappLimits.filter((item) => item.blocked).length;
  const pendingComments = comments.filter((comment) => (comment.status || 'pending') === 'pending').length;
  const generatedAt = summary?.generatedAt ? new Date(summary.generatedAt).toLocaleTimeString() : '-';
  const searchTerm = adminSearch.trim().toLowerCase();
  const visibleOnline = searchTerm
    ? online.filter((visitor) => includesAdminQuery(
      searchTerm,
      formatRouteLabel(visitor.route, lang),
      visitor.brand,
      visitor.plan,
      visitor.source,
      formatEventLabel(visitor.lastAction, lang),
      formatLocation(visitor, lang),
      formatIpSignal(visitor, lang),
      visitor.device,
      visitor.browser,
      visitor.session
    ))
    : online;
  const visibleLeads = searchTerm
    ? leads.filter((lead) => includesAdminQuery(
      searchTerm,
      lead.name,
      lead.phone,
      lead.email,
      lead.interest,
      lead.message,
      lead.source,
      lead.route,
      formatLocation(lead, lang),
      formatIpSignal(lead, lang)
    ))
    : leads;
  const visibleComments = searchTerm
    ? comments.filter((comment) => includesAdminQuery(
      searchTerm,
      comment.name,
      comment.text,
      comment.brandName,
      comment.brandSlug,
      comment.status,
      comment.source,
      comment.route,
      formatLocation(comment, lang),
      formatIpSignal(comment, lang)
    ))
    : comments;
  const visibleRecent = searchTerm
    ? recent.filter((event) => includesAdminQuery(
      searchTerm,
      formatEventLabel(event.type, lang),
      formatRouteLabel(event.route, lang),
      event.brand,
      event.plan,
      event.source,
      event.referrer,
      event.device,
      event.browser,
      formatLocation(event, lang),
      formatIpSignal(event, lang)
    ))
    : recent;

  const navItems = [
    { id: 'overview', icon: 'grid', label: t('نظرة عامة', 'Overview'), helper: t('ملخص سريع', 'Quick summary'), badge: totals.onlineNow || online.length || 0 },
    { id: 'online', icon: 'user', label: t('المتصلون', 'Online'), helper: t('زوار آخر دقيقتين', 'Last 2 minutes'), badge: totals.onlineNow || online.length || 0 },
    { id: 'leads', icon: 'user', label: t('Leads', 'Leads'), helper: t('بيانات العملاء', 'Customer details'), badge: totals.leads || leads.length || 0 },
    { id: 'comments', icon: 'star', label: t('التعليقات', 'Reviews'), helper: t('مراجعة قبل النشر', 'Moderation queue'), badge: pendingComments },
    { id: 'tracking', icon: 'search', label: t('التتبع', 'Tracking'), helper: t('المسار والمصادر', 'Funnel and sources'), badge: totals.all || 0 },
    { id: 'whatsapp', icon: 'wa', label: t('واتساب', 'WhatsApp'), helper: t('الحدود المؤقتة', 'Cooldowns'), badge: whatsappBlocked },
    { id: 'activity', icon: 'clock', label: t('النشاط', 'Activity'), helper: t('آخر الأحداث', 'Recent events'), badge: recent.length },
    { id: 'storage', icon: 'box', label: t('التخزين', 'Storage'), helper: t('Volume ونسخ احتياطي', 'Volume and backups') },
    { id: 'settings', icon: 'shield', label: t('الإعدادات', 'Settings'), helper: t('إدارة الموقع', 'Site controls') }
  ];
  const activeNav = navItems.find((item) => item.id === activeSection) || navItems[0];
  const selectAdminSection = (sectionId) => {
    setActiveSection(sectionId);
    setAdminNavOpen(false);
  };

  const trackingMetrics = [
    { label: t('مشاهدات الصفحات', 'Page views'), value: funnel.pageViews || 0, hint: t('كل مرة زائر يفتح صفحة أو براند.', 'Every page or brand page load.') },
    { label: t('مشاهدات البراند', 'Brand views'), value: funnel.brandViews || 0, hint: t('فتح صفحة براند محدد.', 'Opened a specific brand page.') },
    { label: t('اختيار باقة', 'Plan selects'), value: funnel.planSelects || 0, hint: t('ضغط على باقة داخل صفحة البراند.', 'Clicked a plan inside a brand page.') },
    { label: t('إضافة للسلة', 'Add to cart'), value: funnel.addToCart || 0, hint: t('ضغط Add + أو إضافة للسلة.', 'Clicked Add + or add to cart.') },
    { label: t('Leads', 'Leads'), value: funnel.leads || leads.length || 0, hint: t('زوار سابوا إيميل أو واتساب بموافقتهم.', 'Visitors who shared an email or WhatsApp with consent.') },
    { label: t('التعليقات', 'Reviews'), value: funnel.comments || comments.length || 0, hint: t('تعليقات اتبعتت للمراجعة قبل النشر.', 'Reviews submitted for admin moderation.') },
    { label: t('ضغط واتساب', 'WhatsApp clicks'), value: funnel.whatsappClicks || 0, hint: t('فتح واتساب من المنتج أو السلة.', 'Opened WhatsApp from product or cart.') },
    { label: t('حظر واتساب', 'WhatsApp blocks'), value: funnel.whatsappBlocked || 0, hint: t('محاولات اتمنعت بعد تجاوز الحد المؤقت.', 'Attempts blocked after the cooldown limit.') },
    { label: t('مشاهدة السلة', 'Cart views'), value: funnel.cartViews || 0, hint: t('فتح صفحة السلة.', 'Opened the cart page.') },
    { label: t('IPs مميزة', 'Unique IPs'), value: totals.uniqueIpSignals || 0, hint: t('زوار مميزين تقريبياً حسب IP أو IP hash.', 'Approximate unique visitors by IP or IP hash.') }
  ];
  const overviewStats = [
    { label: t('الزوار الآن', 'Live visitors'), value: totals.onlineNow || online.length || 0, hint: t('آخر دقيقتين', 'Last 2 minutes'), tone: 'success', icon: 'user' },
    { label: t('جلسات اليوم', 'Today'), value: totals.today || 0, hint: t('أحداث اليوم', 'Events today'), tone: 'accent', icon: 'clock' },
    { label: t('Leads', 'Leads'), value: totals.leads || leads.length || 0, hint: t('بيانات تواصل فعلية', 'Captured contacts'), tone: 'gold', icon: 'user' },
    { label: t('واتساب', 'WhatsApp clicks'), value: funnel.whatsappClicks || 0, hint: t('نوايا شراء', 'Purchase intents'), tone: 'success', icon: 'wa' },
    { label: t('آخر 7 أيام', 'Last 7 days'), value: totals.last7Days || 0, hint: t('حركة حديثة', 'Recent movement'), tone: 'neutral', icon: 'bolt' },
    { label: t('حظر واتساب', 'WhatsApp blocked'), value: totals.whatsappBlocked || whatsappBlocked || 0, hint: t('محاولات محدودة', 'Cooldowns'), tone: whatsappBlocked ? 'danger' : 'neutral', icon: 'shield' }
  ];
  const commentStat = {
    label: t('بانتظار المراجعة', 'Pending review'),
    value: pendingComments,
    hint: t('تعليقات قبل النشر', 'Reviews before publishing'),
    tone: pendingComments ? 'gold' : 'neutral',
    icon: 'star'
  };
  const headStatsBySection = {
    overview: overviewStats.slice(0, 4),
    online: [overviewStats[0]],
    leads: [overviewStats[2]],
    comments: [commentStat],
    tracking: [{ label: t('أحداث التتبع', 'Tracked events'), value: totals.all || 0, hint: t('كل الحركة المسجلة', 'All captured activity'), tone: 'accent', icon: 'search' }],
    whatsapp: [{ label: t('محظور الآن', 'Blocked now'), value: whatsappBlocked, hint: t('Sessions تجاوزت الحد', 'Sessions over the limit'), tone: whatsappBlocked ? 'danger' : 'neutral', icon: 'shield' }],
    activity: [{ label: t('آخر النشاط', 'Recent activity'), value: recent.length, hint: t('أحداث مسجلة', 'Captured events'), tone: 'accent', icon: 'clock' }],
    storage: [{ label: t('حجم الملف', 'File size'), value: formatAdminBytes(storage.sizeBytes), hint: storage.exists ? 'analytics.json' : t('لم يتم إنشاؤه بعد', 'Not created yet'), tone: storage.writable ? 'success' : 'danger', icon: 'box' }],
    settings: []
  };
  const headStats = headStatsBySection[activeSection] || [];
  const funnelSteps = trackingMetrics.slice(0, 6);
  const topSourceItems = topReferrers.length ? topReferrers : topRoutes.slice(0, 5);
  const topLocationItems = topCities.length ? topCities : topCountries;

  return (
    <div className="admin-page">
      <div className="admin-mobile-topbar">
        <button
          className="admin-menu-toggle"
          type="button"
          onClick={() => setAdminNavOpen(true)}
          aria-controls="admin-sidebar"
          aria-expanded={adminNavOpen}
          aria-label={t('فتح قائمة الأدمن', 'Open admin menu')}>
          <Icon name="menu" size={18} />
          <span>{activeNav.label}</span>
        </button>
        <span>{t('آخر تحديث', 'Updated')} {generatedAt}</span>
      </div>
      {adminNavOpen && (
        <button
          type="button"
          className="admin-sidebar-backdrop"
          aria-label={t('إغلاق القائمة', 'Close menu')}
          onClick={() => setAdminNavOpen(false)}
        />
      )}
      <div className="admin-layout">
        <aside id="admin-sidebar" className={`admin-sidebar ${adminNavOpen ? 'is-open' : ''}`}>
          <div className="admin-sidebar-brand">
            <div className="admin-logo-mark">AI</div>
            <div>
              <div className="admin-kicker">Private Admin</div>
              <strong>{t('لوحة التحكم', 'Admin Dashboard')}</strong>
            </div>
          </div>

          <nav className="admin-nav" aria-label={t('أقسام لوحة التحكم', 'Admin sections')}>
            {navItems.map((item) => (
              <button
                key={item.id}
                type="button"
                className={activeSection === item.id ? 'active' : ''}
                onClick={() => selectAdminSection(item.id)}
                aria-pressed={activeSection === item.id}>
                <span className="admin-nav-icon"><Icon name={item.icon} size={17} /></span>
                <span className="admin-nav-text">
                  <strong>{item.label}</strong>
                  <small>{item.helper}</small>
                </span>
                {typeof item.badge === 'number' && <span className="admin-nav-badge">{item.badge}</span>}
              </button>
            ))}
          </nav>

          <div className="admin-sidebar-foot">
            <span>{t('آخر تحديث', 'Updated')} {generatedAt}</span>
            <div className="admin-actions">
              <button className="btn btn-ghost btn-sm" onClick={() => loadSummary()} disabled={loading}>{t('تحديث', 'Refresh')}</button>
              <button className="btn btn-ghost btn-sm" onClick={logout}>{t('خروج', 'Logout')}</button>
            </div>
          </div>
        </aside>

        <main className="admin-main">
          <div className="admin-head">
            <div className="admin-head-main">
              <div className="admin-kicker">{activeNav.label}</div>
              <h1>{activeNav.label}</h1>
              <p>{t('التتبع منظم في أقسام واضحة: زيارات، أونلاين، leads، موقع تقريبي، و IP للمتابعة داخل لوحة الأدمن.', 'Tracking is organized into visits, online visitors, leads, approximate location, and IP data for admin follow-up.')}</p>
              <div className="admin-command-meta">
                <span className="admin-sync-pill"><span aria-hidden="true"></span>{t('مزامنة كل 15ث', 'Syncs every 15s')}</span>
                <span>{t('آخر تحديث', 'Updated')} {generatedAt}</span>
              </div>
            </div>
            <div className="admin-head-actions">
              <label className="admin-search-box">
                <Icon name="search" size={16} />
                <input
                  dir="auto"
                  value={adminSearch}
                  onChange={(e) => setAdminSearch(e.target.value)}
                  placeholder={t('ابحث في الزوار أو النشاط...', 'Search visitors or activity...')}
                />
              </label>
              <span className="admin-privacy-pill">{t('إحصائيات', 'Analytics')}</span>
              <button className="btn btn-ghost btn-sm admin-refresh-btn" onClick={() => loadSummary()} disabled={loading}>
                <Icon name="clock" size={15} />
                {loading ? t('جاري التحديث', 'Refreshing') : t('تحديث', 'Refresh')}
              </button>
            </div>
            {headStats.length > 0 && (
            <div className={`admin-head-metrics ${activeSection !== 'overview' ? 'is-context' : ''}`}>
              {headStats.map((metric) => (
                <AdminStat
                  key={metric.label}
                  label={metric.label}
                  value={metric.value}
                  hint={metric.hint}
                  tone={metric.tone}
                  icon={metric.icon}
                  compact
                />
              ))}
            </div>
            )}
          </div>

          {error && <div className="admin-error">{error}</div>}

          {activeSection === 'overview' && (
            <section className="admin-section admin-overview-section">
              <div className="admin-ops-shell">
                <section className="admin-panel admin-live-board">
                  <div className="admin-panel-head admin-board-head">
                    <div>
                      <h2>{t('مركز التشغيل المباشر', 'Live operations center')}</h2>
                      <p className="admin-muted">{t('الزوار النشطون، آخر حركة، والمواقع الأعلى في نفس الشاشة.', 'Active visitors, recent movement, and top locations in one operating view.')}</p>
                    </div>
                    <span className="admin-live-pill">{t('مباشر', 'Live')}</span>
                  </div>
                  <div className="admin-live-layout">
                    <div className="admin-live-table">
                      <AdminOnlineRows lang={lang} online={visibleOnline} compact />
                      <button type="button" className="admin-link-action" onClick={() => selectAdminSection('online')}>
                        <Icon name={lang === 'en' ? 'arrowR' : 'arrow'} size={16} />
                        {t('عرض كل المستخدمين', 'View all live visitors')}
                      </button>
                    </div>
                    <div className="admin-presence-panel">
                      <div className="admin-signal-map" aria-hidden="true">
                        <span className="signal-dot dot-a"></span>
                        <span className="signal-dot dot-b"></span>
                        <span className="signal-dot dot-c"></span>
                        <span className="signal-dot dot-d"></span>
                        <span className="signal-line line-a"></span>
                        <span className="signal-line line-b"></span>
                        <span className="signal-line line-c"></span>
                      </div>
                      <AdminTopBars lang={lang} title={t('المواقع الأعلى', 'Top locations')} items={topLocationItems} emptyText={t('لا توجد مواقع بعد.', 'No locations yet.')} compact bare />
                    </div>
                  </div>
                </section>

                <aside className="admin-insight-rail">
                  <AdminFunnelFlow lang={lang} metrics={funnelSteps} />
                  <AdminTopBars lang={lang} title={t('أعلى المصادر', 'Top sources')} items={topSourceItems} emptyText={t('لا توجد مصادر بعد.', 'No sources yet.')} compact />
                </aside>
              </div>

              <div className="admin-overview-secondary">
                <AdminActivityFeed lang={lang} recent={visibleRecent} />
                <AdminTopList lang={lang} title={t('الأجهزة', 'Devices')} items={topDevices} emptyText={t('لا توجد بيانات بعد.', 'No data yet.')} />
              </div>
            </section>
          )}

          {activeSection === 'online' && (
            <section className="admin-section">
              <AdminOnlinePanel lang={lang} online={visibleOnline} />
            </section>
          )}

          {activeSection === 'leads' && (
            <section className="admin-section">
              <AdminLeadsPanel lang={lang} leads={visibleLeads} totalLeads={leads.length} loading={loading} clearLeads={clearLeads} />
              <div className="admin-grid">
                <AdminTopList lang={lang} title={t('اهتمامات الـ leads', 'Lead interests')} items={topLeadInterests} emptyText={t('لا توجد Leads بعد.', 'No leads yet.')} />
                <AdminTopList lang={lang} title={t('مصادر الـ leads', 'Lead sources')} items={topByLocal(visibleLeads, 'source')} emptyText={t('لا توجد مصادر بعد.', 'No sources yet.')} />
              </div>
            </section>
          )}

          {activeSection === 'comments' && (
            <section className="admin-section">
              <AdminCommentsPanel
                lang={lang}
                comments={visibleComments}
                totalComments={comments.length}
                pendingComments={pendingComments}
                loading={loading}
                moderateComment={moderateComment}
                deleteComment={deleteComment}
              />
              <div className="admin-grid">
                <AdminTopList lang={lang} title={t('أكثر البراندات تعليقاً', 'Top reviewed brands')} items={topCommentBrands} emptyText={t('لا توجد تعليقات بعد.', 'No reviews yet.')} />
                <AdminTopList lang={lang} title={t('حالات التعليقات', 'Review statuses')} items={topByLocal(visibleComments, 'status')} emptyText={t('لا توجد حالات بعد.', 'No statuses yet.')} />
              </div>
            </section>
          )}

          {activeSection === 'tracking' && (
            <section className="admin-section">
              <section className="admin-panel">
                <AdminPanelTitle title={t('مؤشرات التتبع', 'Tracking metrics')} description={t('كل حدث متسجل من الموقع مع مدينة/دولة لو متاحة و IP للمتابعة والتحليل.', 'Events include city/country when available and IP data for follow-up and analysis.')} />
                <div className="admin-metric-grid">
                  {trackingMetrics.map((metric) => (
                    <AdminStat key={metric.label} label={metric.label} value={metric.value} hint={metric.hint} />
                  ))}
                </div>
              </section>

              <div className="admin-grid">
                <AdminTopList lang={lang} title={t('أكثر الصفحات', 'Top routes')} items={topRoutes} emptyText={t('لا توجد بيانات بعد.', 'No data yet.')} />
                <AdminTopList lang={lang} title={t('أكثر البراندات', 'Top brands')} items={topBrands} emptyText={t('لا توجد بيانات بعد.', 'No data yet.')} />
                <AdminTopList lang={lang} title={t('أكثر الباقات', 'Top plans')} items={topPlans} emptyText={t('لا توجد بيانات بعد.', 'No data yet.')} />
                <AdminTopList lang={lang} title={t('أكثر المدن', 'Top cities')} items={topCities} emptyText={t('لا توجد مدن بعد.', 'No cities yet.')} />
                <AdminTopList lang={lang} title={t('أكثر الدول', 'Top countries')} items={topCountries} emptyText={t('لا توجد دول بعد.', 'No countries yet.')} />
                <AdminTopList lang={lang} title={t('أكثر IPs', 'Top IPs')} items={topIpSignals} emptyText={t('لا توجد IPs بعد.', 'No IPs yet.')} />
                <AdminTopList lang={lang} title={t('مصادر الزيارة', 'Referrers')} items={topReferrers} emptyText={t('لا توجد مصادر بعد.', 'No referrers yet.')} />
              </div>
            </section>
          )}

          {activeSection === 'whatsapp' && (
            <section className="admin-section">
              <AdminWhatsAppLimitsPanel
                lang={lang}
                limits={whatsappLimits}
                loading={loading}
                resetLimit={resetWhatsAppLimit}
                clearLimits={clearWhatsAppLimits}
              />
            </section>
          )}

          {activeSection === 'activity' && (
            <section className="admin-section">
              <AdminActivityPanel lang={lang} recent={visibleRecent} loading={loading} clearEvents={clearEvents} />
            </section>
          )}

          {activeSection === 'storage' && (
            <section className="admin-section">
              <AdminStoragePanel lang={lang} storage={storage} loading={loading} downloadBackup={downloadStorageBackup} />
            </section>
          )}

          {activeSection === 'settings' && (
            <section className="admin-section">
              <section className="admin-panel">
                <AdminPanelTitle title={t('إعدادات الموقع', 'Site settings')} description={t('مكان منفصل لأي إعدادات حالية أو مستقبلية للموقع.', 'A separate place for current and future site controls.')} />
                <form className="admin-form" onSubmit={saveSettings}>
                  <label>
                    <span>{t('إظهار شريط التنبيه', 'Show notice bar')}</span>
                    <input type="checkbox" checked={Boolean(draft.showNoticeBar)} onChange={(e) => setDraft({ ...draft, showNoticeBar: e.target.checked })} />
                  </label>
                  <label>
                    <span>{t('نص التنبيه عربي', 'Notice Arabic')}</span>
                    <input dir="auto" value={draft.noticeAr || ''} onChange={(e) => setDraft({ ...draft, noticeAr: e.target.value })} />
                  </label>
                  <label>
                    <span>{t('نص التنبيه إنجليزي', 'Notice English')}</span>
                    <input dir="auto" value={draft.noticeEn || ''} onChange={(e) => setDraft({ ...draft, noticeEn: e.target.value })} />
                  </label>
                  <label>
                    <span>{t('اسم الموقع عربي', 'Site name Arabic')}</span>
                    <input dir="auto" value={draft.storeNameAr || ''} onChange={(e) => setDraft({ ...draft, storeNameAr: e.target.value })} />
                  </label>
                  <label>
                    <span>{t('اسم الموقع إنجليزي', 'Site name English')}</span>
                    <input dir="auto" value={draft.storeNameEn || ''} onChange={(e) => setDraft({ ...draft, storeNameEn: e.target.value })} />
                  </label>
                  <button className="btn btn-gold" disabled={loading} style={{ justifyContent: 'center' }}>{t('حفظ الإعدادات', 'Save settings')}</button>
                </form>
              </section>
            </section>
          )}
        </main>
      </div>
    </div>
  );
};

const AdminPanelTitle = ({ title, description, action }) => (
  <div className="admin-panel-head">
    <div>
      <h2>{title}</h2>
      {description && <p className="admin-muted">{description}</p>}
    </div>
    {action}
  </div>
);

const AdminStat = ({ label, value, hint, tone = '', icon, compact = false }) => (
  <div className={`admin-stat ${tone ? `tone-${tone}` : ''} ${compact ? 'is-compact' : ''}`}>
    <div className="admin-stat-top">
      <span>{label}</span>
      {icon && <i aria-hidden="true"><Icon name={icon} size={15} /></i>}
    </div>
    <strong>{value}</strong>
    {hint && <small>{hint}</small>}
  </div>
);

const AdminStoragePanel = ({ lang, storage, loading, downloadBackup }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const rows = [
    { label: t('مسار الـ Volume', 'Volume path'), value: storage.railwayVolumeMountPath || storage.dataDir || '-' },
    { label: t('ملف الداتا', 'Data file'), value: storage.dataFile || '-' },
    { label: t('آخر تعديل', 'Last updated'), value: formatAdminDate(storage.updatedAt, lang) },
    { label: t('قابل للكتابة', 'Writable'), value: storage.writable ? t('نعم', 'Yes') : t('لا', 'No') },
    { label: t('Railway Volume', 'Railway volume'), value: storage.usingRailwayVolume ? t('متصل', 'Connected') : t('غير متصل', 'Not connected') }
  ];
  return (
    <section className="admin-panel admin-storage-panel">
      <AdminPanelTitle
        title={t('التخزين والنسخ الاحتياطي', 'Storage and backup')}
        description={t('ملخص آمن للـ Volume وملف analytics.json بدون فتح Explorer كامل على السيرفر.', 'A safe summary of the volume and analytics.json without exposing a full server file explorer.')}
        action={
          <button className="btn btn-gold btn-sm" type="button" onClick={downloadBackup} disabled={loading || !storage.exists}>
            <Icon name="box" size={15} />
            {t('تحميل Backup', 'Download backup')}
          </button>
        }
      />
      <div className="admin-metric-grid">
        <AdminStat label={t('حجم الملف', 'File size')} value={formatAdminBytes(storage.sizeBytes)} hint="analytics.json" tone={storage.exists ? 'success' : 'danger'} icon="box" />
        <AdminStat label={t('Events', 'Events')} value={storage.events || 0} hint={t('زيارات وحركة مسجلة', 'Tracked site activity')} icon="search" />
        <AdminStat label={t('Leads', 'Leads')} value={storage.leads || 0} hint={t('بيانات تواصل محفوظة', 'Saved contact leads')} icon="user" />
        <AdminStat label={t('Reviews', 'Reviews')} value={storage.comments || 0} hint={t('تعليقات محفوظة', 'Saved reviews')} icon="star" />
      </div>
      <div className="admin-storage-table">
        {rows.map((row) => (
          <div key={row.label} className="admin-storage-row">
            <span>{row.label}</span>
            <code dir="ltr">{row.value}</code>
          </div>
        ))}
      </div>
      <p className="admin-muted admin-storage-note">
        {t('استخدم زر Backup قبل أي تغييرات كبيرة. الملف يحتوي بيانات عملاء، لذلك لا تعرض محتواه كاملاً في الشات أو في صفحة عامة.', 'Use Backup before major changes. The file contains customer data, so do not expose its full contents in chat or on a public page.')}
      </p>
    </section>
  );
};

const AdminListToggle = ({ lang, expanded, total, limit = ADMIN_CARD_LIMIT, onToggle }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  if (total <= limit) return null;
  return (
    <button
      type="button"
      className="admin-list-toggle"
      onClick={onToggle}
      aria-expanded={expanded}>
      <Icon name={expanded ? 'minus' : 'plus'} size={14} />
      {expanded ? t('عرض أقل', 'Show less') : t(`عرض الكل (${total})`, `Show all (${total})`)}
    </button>
  );
};

const AdminOnlineRows = ({ lang, online, compact = false }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const [expanded, setExpanded] = useState(false);
  const visibleOnline = expanded ? online : online.slice(0, ADMIN_CARD_LIMIT);
  if (online.length === 0) {
    return <p className="admin-muted admin-empty-state">{t('لا يوجد زوار أونلاين الآن.', 'No visitors online right now.')}</p>;
  }
  return (
    <>
      <div className="admin-online-list">
        {visibleOnline.map((visitor) => {
          const detail = [visitor.brand, visitor.plan].filter(Boolean).join(' - ') || visitor.source || formatEventLabel(visitor.lastAction, lang);
          return (
            <div className="admin-online-row" key={`${visitor.session}-${visitor.route}`}>
              <div className="admin-online-main">
                <span className="admin-online-dot" aria-hidden="true"></span>
                <div className="admin-online-copy">
                  <strong>{formatRouteLabel(visitor.route, lang)}</strong>
                  <span>{detail}</span>
                </div>
              </div>
              <div className="admin-online-meta">
                <span>{formatEventLabel(visitor.lastAction, lang)}</span>
                <span>{formatLocation(visitor, lang)}</span>
                <span className="admin-ip-hash">{formatIpSignal(visitor, lang)}</span>
                <span>{visitor.device || '-'} / {visitor.browser || '-'}</span>
                <span>#{visitor.session} · {formatOnlineAgo(visitor.secondsAgo || 0, lang)}</span>
              </div>
            </div>
          );
        })}
      </div>
      <AdminListToggle lang={lang} expanded={expanded} total={online.length} onToggle={() => setExpanded((value) => !value)} />
    </>
  );
};

const AdminOnlinePanel = ({ lang, online, compact = false }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  return (
    <section className={`admin-panel admin-online-panel ${compact ? 'compact' : ''}`}>
      <div className="admin-panel-head admin-online-head">
        <div>
          <h2>{t('الزوار المتصلون', 'Online visitors')}</h2>
          <p className="admin-muted">{t('أي زائر نشط خلال آخر دقيقتين، مع موقع تقريبي و IP لو متاح.', 'Visitors active in the last 2 minutes, with approximate location and IP when available.')}</p>
        </div>
        <span className="admin-live-pill">{t('مباشر', 'Live')}</span>
      </div>
      <AdminOnlineRows lang={lang} online={online} compact={compact} />
    </section>
  );
};

const AdminLeadsPanel = ({ lang, leads, totalLeads = 0, loading, clearLeads }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const [expanded, setExpanded] = useState(false);
  const visibleLeads = expanded ? leads : leads.slice(0, ADMIN_CARD_LIMIT);
  const waHref = (phone) => {
    const digits = String(phone || '').replace(/[^\d+]/g, '');
    return digits ? `https://wa.me/${digits.replace(/^\+/, '')}` : '';
  };
  return (
    <section className="admin-panel">
      <AdminPanelTitle
        title={t('Leads', 'Leads')}
        description={t('زوار سابوا بياناتهم بموافقة واضحة. دي بيانات تواصل فعلية وليست مجرد زيارات.', 'Visitors who shared contact details with clear consent. These are real contact leads, not just visits.')}
        action={<button className="btn btn-ghost btn-sm" onClick={clearLeads} disabled={loading || totalLeads === 0}>{t('مسح الـ leads', 'Clear leads')}</button>}
      />
      <div className="admin-table-wrap">
        <table className="admin-table">
          <thead>
            <tr>
              <th>{t('الوقت', 'Time')}</th>
              <th>{t('الاسم', 'Name')}</th>
              <th>{t('التواصل', 'Contact')}</th>
              <th>{t('الاهتمام', 'Interest')}</th>
              <th>{t('الموقع', 'Location')}</th>
              <th>{t('المصدر', 'Source')}</th>
            </tr>
          </thead>
          <tbody>
            {visibleLeads.map((lead) => (
              <tr key={lead.id}>
                <td data-label={t('الوقت', 'Time')}>{new Date(lead.ts).toLocaleString()}</td>
                <td data-label={t('الاسم', 'Name')}>{lead.name || '-'}</td>
                <td data-label={t('التواصل', 'Contact')}>
                  <div className="admin-contact-cell">
                    {lead.phone && (
                      <a className="admin-table-link" href={waHref(lead.phone)} target="_blank" rel="noopener noreferrer">{lead.phone}</a>
                    )}
                    {lead.email && <a className="admin-table-link" href={`mailto:${lead.email}`}>{lead.email}</a>}
                    {!lead.phone && !lead.email && '-'}
                  </div>
                </td>
                <td data-label={t('الاهتمام', 'Interest')}>
                  <div className="admin-note-cell">
                    <strong>{lead.interest || '-'}</strong>
                    {lead.message && <span>{lead.message}</span>}
                  </div>
                </td>
                <td data-label={t('الموقع', 'Location')}>
                  <div className="admin-note-cell">
                    <strong>{formatLocation(lead, lang)}</strong>
                    <span className="admin-ip-hash">{formatIpSignal(lead, lang)}</span>
                  </div>
                </td>
                <td data-label={t('المصدر', 'Source')}>{lead.source || lead.route || '-'}</td>
              </tr>
            ))}
            {leads.length === 0 && (
              <tr className="admin-empty-row"><td colSpan="6">{t('لا توجد Leads بعد.', 'No leads yet.')}</td></tr>
            )}
          </tbody>
        </table>
      </div>
      <AdminListToggle lang={lang} expanded={expanded} total={leads.length} onToggle={() => setExpanded((value) => !value)} />
    </section>
  );
};

const AdminCommentsPanel = ({ lang, comments, totalComments = 0, pendingComments = 0, loading, moderateComment, deleteComment }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const [expanded, setExpanded] = useState(false);
  const visibleComments = expanded ? comments : comments.slice(0, ADMIN_CARD_LIMIT);
  const statusLabel = (status) => {
    const labels = {
      pending: t('قيد المراجعة', 'Pending'),
      approved: t('منشور', 'Published'),
      rejected: t('مرفوض', 'Rejected')
    };
    return labels[status] || status || t('قيد المراجعة', 'Pending');
  };
  const stars = (rating) => {
    const score = Math.max(1, Math.min(5, Number(rating) || 5));
    return '★'.repeat(score) + '☆'.repeat(5 - score);
  };
  return (
    <section className="admin-panel">
      <AdminPanelTitle
        title={t('إدارة التعليقات', 'Review moderation')}
        description={t(`عندك ${pendingComments} تعليق بانتظار المراجعة. التعليقات لا تظهر للزوار إلا بعد الموافقة.`, `${pendingComments} reviews are waiting. Reviews are public only after approval.`)}
        action={<span className="admin-live-pill">{totalComments} {t('تعليق', 'reviews')}</span>}
      />
      <div className="admin-table-wrap">
        <table className="admin-table admin-comments-table">
          <thead>
            <tr>
              <th>{t('الوقت', 'Time')}</th>
              <th>{t('البراند', 'Brand')}</th>
              <th>{t('العميل', 'Customer')}</th>
              <th>{t('التعليق', 'Review')}</th>
              <th>{t('الحالة', 'Status')}</th>
              <th>{t('إجراء', 'Action')}</th>
            </tr>
          </thead>
          <tbody>
            {visibleComments.map((comment) => {
              const status = comment.status || 'pending';
              return (
                <tr key={comment.id}>
                  <td data-label={t('الوقت', 'Time')}>{comment.ts ? new Date(comment.ts).toLocaleString() : '-'}</td>
                  <td data-label={t('البراند', 'Brand')}>
                    <div className="admin-note-cell">
                      <strong>{comment.brandName || comment.brandSlug || '-'}</strong>
                      <span>{comment.route || '-'}</span>
                    </div>
                  </td>
                  <td data-label={t('العميل', 'Customer')}>
                    <div className="admin-note-cell">
                      <strong>{comment.name || '-'}</strong>
                      <span className="admin-rating">{stars(comment.rating)}</span>
                      <span>{formatLocation(comment, lang)}</span>
                      <span className="admin-ip-hash">{formatIpSignal(comment, lang)}</span>
                    </div>
                  </td>
                  <td data-label={t('التعليق', 'Review')}>
                    <div className="admin-note-cell">
                      <strong>{comment.text || '-'}</strong>
                      <span>{comment.device || '-'}{comment.browser ? ` / ${comment.browser}` : ''}</span>
                    </div>
                  </td>
                  <td data-label={t('الحالة', 'Status')}>
                    <span className={`admin-review-status ${status}`}>{statusLabel(status)}</span>
                  </td>
                  <td data-label={t('إجراء', 'Action')}>
                    <div className="admin-comment-actions">
                      {status !== 'approved' && (
                        <button className="btn btn-ghost btn-sm" onClick={() => moderateComment(comment.id, 'approved')} disabled={loading}>
                          {t('موافقة', 'Approve')}
                        </button>
                      )}
                      {status !== 'rejected' && (
                        <button className="btn btn-ghost btn-sm" onClick={() => moderateComment(comment.id, 'rejected')} disabled={loading}>
                          {t('رفض', 'Reject')}
                        </button>
                      )}
                      {status !== 'pending' && (
                        <button className="btn btn-ghost btn-sm" onClick={() => moderateComment(comment.id, 'pending')} disabled={loading}>
                          {t('انتظار', 'Pending')}
                        </button>
                      )}
                      <button className="btn btn-ghost btn-sm" onClick={() => deleteComment(comment.id)} disabled={loading} aria-label={t('مسح التعليق', 'Delete review')}>
                        <Icon name="trash" size={14} />
                      </button>
                    </div>
                  </td>
                </tr>
              );
            })}
            {comments.length === 0 && (
              <tr className="admin-empty-row"><td colSpan="6">{t('لا توجد تعليقات بعد.', 'No reviews yet.')}</td></tr>
            )}
          </tbody>
        </table>
      </div>
      <AdminListToggle lang={lang} expanded={expanded} total={comments.length} onToggle={() => setExpanded((value) => !value)} />
    </section>
  );
};

const AdminWhatsAppLimitsPanel = ({ lang, limits, loading, resetLimit, clearLimits }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const [expanded, setExpanded] = useState(false);
  const blocked = (limits || []).filter((item) => item.blocked).length;
  const visibleLimits = expanded ? (limits || []) : (limits || []).slice(0, ADMIN_CARD_LIMIT);
  return (
    <section className="admin-panel">
      <AdminPanelTitle
        title={t('حدود واتساب', 'WhatsApp cooldowns')}
        description={t('كل زائر مسموح له بفتح واتساب مرتين خلال ساعتين. التتبع يستخدم session و IP عشان المتابعة والتحكم.', 'Each visitor can open WhatsApp twice within two hours. Tracking uses session and IP for follow-up and control.')}
        action={<button className="btn btn-ghost btn-sm" onClick={clearLimits} disabled={loading || limits.length === 0}>{t('مسح الكل', 'Clear all')}</button>}
      />
      <div className="admin-metric-grid">
        <AdminStat label={t('المحظور الآن', 'Blocked now')} value={blocked} />
        <AdminStat label={t('Sessions نشطة', 'Active sessions')} value={limits.length} />
      </div>
      <div className="admin-table-wrap">
        <table className="admin-table">
          <thead>
            <tr>
              <th>{t('Session', 'Session')}</th>
              <th>{t('الحالة', 'Status')}</th>
              <th>{t('المحاولات', 'Attempts')}</th>
              <th>{t('آخر نية', 'Last intent')}</th>
              <th>{t('الجهاز / الموقع', 'Device / Location')}</th>
              <th>{t('إجراء', 'Action')}</th>
            </tr>
          </thead>
          <tbody>
            {visibleLimits.map((item) => (
              <tr key={item.sessionId}>
                <td data-label={t('Session', 'Session')}>#{item.session}</td>
                <td data-label={t('الحالة', 'Status')}>
                  <span className={`admin-wa-status ${item.blocked ? 'blocked' : 'open'}`}>
                    {item.blocked ? t(`مقفول ${formatCooldown(item.retryAfterMs, lang)}`, `Blocked ${formatCooldown(item.retryAfterMs, lang)}`) : t('مسموح', 'Allowed')}
                  </span>
                </td>
                <td data-label={t('المحاولات', 'Attempts')}>{item.attempts}/{item.limit}</td>
                <td data-label={t('آخر نية', 'Last intent')}>
                  <div className="admin-note-cell">
                    <strong>{[item.lastBrand, item.lastPlan].filter(Boolean).join(' / ') || item.lastSource || '-'}</strong>
                    <span>{formatRouteLabel(item.lastRoute, lang)} · {item.lastAt ? new Date(item.lastAt).toLocaleString() : '-'}</span>
                  </div>
                </td>
                <td data-label={t('الجهاز / الموقع', 'Device / Location')}>
                  <div className="admin-note-cell">
                    <strong>{item.device || '-'}{item.browser ? ` / ${item.browser}` : ''}</strong>
                    <span>{formatLocation(item, lang)}</span>
                    <span className="admin-ip-hash">{formatIpSignal(item, lang)}</span>
                  </div>
                </td>
                <td data-label={t('إجراء', 'Action')}>
                  <button className="btn btn-ghost btn-sm" onClick={() => resetLimit(item.sessionId)} disabled={loading}>
                    {t('فك الحظر', 'Reset')}
                  </button>
                </td>
              </tr>
            ))}
            {limits.length === 0 && (
              <tr className="admin-empty-row"><td colSpan="6">{t('لا توجد حدود واتساب حالياً.', 'No WhatsApp cooldown records yet.')}</td></tr>
            )}
          </tbody>
        </table>
      </div>
      <AdminListToggle lang={lang} expanded={expanded} total={(limits || []).length} onToggle={() => setExpanded((value) => !value)} />
    </section>
  );
};

const AdminFunnelFlow = ({ lang, metrics }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const [expanded, setExpanded] = useState(false);
  const max = Math.max(1, ...metrics.map((metric) => adminNumber(metric.value)));
  const visibleMetrics = expanded ? metrics : metrics.slice(0, ADMIN_CARD_LIMIT);
  return (
    <section className="admin-panel admin-funnel-panel">
      <AdminPanelTitle
        title={t('قمع العملاء', 'Customer funnel')}
        description={t('من أول مشاهدة لحد نية الشراء على واتساب.', 'From first view to WhatsApp purchase intent.')}
      />
      <div className="admin-flow-list">
        {visibleMetrics.map((metric, index) => (
          <div className="admin-flow-row" key={metric.label} style={{ '--bar': `${adminPercent(metric.value, max)}%` }}>
            <div className="admin-flow-index">{String(index + 1).padStart(2, '0')}</div>
            <div className="admin-flow-copy">
              <span>{metric.label}</span>
              <strong>{metric.value}</strong>
            </div>
            <div className="admin-flow-track"><span></span></div>
          </div>
        ))}
      </div>
      <AdminListToggle lang={lang} expanded={expanded} total={metrics.length} onToggle={() => setExpanded((value) => !value)} />
    </section>
  );
};

const AdminTopBars = ({ lang, title, items, emptyText, compact = false, bare = false }) => {
  const [expanded, setExpanded] = useState(false);
  const max = Math.max(1, ...items.map((item) => adminNumber(item.count)));
  const visibleItems = expanded ? items : items.slice(0, ADMIN_CARD_LIMIT);
  const Tag = bare ? 'div' : 'section';
  return (
    <Tag className={`${bare ? '' : 'admin-panel'} admin-bars-panel ${compact ? 'compact' : ''}`}>
      <h2>{title}</h2>
      <div className="admin-top-list">
        {items.length === 0 ? <p className="admin-muted">{emptyText || 'No data yet.'}</p> : visibleItems.map((item) => (
          <div key={item.label} className="admin-top-row" style={{ '--bar': `${adminPercent(item.count, max)}%` }}>
            <span>{item.label}</span>
            <strong>{item.count}</strong>
          </div>
        ))}
      </div>
      <AdminListToggle lang={lang} expanded={expanded} total={items.length} onToggle={() => setExpanded((value) => !value)} />
    </Tag>
  );
};

const AdminActivityTimeline = ({ lang, recent }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const [expanded, setExpanded] = useState(false);
  const events = expanded ? recent : recent.slice(0, ADMIN_CARD_LIMIT);
  if (events.length === 0) {
    return <p className="admin-muted admin-empty-state">{t('لا توجد بيانات بعد.', 'No data yet.')}</p>;
  }
  return (
    <>
      <div className="admin-timeline">
        {events.map((event) => (
          <div className={`admin-timeline-row tone-${adminEventTone(event.type)}`} key={event.id}>
            <span className="admin-timeline-dot" aria-hidden="true"></span>
            <div className="admin-timeline-copy">
              <strong>{formatEventLabel(event.type, lang)}</strong>
              <span>{formatRouteLabel(event.route, lang)} · {[event.brand, event.plan].filter(Boolean).join(' / ') || event.source || event.referrer || '-'}</span>
            </div>
            <time>{event.ts ? new Date(event.ts).toLocaleTimeString() : '-'}</time>
          </div>
        ))}
      </div>
      <AdminListToggle lang={lang} expanded={expanded} total={recent.length} onToggle={() => setExpanded((value) => !value)} />
    </>
  );
};

const AdminActivityFeed = ({ lang, recent }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  return (
    <section className="admin-panel admin-activity-feed">
      <AdminPanelTitle
        title={t('أحدث النشاطات', 'Recent activity')}
        description={t('نبض سريع للأحداث المهمة بدون ما يقطع قراءة اللوحة.', 'A quick pulse of important events without breaking dashboard scan.')}
      />
      <AdminActivityTimeline lang={lang} recent={recent} />
    </section>
  );
};

const AdminActivityPanel = ({ lang, recent, loading, clearEvents }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  return (
    <section className="admin-panel">
      <AdminPanelTitle
        title={t('آخر النشاط', 'Recent activity')}
        description={t('آخر الأحداث المهمة في قائمة واحدة مختصرة، مع إمكانية عرض الباقي عند الحاجة.', 'Latest important events in one compact list, expandable when needed.')}
        action={<button className="btn btn-ghost btn-sm" onClick={clearEvents} disabled={loading}>{t('مسح البيانات', 'Clear data')}</button>}
      />
      <AdminActivityTimeline lang={lang} recent={recent} />
    </section>
  );
};

const AdminTopList = ({ lang, title, items, emptyText }) => (
  <AdminTopBars lang={lang} title={title} items={items} emptyText={emptyText} />
);

window.AdminPage = AdminPage;