/* === Cart drawer + Checkout flow === */

// === Cart drawer ===
const CartDrawer = ({ cart, lang, onClose, navigate, updateQty, removeItem }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const cartCount = cartItemCount(cart);
  const total = cart.reduce((s, it) => s + (it.priceNum || 0) * it.qty, 0);
  const validItems = cart.filter(i => !i.needsReview);

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose}/>
      <div className="drawer">
        <div className="drawer-head">
          <h2>{t('سلة المشتريات','Shopping Cart')} <span style={{color:'var(--ink-3)', fontSize:14, fontWeight:500}}>({cartCount})</span></h2>
          <button className="close-btn" onClick={onClose}><Icon name="close" size={18}/></button>
        </div>
        <div className="drawer-body">
          {cart.length === 0 ? (
            <div className="cart-empty">
              <div className="ico">🛒</div>
              <p>{t('السلة فاضية','Your cart is empty')}</p>
              <button className="btn btn-gold btn-sm" onClick={()=>{ onClose(); navigate('catalog'); }}>
                {t('ابدأ التصفح','Start browsing')}
              </button>
            </div>
          ) : cart.map(it => (
            <div key={it.id} className="cart-item">
              <ThumbSm brand={it.brand} color={it.color} glyph={it.glyph}/>
              <div className="info">
                <div className="b-line">{it.brand}</div>
                <div className="p-line">{it.plan}</div>
                <div style={{fontSize:12, color:'var(--ink-3)'}}>{tBilling(it.billing, lang)}</div>
                <div className="qty-ctrl">
                  <button onClick={()=>updateQty(it.id, it.qty - 1)}><Icon name="minus" size={12}/></button>
                  <span>{it.qty}</span>
                  <button disabled={cartCount >= CART_ITEM_LIMIT} title={cartCount >= CART_ITEM_LIMIT ? cartLimitMessage(lang) : ''} onClick={()=>updateQty(it.id, (Number(it.qty) || 1) + 1)}><Icon name="plus" size={12}/></button>
                  <button onClick={()=>removeItem(it.id)} style={{marginRight:'auto', color:'var(--danger)', borderColor:'transparent'}}><Icon name="trash" size={14}/></button>
                </div>
              </div>
              <div style={{textAlign:'left', alignSelf:'start'}}>
                <span className="review-pill">{t('راجع','Contact')}</span>
              </div>
            </div>
          ))}
        </div>
        {cart.length > 0 && (
          <div className="drawer-foot">
            <div className="totals" style={{border:0, padding:0}}>
              <p style={{fontSize:13, color:'var(--ink-2)', textAlign:'center', margin:'0 0 16px'}}>
                {t('اضغط تحت عشان نبعتلك أسعار كل اللي اخترته في رسالة واحدة','Click below to get prices for all your selections in one message')}
              </p>
            </div>
            <a className="btn btn-gold btn-block"
              href={buildCartWaUrl(cart, lang)}
              target="_blank" rel="noopener noreferrer"
              style={{background:'#25D366', color:'white', textDecoration:'none', boxShadow:'0 8px 24px rgba(37,211,102,0.3)'}}
              onClick={() => {
                trackAnalytics('whatsapp_click', { source: 'cart_drawer', value: String(cartCount) });
                onClose();
              }}>
              <Icon name="wa" size={18}/>
              {t('طلب الاشتراك (واتساب)','Order via WhatsApp')}
            </a>
          </div>
        )}
      </div>
    </>
  );
};

// === Order summary (right-rail of checkout) ===
const OrderSummary = ({ cart, lang }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const subtotal = cart.reduce((s, it) => s + (it.priceNum || 0) * it.qty, 0);
  const fee = 0;
  const total = subtotal + fee;
  return (
    <aside className="panel summary">
      <h2 style={{fontSize: 18, marginBottom: 18}}>{t('سلة المشتريات','Shopping Cart')}</h2>
      <div className="summary-items">
        {cart.map(it => (
          <div key={it.id} className="summary-item">
            <ThumbSm brand={it.brand} color={it.color} glyph={it.glyph} size={44}/>
            <div className="info">
              <div className="b">{it.brand}</div>
              <div className="p">{it.plan}</div>
              <div className="qty">×{it.qty} · {tBilling(it.billing, lang)}</div>
            </div>
            <div className="price">
              <span className="review-pill" style={{fontSize:10}}>{t('استفسر','Ask')}</span>
            </div>
          </div>
        ))}
      </div>
      <div className="totals" style={{border:0, padding:0}}>
        <p style={{fontSize:13, color:'var(--ink-2)', lineHeight:1.6}}>
          {t('سيتم إرسال محتويات السلة بالكامل عبر واتساب ليقوم الفريق بتزويدك بالأسعار النهائية والعروض المتاحة حالياً.', 'The full cart contents will be sent via WhatsApp so our team can provide you with the final prices and current offers.')}
        </p>
      </div>
      <div style={{marginTop: 18, fontSize: 12, color: 'var(--ink-3)', display:'flex', gap:8, alignItems:'center'}}>
        <Icon name="shield" size={14}/>
        <span>{t('مدفوعاتك آمنة ومشفّرة','Your payment is secure and encrypted')}</span>
      </div>
    </aside>
  );
};

