/* === Main app === */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakText, TweakSelect, AdminPage, LeadCapturePopup } = window;

class ErrorBoundary extends React.Component {
  constructor(props) { super(props); this.state = { hasError: false }; }
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    if (this.state.hasError) {
      return React.createElement('div', {
        style: { textAlign:'center', padding:'80px 20px', color:'#b8b1a0', fontFamily:'system-ui' }
      },
        React.createElement('div', { style:{ fontSize:48, marginBottom:16 } }, '⚠'),
        React.createElement('h2', { style:{ color:'#f5f1e8', marginBottom:8 } }, 'Something went wrong'),
        React.createElement('button', {
          onClick: () => { this.setState({ hasError: false }); window.history.replaceState(null, '', '/'); window.location.reload(); },
          style: { padding:'12px 24px', borderRadius:12, background:'#d4a93e', color:'#0a0908', border:0, fontWeight:700, fontSize:15, cursor:'pointer', marginTop:16 }
        }, 'Reload')
      );
    }
    return this.props.children;
  }
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "headerStyle": "minimal",
  "showNoticeBar": true,
  "heroLayout": "split",
  "storeName": "اشتراكات الذكاء"
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  gold:    { '--gold': '#d4a93e', '--gold-2': '#f4d27a', '--gold-3': '#8a6d1f' },
  emerald: { '--gold': '#34d399', '--gold-2': '#6ee7b7', '--gold-3': '#047857' },
  rose:    { '--gold': '#f472b6', '--gold-2': '#fbcfe8', '--gold-3': '#9d174d' },
  ice:     { '--gold': '#60a5fa', '--gold-2': '#93c5fd', '--gold-3': '#1e40af' },
};

const DEFAULT_SITE_SETTINGS = {
  showNoticeBar: true,
  noticeAr: 'تسليم خلال 30 دقيقة • أمان كامل • دعم فني 24/7',
  noticeEn: '30-min delivery · Secure · 24/7 support',
  storeNameAr: 'AI اشتراكات',
  storeNameEn: 'AI Subscriptions'
};

const cartToastProductName = (product, lang) => {
  const brand = product?.brand || '';
  const plan = product?.plan || '';
  const planLabel = typeof displayPlanName === 'function' ? displayPlanName(product, lang) : plan;
  return [brand, planLabel].filter(Boolean).join(' - ') || brand || plan;
};

const normalizeRoute = (value = 'home') => {
  let route = String(value || 'home').trim();
  if (route.startsWith('#')) route = route.slice(1);
  try { route = decodeURIComponent(route); } catch (e) {}
  route = route.replace(/^\/+/, '').replace(/\/+$/, '').trim();
  if (!route || route === 'home') return 'home';
  if (route.startsWith('category/')) return `cat:${route.slice(9)}`;
  if (route.startsWith('cat/')) return `cat:${route.slice(4)}`;
  if (route.startsWith('brand/')) return `brand:${route.slice(6)}`;
  return route;
};

const routeSegment = (value) => encodeURIComponent(String(value || '').replace(/^\/+|\/+$/g, ''));

const routeToPath = (value = 'home') => {
  const route = normalizeRoute(value);
  if (route === 'home') return '/';
  if (route === 'catalog') return '/catalog';
  if (route === 'cart') return '/cart';
  if (route === 'admin-ahmed') return '/admin-ahmed';
  if (route.startsWith('cat:')) return `/category/${routeSegment(route.slice(4))}`;
  if (route.startsWith('brand:')) return `/brand/${routeSegment(route.slice(6))}`;
  return `/${routeSegment(route)}`;
};

const pathToRoute = (pathname = '/', hash = '') => {
  if (hash && hash !== '#') return normalizeRoute(hash);
  let path = pathname || '/';
  try { path = decodeURIComponent(path); } catch (e) {}
  path = path.replace(/^\/+/, '').replace(/\/+$/, '');
  if (!path || path === 'home') return 'home';
  const [head, ...rest] = path.split('/');
  const segment = rest.join('/');
  if ((head === 'category' || head === 'cat') && segment) return `cat:${segment}`;
  if (head === 'brand' && segment) return `brand:${segment}`;
  return normalizeRoute(path);
};

