// Cart page — line items + summary panel with coupon.

const { useI18n, fmtNum, fmtPrice } = window.RBI18n;
const { Reveal } = window.RBAnim;
const { ProductImg, Swatch } = window.RBImg;
const { IconMinus, IconPlus, IconX, IconTruck, IconArrowL, IconArrowR, IconShield, IconGift, IconCheck, IconBag } = window.RBIcons;

const CartPage = ({ items, setItems }) => {
  const { t, lang } = useI18n();
  const [coupon, setCoupon] = React.useState('');
  const [applied, setApplied] = React.useState(false);

  const update = (idx, patch) => {
    const next = [...items];
    next[idx] = { ...next[idx], ...patch };
    setItems(next);
  };
  const remove = (idx) => setItems(items.filter((_, i) => i !== idx));

  const sub = items.reduce((s, l) => s + l.p.price * l.qty, 0);
  const discount = applied ? Math.round(sub * 0.10) : 0;
  const shipping = sub >= 250 ? 0 : 25;
  const total = sub - discount + shipping;

  if (items.length === 0) {
    return (
      <main className="bg-paper min-h-[70vh] flex items-center page-fade">
        <div className="max-w-md mx-auto text-center px-6 py-20">
          <div className="w-20 h-20 mx-auto rounded-full bg-paper-warm flex items-center justify-center mb-6">
            <IconBag size={28} className="text-rose-400"/>
          </div>
          <h1 className="ff-serif text-4xl text-ink mb-3">{t('cart.empty_h')}</h1>
          <p className="text-ink-soft text-sm mb-8">{t('cart.empty_p')}</p>
          <button onClick={() => window.RBNav.go('shop')}
                  className="bg-ink text-paper px-9 py-4 text-[11px] tracking-[0.35em] uppercase hover:bg-rose-500 transition-colors duration-500">
            {t('cart.start')} →
          </button>
        </div>
      </main>
    );
  }

  const ArrowBack = lang === 'ar' ? IconArrowR : IconArrowL;

  return (
    <main className="bg-paper page-fade">
      <div className="bg-paper-warm/40 border-b hairline">
        <div className="max-w-[1480px] mx-auto px-5 md:px-10 py-12">
          <nav className="text-xs text-ink-mute mb-3 flex items-center gap-2">
            <a href="#" onClick={(e)=>{e.preventDefault();window.RBNav.go('home')}} className="hover:text-ink">{t('shop.crumb_home')}</a>
            <span>/</span>
            <span className="text-ink">{t('cart.title')}</span>
          </nav>
          <Reveal>
            <h1 className="ff-serif text-5xl md:text-7xl text-ink">{t('cart.title')}</h1>
            <p className="text-sm text-ink-soft mt-3 ltr-nums">{fmtNum(items.length, lang)} {lang==='ar'?'منتج في السلة':'item(s) in bag'}</p>
          </Reveal>
        </div>
      </div>

      <div className="max-w-[1480px] mx-auto px-5 md:px-10 py-12">
        <div className="grid md:grid-cols-[1fr_400px] gap-12">

          <div>
            <div className="border-b hairline pb-3 mb-2 hidden md:grid grid-cols-[1fr_120px_120px_40px] text-[10px] text-ink-mute tracking-[0.3em] uppercase">
              <span>{t('cart.product')}</span>
              <span className="text-center">{t('cart.qty')}</span>
              <span className="text-start">{t('cart.total')}</span>
              <span></span>
            </div>

            <div className="divide-y divide-ink/10">
              {items.map((l, i) => (
                <Reveal key={i} delay={i*80} className="grid grid-cols-[100px_1fr] md:grid-cols-[120px_1fr_120px_120px_40px] gap-4 md:gap-6 py-7 items-center">
                  <div className="ar-portrait overflow-hidden bg-paper-warm">
                    <ProductImg p={l.p} variant="a" className="w-full h-full"/>
                  </div>
                  <div>
                    <a href="#" onClick={(e)=>{e.preventDefault();window.RBNav.go('product',{id:l.p.id})}}
                       className="ff-serif text-xl md:text-2xl text-ink hover:text-rose-500 transition">
                      {l.p[lang]}
                    </a>
                    <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-ink-mute">
                      <span className="inline-flex items-center gap-1.5">
                        <span>{t('shop.color')}:</span>
                        <Swatch hex={window.RB.COLOR_OPTS.find(c=>c.id===l.color)?.hex || '#f79ab5'} size={10}/>
                        <span>{window.RB.COLOR_OPTS.find(c=>c.id===l.color)?.[lang]}</span>
                      </span>
                      <span>{t('shop.size')}: {l.size}</span>
                    </div>
                    <p className="text-sm text-ink font-medium mt-2 md:hidden ltr-nums">{fmtPrice(l.p.price, lang)}</p>
                    <div className="flex items-center justify-between mt-3 md:hidden">
                      <div className="flex items-center border hairline">
                        <button onClick={() => update(i, { qty: Math.max(1, l.qty-1) })} className="px-2.5 py-2 hover:bg-paper-warm"><IconMinus size={12}/></button>
                        <span className="w-8 text-center text-sm ltr-nums">{fmtNum(l.qty, lang)}</span>
                        <button onClick={() => update(i, { qty: l.qty+1 })} className="px-2.5 py-2 hover:bg-paper-warm"><IconPlus size={12}/></button>
                      </div>
                      <span className="text-sm font-medium ltr-nums">{fmtPrice(l.p.price * l.qty, lang)}</span>
                      <button onClick={() => remove(i)} className="p-2 text-ink-mute hover:text-rose-500"><IconX size={16}/></button>
                    </div>
                  </div>
                  <div className="hidden md:flex justify-center">
                    <div className="flex items-center border hairline">
                      <button onClick={() => update(i, { qty: Math.max(1, l.qty-1) })} className="px-2.5 py-2 hover:bg-paper-warm"><IconMinus size={12}/></button>
                      <span className="w-8 text-center text-sm ltr-nums">{fmtNum(l.qty, lang)}</span>
                      <button onClick={() => update(i, { qty: l.qty+1 })} className="px-2.5 py-2 hover:bg-paper-warm"><IconPlus size={12}/></button>
                    </div>
                  </div>
                  <span className="hidden md:block text-sm font-medium text-ink ltr-nums">{fmtPrice(l.p.price * l.qty, lang)}</span>
                  <button onClick={() => remove(i)} className="hidden md:block p-2 text-ink-mute hover:text-rose-500 text-start"><IconX size={18}/></button>
                </Reveal>
              ))}
            </div>

            <button onClick={() => window.RBNav.go('shop')}
                    className="mt-7 text-xs tracking-[0.3em] uppercase text-ink-soft hover:text-rose-500 inline-flex items-center gap-2 underline-grow">
              <ArrowBack size={14}/> {t('cart.continue')}
            </button>
          </div>

          <aside className="md:sticky md:top-32 self-start">
            <div className="bg-paper-warm/50 border hairline p-7 md:p-8">
              <h3 className="ff-serif text-3xl text-ink mb-6">{t('cart.summary')}</h3>

              <div className="mb-6">
                <label className="text-[10px] text-ink-mute tracking-[0.3em] uppercase mb-2 block">{t('cart.coupon')}</label>
                <div className="flex gap-2">
                  <input value={coupon} onChange={(e) => setCoupon(e.target.value)}
                         placeholder={t('cart.coupon_ph')}
                         className="flex-1 bg-paper border hairline px-3 py-2.5 text-sm focus:border-ink outline-none"/>
                  <button onClick={() => setApplied(coupon.toUpperCase() === 'RARE10')}
                          className="bg-ink text-paper px-4 text-[11px] tracking-[0.2em] uppercase hover:bg-rose-500 transition-colors">
                    {t('cart.apply')}
                  </button>
                </div>
                {applied && <p className="text-xs text-emerald-700 mt-2 flex items-center gap-1"><IconCheck size={12}/> {t('cart.applied')}</p>}
                {!applied && coupon && <p className="text-xs text-ink-mute mt-2">{t('cart.hint')}</p>}
              </div>

              <div className="space-y-3 text-sm border-t hairline pt-6 ltr-nums">
                <div className="flex justify-between"><span className="text-ink-soft">{t('cart.subtotal')}</span><span>{fmtPrice(sub, lang)}</span></div>
                {applied && <div className="flex justify-between text-rose-600"><span>{t('cart.discount')} (RARE10)</span><span>−{fmtPrice(discount, lang)}</span></div>}
                <div className="flex justify-between">
                  <span className="text-ink-soft">{t('cart.shipping')}</span>
                  <span>{shipping === 0 ? <span className="text-emerald-700">{t('cart.free')}</span> : fmtPrice(shipping, lang)}</span>
                </div>
                {sub < 250 && (
                  <p className="text-xs text-ink-mute bg-rose-50 p-3 border-s-2 border-rose-300 mt-3">
                    {t('cart.add_more')} <span className="text-rose-600 font-medium">{fmtPrice(250 - sub, lang)}</span> {t('cart.free_ship')}
                  </p>
                )}
              </div>

              <div className="border-t border-ink/20 mt-6 pt-6 flex items-baseline justify-between">
                <span className="text-[11px] tracking-[0.3em] uppercase text-ink font-medium">{t('cart.grand')}</span>
                <span className="ff-serif text-3xl text-ink ltr-nums">{fmtPrice(total, lang)}</span>
              </div>

              <button onClick={() => window.RBNav.go('checkout')}
                      className="w-full bg-ink text-paper py-4 text-[11px] tracking-[0.35em] uppercase mt-6 hover:bg-rose-500 transition-colors duration-500">
                {t('cart.checkout')} →
              </button>

              <div className="mt-6 space-y-2.5 text-xs text-ink-mute">
                <div className="flex items-center gap-2"><IconShield size={14}/> {t('cart.secure')}</div>
                <div className="flex items-center gap-2"><IconTruck size={14}/> {t('cart.fast_ship')}</div>
                <div className="flex items-center gap-2"><IconGift size={14}/> {t('cart.gift')}</div>
              </div>
            </div>

            <div className="flex items-center justify-center gap-2 mt-4 text-ink-mute">
              <span className="text-[10px] tracking-[0.25em] uppercase text-ink/70 px-3 py-2 border hairline">
                {lang==='ar' ? 'الدفع عند الاستلام فقط' : 'Cash on delivery only'}
              </span>
            </div>
          </aside>
        </div>
      </div>
    </main>
  );
};

window.RBCartPage = { CartPage };