// === Steps indicator ===
const StepIndicator = ({ step, lang }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const steps = [
    { id: 1, ar: 'البيانات', en: 'Details' },
    { id: 2, ar: 'الدفع', en: 'Payment' },
    { id: 3, ar: 'تأكيد', en: 'Confirm' },
  ];
  return (
    <div className="steps">
      {steps.map((s, i) => (
        <React.Fragment key={s.id}>
          <div className={`step ${step === s.id ? 'active' : ''} ${step > s.id ? 'done' : ''}`} style={{flex: 'initial'}}>
            <div className="num">{step > s.id ? <Icon name="check" size={16}/> : s.id}</div>
            <div className="lbl">{t(s.ar, s.en)}</div>
          </div>
          {i < steps.length - 1 && <div className="bar" style={{height:1, flex:1, background: step > s.id ? 'var(--gold-3)' : 'var(--line)'}}/>}
        </React.Fragment>
      ))}
    </div>
  );
};

// === Step 1: Customer details ===
const StepDetails = ({ lang, details, setDetails, onNext, user }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const set = (k, v) => setDetails({ ...details, [k]: v });
  const valid = details.name && details.phone && /^\+?\d{8,}$/.test(details.phone.replace(/\s/g,'')) && details.email && /\S+@\S+/.test(details.email);

  useEffect(() => {
    if (user && !details.name) {
      setDetails({ ...details, name: user.name || '', email: user.email || '', phone: user.phone || '' });
    }
  // eslint-disable-next-line
  }, [user]);

  return (
    <div className="panel">
      <h2>{t('بياناتك','Your details')}</h2>
      <p className="sub">{t('بنحتاج بياناتك عشان نوصلك بيانات الدخول للاشتراك','We need your details to send your subscription credentials')}</p>
      <div className="form-row two">
        <div className="form-row">
          <label>{t('الاسم بالكامل','Full name')} <span className="req">*</span></label>
          <input value={details.name||''} onChange={e=>set('name', e.target.value)} placeholder={t('محمد أحمد','John Doe')}/>
        </div>
        <div className="form-row">
          <label>{t('رقم الموبايل','Phone')} <span className="req">*</span></label>
          <input value={details.phone||''} onChange={e=>set('phone', e.target.value)} placeholder="+20 10 1234 5678"/>
        </div>
      </div>
      <div className="form-row">
        <label>{t('الإيميل','Email')} <span className="req">*</span></label>
        <input type="email" value={details.email||''} onChange={e=>set('email', e.target.value)} placeholder="you@example.com"/>
        <span className="hint">{t('بنرسل لك بيانات الاشتراك على الإيميل','We send subscription details to this email')}</span>
      </div>
      <div className="form-row">
        <label>{t('ملاحظات إضافية','Additional notes')}</label>
        <textarea value={details.notes||''} onChange={e=>set('notes', e.target.value)} rows={3} placeholder={t('أي تفاصيل إضافية...','Any extra details...')}/>
      </div>
      <button className="btn btn-gold" disabled={!valid} onClick={onNext} style={{marginTop:8}}>
        {t('التالي — اختر طريقة الدفع','Next — choose payment')}
        <Icon name={lang==='ar'?'arrow':'arrowR'} size={18}/>
      </button>
    </div>
  );
};