const App = () => {
  // Tweaks
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [siteSettings, setSiteSettings] = useState(DEFAULT_SITE_SETTINGS);

  // Apply accent palette via CSS vars
  useEffect(() => {
    const palette = ACCENT_PALETTES[tweaks.accent] || ACCENT_PALETTES.gold;
    Object.entries(palette).forEach(([k,v]) => document.documentElement.style.setProperty(k, v));
  }, [tweaks.accent]);

  // Routing - clean paths with legacy hash support.
  const [route, setRouteState] = useState(() => pathToRoute(window.location.pathname, window.location.hash));
  const [lang, setLang] = useState('ar');

  useEffect(() => {
    fetch('/api/settings')
      .then((res) => res.json())
      .then((data) => {
        if (data.ok && data.settings) setSiteSettings({ ...DEFAULT_SITE_SETTINGS, ...data.settings });
      })
      .catch(() => {});
  }, []);

  const handleSettingsChange = useCallback((next) => {
    setSiteSettings({ ...DEFAULT_SITE_SETTINGS, ...next });
  }, []);

  useEffect(() => {
    const syncRoute = () => {
      const nextRoute = pathToRoute(window.location.pathname, window.location.hash);
      if (window.location.hash && window.location.hash !== '#') {
        window.history.replaceState(null, '', routeToPath(nextRoute));
      }
      window.AISUBS_CURRENT_ROUTE = nextRoute;
      setRouteState(nextRoute);
    };
    syncRoute();
    window.addEventListener('popstate', syncRoute);
    window.addEventListener('hashchange', syncRoute);
    return () => {
      window.removeEventListener('popstate', syncRoute);
      window.removeEventListener('hashchange', syncRoute);
    };
  }, []);

  useEffect(() => {
    document.documentElement.setAttribute('lang', lang);
    document.documentElement.setAttribute('dir', lang === 'ar' ? 'rtl' : 'ltr');
  }, [lang]);

  useEffect(() => {
    window.AISUBS_CURRENT_ROUTE = route;
    if (route.startsWith('admin-ahmed')) return;
    const brandSlug = route.startsWith('brand:') ? route.slice(6) : '';
    const brand = brandSlug ? BRANDS.find((b) => b.slug === brandSlug) : null;
    trackAnalytics('page_view', brand ? { brand: brand.brand, category: brand.category } : {});
    if (brand) trackAnalytics('brand_view', { brand: brand.brand, category: brand.category });
    if (route === 'cart') trackAnalytics('cart_view');
  }, [route, lang]);

  useEffect(() => {
    if (route.startsWith('admin-ahmed')) return;
    const sendPresence = (source) => {
      if (document.visibilityState === 'hidden') return;
      trackAnalytics('heartbeat', { source });
    };
    sendPresence('presence_start');
    const intervalId = window.setInterval(() => sendPresence('presence_interval'), 30000);
    const onActive = () => sendPresence('presence_active');
    document.addEventListener('visibilitychange', onActive);
    window.addEventListener('focus', onActive);
    return () => {
      window.clearInterval(intervalId);
      document.removeEventListener('visibilitychange', onActive);
      window.removeEventListener('focus', onActive);
    };
  }, [route]);

  // Cart
  const [cart, setCart] = useState(() => {
    try {
      const storedCart = localStorage.getItem('aisubs_cart');
      const parsedCart = storedCart ? JSON.parse(storedCart) : [];
      return clampCartItems(Array.isArray(parsedCart) ? parsedCart : []);
    } catch(e) {
      return [];
    }
  });
  const [cartOpen, setCartOpen] = useState(false);
  const selectedCartCount = cartItemCount(cart);


  // Persist cart + user + orders
  useEffect(() => { try { localStorage.setItem('aisubs_cart', JSON.stringify(cart)); } catch(e){} }, [cart]);

  const navigate = useCallback((to) => {
    const nextRoute = normalizeRoute(to);
    const nextPath = routeToPath(nextRoute);
    setCartOpen(false);
    if (`${window.location.pathname}${window.location.search}${window.location.hash}` !== nextPath) {
      window.history.pushState(null, '', nextPath);
    }
    window.AISUBS_CURRENT_ROUTE = nextRoute;
    setRouteState(nextRoute);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, []);

  const changeLang = useCallback((nextLang) => {
    trackAnalytics('language_change', { value: nextLang });
    setLang(nextLang);
  }, []);

  // Toast
  const [toasts, setToasts] = useState([]);
  const addToast = useCallback((msg, action = null, duration = 2500) => {
    const id = `${Date.now()}-${Math.random()}`;
    setToasts(prev => [...prev, { id, msg, action }]);
    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), duration);
  }, []);

  useEffect(() => {
    const onWhatsAppBlocked = (event) => {
      const message = event?.detail?.message || (lang === 'ar'
        ? 'فتح واتساب محدود مؤقتاً. حاول تاني بعد شوية.'
        : 'WhatsApp is temporarily limited. Please try again later.');
      addToast(message, null, 6500);
    };
    window.addEventListener('aisubs:whatsapp-blocked', onWhatsAppBlocked);
    return () => window.removeEventListener('aisubs:whatsapp-blocked', onWhatsAppBlocked);
  }, [lang, addToast]);

  // Back to top
  const [showTop, setShowTop] = useState(false);
  useEffect(() => {
    const onScroll = () => setShowTop(window.scrollY > 400);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const addToCart = useCallback((product) => {
    if (cartItemCount(cart) >= CART_ITEM_LIMIT) {
      trackAnalytics('cart_limit_hit', { brand: product.brand, plan: product.plan, category: product.category, source: 'add_to_cart', value: String(CART_ITEM_LIMIT) });
      addToast(cartLimitMessage(lang), null, 3000);
      return false;
    }
    setCart(prev => {
      if (cartItemCount(prev) >= CART_ITEM_LIMIT) return prev;
      const ex = prev.find(it => it.id === product.id);
      const next = ex
        ? prev.map(it => it.id === product.id ? {...it, qty: (Number(it.qty) || 0) + 1} : it)
        : [...prev, {...product, qty: 1}];
      return clampCartItems(next);
    });
    const packageName = cartToastProductName(product, lang);
    trackAnalytics('add_to_cart', { brand: product.brand, plan: product.plan, category: product.category });
    addToast(
      lang === 'ar' ? `تم إضافة ${packageName} للسلة` : `${packageName} added to cart`,
      { label: lang === 'ar' ? 'عرض السلة' : 'View cart', route: 'cart' }
    );
    return true;
  }, [cart, lang, addToast]);

  const updateQty = useCallback((id, qty) => {
    const nextQty = Number(qty) || 0;
    if (nextQty <= 0) {
      setCart(prev => prev.filter(it => it.id !== id));
      return true;
    }
    const item = cart.find(it => it.id === id);
    if (!item) return false;
    const currentQty = Math.max(1, Number(item.qty) || 1);
    const maxQtyForItem = CART_ITEM_LIMIT - (cartItemCount(cart) - currentQty);
    if (nextQty > maxQtyForItem) {
      trackAnalytics('cart_limit_hit', { source: 'quantity', value: String(CART_ITEM_LIMIT) });
      addToast(cartLimitMessage(lang), null, 3000);
      return false;
    }
    setCart(prev => clampCartItems(prev.map(it => it.id === id ? {...it, qty: nextQty} : it)));
    return true;
  }, [cart, lang, addToast]);
  const removeItem = (id) => setCart(prev => prev.filter(it => it.id !== id));


  // Determine page from route
  let page;
  if (route === 'home') page = <HomePage lang={lang} navigate={navigate} addToCart={addToCart}/>;
  else if (route === 'catalog') page = <CatalogPage lang={lang} navigate={navigate} addToCart={addToCart}/>;
  else if (route.startsWith('cat:') && CATEGORIES.some((c) => c.id === route.slice(4))) page = <CatalogPage lang={lang} navigate={navigate} addToCart={addToCart} initialCategory={route.slice(4)}/>;
  else if (route.startsWith('brand:')) page = <BrandPage slug={route.slice(6)} lang={lang} navigate={navigate} addToCart={addToCart}/>;
  else if (route === 'admin-ahmed') page = (
    <AdminPage lang={lang} settings={siteSettings} onSettingsChange={handleSettingsChange}/>
  );
  else if (route === 'cart') page = (
    <div className="checkout-page" style={{maxWidth:700}}>
      <h1 style={{fontSize: 32, fontWeight: 800, marginTop: 0}}>{lang==='ar'?'سلة المشتريات':'Shopping Cart'}</h1>
      <p style={{color:'var(--ink-3)', marginBottom: 28}}>
        {selectedCartCount} {lang==='ar'?'باقة مختارة':'items selected'}
      </p>
      {cart.length === 0 ? (
        <div className="empty-state">
          <div style={{fontSize: 48, marginBottom: 12}}>🛒</div>
          <p>{lang==='ar' ? 'السلة فاضية' : 'Your cart is empty'}</p>
          <button className="btn btn-gold btn-sm" onClick={()=>navigate('catalog')} style={{marginTop:12}}>
            {lang==='ar' ? 'ابدأ التصفح' : 'Start browsing'}
          </button>
        </div>
      ) : (
        <div className="panel">
          {cart.map(it => (
            <div key={it.id} className="cart-item" style={{padding:'16px 0'}}>
              <ThumbSm brand={it.brand} color={it.color} glyph={it.glyph}/>
              <div className="info">
                <div className="b-line">{it.brand}</div>
                <div className="p-line">{typeof displayPlanName === 'function' ? displayPlanName(it, lang) : it.plan}</div>
                <div style={{fontSize:12, color:'var(--ink-3)'}}>{tBilling(it.billing, lang)}</div>
              </div>
              <div className="qty-ctrl" style={{alignSelf:'center'}}>
                <button disabled={selectedCartCount >= CART_ITEM_LIMIT} title={selectedCartCount >= CART_ITEM_LIMIT ? cartLimitMessage(lang) : ''} onClick={()=>updateQty(it.id, (Number(it.qty) || 1) + 1)}><Icon name="plus" size={12}/></button>
                <span>{it.qty}</span>
                <button onClick={()=>updateQty(it.id, it.qty - 1)}><Icon name="minus" size={12}/></button>
                <button onClick={()=>removeItem(it.id)} style={{color:'var(--danger)', borderColor:'transparent'}}><Icon name="trash" size={14}/></button>
              </div>
            </div>
          ))}
          <div style={{background:'rgba(212,169,62,0.05)', borderRadius:12, padding:16, marginTop:24, border:'1px dashed var(--line)'}}>
             <p style={{fontSize:13, color:'var(--ink-2)', margin:0, textAlign:'center'}}>
              {lang==='ar' ? 'هيتم إرسال محتويات السلة بالكامل للواتساب لتأكيد الطلب والأسعار' : 'The full cart will be sent to WhatsApp to confirm your order and prices'}
             </p>
          </div>
          <a className="btn btn-gold btn-block" style={{marginTop:16, background:'#25D366', color:'white', textDecoration:'none', justifyContent:'center', padding:'16px'}}
            href={buildCartWaUrl(cart, lang)}
            target="_blank" rel="noopener noreferrer"
            onClick={(e) => guardWhatsAppOpen(e, buildCartWaUrl(cart, lang), lang, { source: 'cart_page', value: String(selectedCartCount) })}>
            <Icon name="wa" size={20}/>
            {lang==='ar' ? 'أرسل الطلب الآن (واتساب)' : 'Send Order Now (WhatsApp)'}
          </a>
          <button className="btn btn-ghost btn-block" onClick={()=>navigate('catalog')} style={{marginTop:8, borderColor:'transparent', justifyContent:'center'}}>
            {lang==='ar' ? 'إضافة المزيد من الباقات' : 'Add more plans'}
          </button>
        </div>
      )}
    </div>
  );
  else {
    page = <div className="empty-state">404</div>;
  }

  if (route === 'admin-ahmed') {
    return page;
  }

  return (
    <>
      <Header
        route={route} navigate={navigate}
        cartCount={selectedCartCount}
        lang={lang} setLang={changeLang}
        showNoticeBar={tweaks.showNoticeBar && siteSettings.showNoticeBar}
        storeName={lang === 'ar' ? siteSettings.storeNameAr : siteSettings.storeNameEn}
        noticeText={lang === 'ar' ? siteSettings.noticeAr : siteSettings.noticeEn}/>
      <main key={route} className="page-transition">{page}</main>
      <Footer lang={lang} navigate={navigate}/>
      {LeadCapturePopup && <LeadCapturePopup lang={lang} />}
      {!route.startsWith('brand:') && (
        <a href={WA_LINK} target="_blank" rel="noopener" className="sticky-wa"
          onClick={(e) => guardWhatsAppOpen(e, WA_LINK, lang, { source: 'floating_whatsapp' })}>
          <Icon name="wa" size={26}/>
          <span className="tooltip">{lang==='ar' ? 'تواصل معانا واتساب' : 'Chat on WhatsApp'}</span>
        </a>
      )}
      {/* Toast notifications */}
      <div className="toast-container">
        {toasts.map(t => (
          <div key={t.id} className="toast">
            <span className="toast-icon">✓</span>
            <span>{t.msg}</span>
            {t.action && (
              <button type="button" className="toast-action" onClick={() => {
                navigate(t.action.route);
                setToasts(prev => prev.filter(item => item.id !== t.id));
              }}>
                {t.action.label}
              </button>
            )}
          </div>
        ))}
      </div>
      {/* Back to top */}
      <button className={`back-to-top ${showTop ? 'visible' : ''}`}
        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="18 15 12 9 6 15"/>
        </svg>
      </button>
      {cartOpen && (
        <CartDrawer cart={cart} lang={lang}
          onClose={()=>setCartOpen(false)}
          navigate={navigate}
          updateQty={updateQty}
          removeItem={removeItem}/>
      )}

      {/* Tweaks panel */}
      <TweaksPanel title={lang==='ar' ? 'تخصيص الموقع' : 'Tweaks'}>
        <TweakSection label={lang==='ar' ? 'الهوية' : 'Brand'}/>
        <TweakRadio label={lang==='ar'?'الإبراز':'Accent'}
          value={tweaks.accent}
          options={['gold','emerald','rose','ice']}
          onChange={(v)=>setTweak('accent', v)}/>
        <TweakSection label={lang==='ar' ? 'الواجهة' : 'Layout'}/>
        <TweakToggle label={lang==='ar'?'شريط العروض':'Promo bar'}
          value={tweaks.showNoticeBar}
          onChange={(v)=>setTweak('showNoticeBar', v)}/>
      </TweaksPanel>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ErrorBoundary><App/></ErrorBoundary>);