// === Step 2: Payment ===
const StepPayment = ({ lang, payment, setPayment, total, onBack, onNext, details }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;

  const methods = [
    { id: 'instapay', color:'#1B59F8', initials:'IP',
      ar:'InstaPay', en:'InstaPay',
      desc_ar:'تحويل فوري بين البنوك', desc_en:'Instant bank transfer',
      details_ar:'حوّل المبلغ إلى', details_en:'Transfer to',
      handle:'aisubs@instapay' },
    { id: 'vodafone', color:'#E60000', initials:'V',
      ar:'فودافون كاش', en:'Vodafone Cash',
      desc_ar:'محفظة فودافون', desc_en:'Vodafone wallet',
      details_ar:'حوّل المبلغ إلى الرقم', details_en:'Transfer to number',
      handle:'01551724428' },
    { id: 'orange', color:'#FF7900', initials:'OC',
      ar:'أورنج كاش', en:'Orange Cash',
      desc_ar:'محفظة أورنج', desc_en:'Orange wallet',
      details_ar:'حوّل المبلغ إلى الرقم', details_en:'Transfer to number',
      handle:'01551724428' },
    { id: 'etisalat', color:'#00B388', initials:'E',
      ar:'اتصالات كاش', en:'Etisalat Cash',
      desc_ar:'محفظة اتصالات', desc_en:'Etisalat wallet',
      details_ar:'حوّل المبلغ إلى الرقم', details_en:'Transfer to number',
      handle:'01551724428' },
  ];

  const selected = methods.find(m => m.id === payment) || null;
  const fmtTotal = fmtPrice(total) + ' ' + t('ج.م','EGP');

  return (
    <div className="panel">
      <h2>{t('اختر طريقة الدفع','Choose payment method')}</h2>
      <p className="sub">{t('بعد الدفع، أرسل لنا صورة من الإيصال على واتساب وهنفعّل اشتراكك في 30 دقيقة','After paying, send us a screenshot on WhatsApp and we activate within 30 minutes')}</p>

      <div className="pay-method-list">
        {methods.map(m => (
          <div key={m.id}
            className={`pay-method ${payment===m.id ? 'selected' : ''}`}
            onClick={()=>setPayment(m.id)}>
            <div className="pm-logo" style={{background: m.color}}>{m.initials}</div>
            <div style={{flex:1}}>
              <div className="pm-name">{t(m.ar, m.en)}</div>
              <div className="pm-desc">{t(m.desc_ar, m.desc_en)}</div>
            </div>
            <div className="radio"></div>
          </div>
        ))}
      </div>

      {selected && (
        <div className="pay-instructions">
          <h4>{t('خطوات الدفع','Payment steps')}</h4>
          <ol>
            <li>{t(`${selected.details_ar}: `, `${selected.details_en}: `)}<code className="en">{selected.handle}</code></li>
            <li>{t(`المبلغ المطلوب: `, `Amount: `)}<code className="en">{fmtTotal}</code></li>
            <li>
              {t('بعد الدفع، أرسل صورة الإيصال على واتساب: ', 'After paying, send the receipt screenshot on WhatsApp: ')}
              <a href={WA_LINK} target="_blank" rel="noopener" style={{color:'var(--gold-2)', fontWeight:700}} className="en">+20 15 51724428</a>
            </li>
            <li>{t('هتستلم بيانات الاشتراك على الإيميل خلال 30 دقيقة', "You'll receive your subscription details via email within 30 minutes")}</li>
          </ol>
        </div>
      )}

      <div style={{display:'flex', gap:12, marginTop:24}}>
        <button className="btn btn-ghost" onClick={onBack}>
          <Icon name={lang==='ar'?'arrowR':'arrow'} size={18}/>
          {t('رجوع','Back')}
        </button>
        <button className="btn btn-gold" style={{flex:1, justifyContent:'center'}} disabled={!payment} onClick={onNext}>
          {t('تأكيد ودفع','Confirm & pay')}
          <Icon name={lang==='ar'?'arrow':'arrowR'} size={18}/>
        </button>
      </div>
    </div>
  );
};

// === Step 3: Success ===
const StepSuccess = ({ lang, order, navigate }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  return (
    <div className="success-card">
      <div className="success-icon"><Icon name="check" size={50}/></div>
      <h1>{t('تم استلام طلبك!','Order received!')}</h1>
      <div className="order-no en">#{order.id}</div>
      <p>
        {t(
          `شكراً ${order.details.name.split(' ')[0]}! جاري مراجعة الدفع وهنبعتلك بيانات الاشتراك على ${order.details.email} خلال 30 دقيقة.`,
          `Thank you ${order.details.name.split(' ')[0]}! Your payment is being reviewed and we'll send your subscription details to ${order.details.email} within 30 minutes.`
        )}
      </p>
      <p style={{fontSize:13, marginTop: 16, color:'var(--ink-3)'}}>
        {t('لو محتاج أي مساعدة، تواصل على واتساب: ','Need help? WhatsApp us: ')}
        <a href={WA_LINK} target="_blank" rel="noopener" style={{color:'var(--gold-2)', fontWeight:700}} className="en">+20 15 51724428</a>
      </p>
      <div style={{display:'flex', gap:12, justifyContent:'center', marginTop: 28, flexWrap:'wrap'}}>
        <button className="btn btn-gold" onClick={()=>navigate('account')}>
          <Icon name="box" size={18}/>
          {t('عرض طلباتي','View my orders')}
        </button>
        <button className="btn btn-ghost" onClick={()=>navigate('home')}>
          {t('العودة للرئيسية','Back home')}
        </button>
      </div>
    </div>
  );
};

// === Checkout container ===
const CheckoutPage = ({ cart, lang, navigate, user }) => {
  const t = (ar, en) => lang === 'en' ? en : ar;
  const cartCount = cartItemCount(cart);

  if (cart.length === 0) {
    return (
      <div className="checkout-page">
        <div className="empty-state">
          <div style={{fontSize: 48, marginBottom: 12}}>🛒</div>
          <p>{t('السلة فاضية','Your cart is empty')}</p>
          <button className="btn btn-gold btn-sm" onClick={()=>navigate('catalog')} style={{marginTop:12}}>
            {t('ابدأ التصفح','Start browsing')}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="checkout-page">
      <h1 style={{fontSize: 32, fontWeight: 800, marginTop: 0, marginBottom: 6}}>{t('مراجعة الطلب','Review Inquiry')}</h1>
      <p style={{color:'var(--ink-3)', marginBottom: 28}}>{t('راجع طلباتك قبل الإرسال للواتساب','Review your items before sending to WhatsApp')}</p>
      
      <div className="checkout-grid">
        <div className="panel">
          <h2>{t('تأكيد الإرسال','Confirm Inquiry')}</h2>
          <p className="sub">{t('بمجرد الضغط، هيفتح واتساب برسالة منظمة فيها كل طلباتك عشان نرد عليك بالأسعار.','Once you click, WhatsApp will open with a structured message containing all your requests.')}</p>
          
          <div style={{background:'rgba(212,169,62,0.05)', border:'1px dashed var(--line-2)', borderRadius:12, padding:20, marginBottom:24}}>
            <ul style={{margin:0, paddingRight:20, color:'var(--ink-2)', fontSize:14, display:'flex', flexDirection:'column', gap:8}}>
              <li>{t('سيتم إرسال طلب بـ ' + cartCount + ' اشتراكات.', 'An order for ' + cartCount + ' subscriptions will be sent.')}</li>
              <li>{t('الرد يكون عادة خلال أقل من 30 دقيقة.', 'Responses are usually within 30 minutes.')}</li>
              <li>{t('لا يوجد التزام بالشراء قبل تأكيد السعر.', 'No obligation to buy before confirming the price.')}</li>
            </ul>
          </div>

          <a className="btn btn-gold btn-block" 
            href={buildCartWaUrl(cart, lang)}
            target="_blank" rel="noopener noreferrer"
            style={{background:'#25D366', color:'white', textDecoration:'none', boxShadow:'0 8px 24px rgba(37,211,102,0.3)', padding:'18px'}}
            onClick={() => trackAnalytics('whatsapp_click', { source: 'checkout_page', value: String(cartCount) })}>
            <Icon name="wa" size={20}/>
            <span style={{fontSize:16}}>{t('تأكيد الطلب (واتساب)','Confirm Order (WhatsApp)')}</span>
          </a>
          
          <button className="btn btn-ghost btn-block" onClick={()=>navigate('catalog')} style={{marginTop:12, borderColor:'transparent'}}>
            {t('إضافة المزيد من الباقات','Add more plans')}
          </button>
        </div>
        <OrderSummary cart={cart} lang={lang}/>
      </div>
    </div>
  );
};

Object.assign(window, {
  CartDrawer, CheckoutPage, OrderSummary,
});