/* global React, Icon */
const { useState, useEffect, useRef, useMemo } = React;

// ============ Data ============
const INITIAL_ITEMS = [
  {
    id: 1, brand: 'NaMaximum', name: 'WPC 80 – srvátkový CFM whey proteín',
    flavor: 'Čokoláda — lieskový oriešok', size: '1 kg',
    packColor: '#0077BC', packLabel: 'WPC 80', packSub: '1 KG',
    unit: 24.90, orig: 27.90, qty: 2, stock: 'skladom',
    badges: ['gmo-free'], flag: 'NOVÉ',
  },
  {
    id: 2, brand: 'NaMaximum', name: 'BCAA 2:1:1 – instant drink',
    flavor: 'Grep', size: '500 g',
    packColor: '#F96628', packLabel: 'BCAA', packSub: '500 G',
    unit: 19.90, orig: null, qty: 1, stock: 'skladom',
    badges: ['vegan', 'gmo-free'], flag: null,
  },
  {
    id: 3, brand: 'NaMaximum', name: 'Kreatín monohydrát – Creapure®',
    flavor: 'Bez príchuti', size: '500 g',
    packColor: '#1A5282', packLabel: 'CREATINE', packSub: '500 G',
    unit: 16.90, orig: 21.90, qty: 1, stock: 'skladom',
    badges: ['vegan'], flag: '-23 %',
  },
  {
    id: 4, brand: 'NaMaximum', name: 'Vitamín D3 + K2 MK-7 – 90 kapsúl',
    flavor: null, size: '90 kaps.',
    packColor: '#F9C80E', packLabel: 'D3+K2', packSub: '90 KAPS',
    unit: 8.90, orig: null, qty: 1, stock: 'skladom',
    badges: ['gmo-free', 'lacto-free'], flag: null,
  },
];

const CROSS_SELL = [
  {
    id: 101, brand: 'NaMaximum', name: 'Shaker 700 ml s miešacou guličkou',
    packColor: '#1B1B1B', packLabel: 'SHAKE', packSub: '700 ML',
    unit: 3.90, orig: null, rating: 4.7, reviews: 412, flag: null, badges: [],
  },
  {
    id: 102, brand: 'NaMaximum', name: 'L-Glutamín – 500 g čistej amino',
    packColor: '#26BB59', packLabel: 'GLUT', packSub: '500 G',
    unit: 14.90, orig: 17.90, rating: 4.8, reviews: 289, flag: '-17 %', badges: ['vegan'],
  },
  {
    id: 103, brand: 'NaMaximum', name: 'Omega 3 – 120 kapsúl',
    packColor: '#00AEEF', packLabel: 'OMEGA 3', packSub: '120 KAPS',
    unit: 11.90, orig: null, rating: 4.9, reviews: 524, flag: null, badges: ['lacto-free'],
  },
  {
    id: 104, brand: 'NaMaximum', name: 'Magnézium bisglycinát – 90 kaps.',
    packColor: '#8E44AD', packLabel: 'MAG', packSub: '90 KAPS',
    unit: 9.90, orig: null, rating: 4.8, reviews: 201, flag: 'NOVÉ', badges: ['vegan', 'gmo-free'],
  },
];

const SHIPPING = [
  { id: 'packeta', name: 'Packeta výdajné miesto', logo: 'PKT', cls: 'pkt', price: 2.49, eta: 'Doručenie: ut 28. 4. – st 29. 4.', fast: true },
  { id: 'zbox',    name: 'Packeta Z-BOX (24/7)', logo: 'Z', cls: 'box', price: 1.99, eta: 'Doručenie: ut 28. 4. – st 29. 4.', fast: true },
  { id: 'dpd',     name: 'DPD kuriér', logo: 'DPD', cls: 'dpd', price: 3.90, eta: 'Doručenie: st 29. 4.', fast: false },
  { id: 'gls',     name: 'GLS kuriér', logo: 'GLS', cls: 'gls', price: 3.90, eta: 'Doručenie: st 29. 4.', fast: false },
  { id: 'sps',     name: 'SPS kuriér', logo: 'SPS', cls: 'sps', price: 4.49, eta: 'Doručenie: st 29. 4. – št 30. 4.', fast: false },
];

const PROMO_CODES = {
  'LETO10': { type: 'pct', value: 10, label: 'Leto 2026 · -10 %' },
  'PROTEIN5': { type: 'eur', value: 5, label: 'Welcome -5 €' },
};

const FREESHIP_THRESHOLD = 59;

// ============ Cart ============
function Cart() {
  const [items, setItems] = useState(INITIAL_ITEMS);
  const [removing, setRemoving] = useState(null);
  const [shipping, setShipping] = useState('zbox');
  const [promoInput, setPromoInput] = useState('');
  const [promo, setPromo] = useState(null);
  const [note, setNote] = useState('');
  const [showNote, setShowNote] = useState(false);
  const [toasts, setToasts] = useState([]);
  const [addedIds, setAddedIds] = useState(new Set());
  const [favIds, setFavIds] = useState(new Set());
  const [giftClaimed, setGiftClaimed] = useState(true);

  // Tweaks
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const [tweaks, setTweaks] = useState({
    state: 'full', // full | single | empty
    showUpsell: true,
    showProgress: true,
    showGift: true,
  });

  // Subtotal etc.
  const { subtotal, origSubtotal, productSavings } = useMemo(() => {
    let s = 0, o = 0;
    for (const it of items) {
      s += it.unit * it.qty;
      o += (it.orig ?? it.unit) * it.qty;
    }
    return { subtotal: s, origSubtotal: o, productSavings: o - s };
  }, [items]);

  const promoDiscount = useMemo(() => {
    if (!promo) return 0;
    if (promo.type === 'pct') return subtotal * (promo.value / 100);
    return Math.min(subtotal, promo.value);
  }, [promo, subtotal]);

  const selectedShip = SHIPPING.find(s => s.id === shipping);
  const freeShipReached = subtotal >= FREESHIP_THRESHOLD;
  const shipPrice = freeShipReached ? 0 : (selectedShip?.price ?? 0);
  const total = subtotal - promoDiscount + shipPrice;
  const totalSavings = productSavings + promoDiscount + (freeShipReached && selectedShip ? selectedShip.price : 0);

  const toEur = (n) => n.toLocaleString('sk-SK', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';

  // ============ Toast helper ============
  const pushToast = (msg, kind = 'ok') => {
    const id = Math.random().toString(36).slice(2);
    setToasts(t => [...t, { id, msg, kind }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 2600);
  };

  // ============ Item actions ============
  const updateQty = (id, delta) => {
    setItems(prev => prev.map(it => it.id === id
      ? { ...it, qty: Math.max(1, Math.min(99, it.qty + delta)) } : it));
  };
  const setQty = (id, val) => {
    const n = Math.max(1, Math.min(99, parseInt(val) || 1));
    setItems(prev => prev.map(it => it.id === id ? { ...it, qty: n } : it));
  };
  const removeItem = (id) => {
    setRemoving(id);
    setTimeout(() => {
      setItems(prev => prev.filter(it => it.id !== id));
      setRemoving(null);
      pushToast('Položka odstránená z košíka');
    }, 320);
  };
  const toggleFav = (id) => {
    setFavIds(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
  };

  const applyPromo = () => {
    const code = promoInput.trim().toUpperCase();
    if (!code) return;
    if (PROMO_CODES[code]) {
      setPromo({ code, ...PROMO_CODES[code] });
      setPromoInput('');
      pushToast(`Zľavový kód ${code} aktivovaný`);
    } else {
      pushToast('Neplatný kód', 'err');
    }
  };
  const removePromo = () => { setPromo(null); pushToast('Zľava zrušená'); };

  const addCrossSell = (prod) => {
    const already = items.find(it => it.id === prod.id);
    if (already) {
      setItems(prev => prev.map(it => it.id === prod.id ? { ...it, qty: it.qty + 1 } : it));
    } else {
      setItems(prev => [...prev, {
        ...prod, flavor: null, size: prod.packSub.toLowerCase(),
        qty: 1, stock: 'skladom',
      }]);
    }
    setAddedIds(s => { const n = new Set(s); n.add(prod.id); return n; });
    setTimeout(() => setAddedIds(s => { const n = new Set(s); n.delete(prod.id); return n; }), 1200);
    pushToast(`${prod.name.split('–')[0].trim()} pridaný do košíka`);
  };

  // ============ Tweaks handshake ============
  useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Apply state tweak
  useEffect(() => {
    if (tweaks.state === 'empty') setItems([]);
    else if (tweaks.state === 'single') setItems([INITIAL_ITEMS[0]]);
    else setItems(INITIAL_ITEMS);
    setPromo(null);
  }, [tweaks.state]);

  const isEmpty = items.length === 0;
  const itemCount = items.reduce((s, it) => s + it.qty, 0);

  return (
    <div className="page">
      <AnnounceBar />
      <Header />

      <div className="wrap" data-screen-label="01 Cart">
        <div className="title-row">
          <h1>Košík</h1>
          {!isEmpty && <div className="count"><strong>{itemCount}</strong> {itemCount === 1 ? 'položka' : (itemCount < 5 ? 'položky' : 'položiek')}</div>}
        </div>

        {isEmpty ? (
          <EmptyCart />
        ) : (
          <div className="grid">
            <div>
              {tweaks.showProgress && <FreeShipProgress subtotal={subtotal} />}
              <div className="items">
                <div className="items-head">
                  <span></span>
                  <span>Produkt</span>
                  <span>Množstvo</span>
                  <span>Cena</span>
                  <span>Sklad</span>
                  <span></span>
                </div>
                {items.map(it => (
                  <Item
                    key={it.id} it={it} toEur={toEur}
                    removing={removing === it.id}
                    isFav={favIds.has(it.id)}
                    onQty={updateQty} onSetQty={setQty}
                    onRemove={removeItem} onFav={toggleFav}
                  />
                ))}
                {tweaks.showGift && giftClaimed && subtotal >= 40 && (
                  <div className="gift-row">
                    <div className="gift-icon"><Icon name="gift" size={18} /></div>
                    <div>
                      <strong>Vzorka BCAA + Shaker</strong> — darček k nákupu nad 40 €
                    </div>
                    <div className="free">ZADARMO</div>
                  </div>
                )}
              </div>

              <div className="row-cards">
                <div className="card-sm">
                  <h3><Icon name="tag" size={16} /> Zľavový kód</h3>
                  {!promo ? (
                    <div className="promo-form">
                      <input
                        type="text" placeholder="Zadaj kód (napr. LETO10)"
                        value={promoInput}
                        onChange={e => setPromoInput(e.target.value)}
                        onKeyDown={e => e.key === 'Enter' && applyPromo()}
                      />
                      <button onClick={applyPromo}>Použiť</button>
                    </div>
                  ) : (
                    <div className="promo-applied">
                      <span className="tag">{promo.code}</span>
                      <span>{promo.label}</span>
                      <button className="x" onClick={removePromo} aria-label="Zrušiť zľavu"><Icon name="x" size={14} /></button>
                    </div>
                  )}
                  {!promo && (
                    <div style={{ marginTop: 10, fontSize: 12, color: 'var(--muted)' }}>
                      Tip: skús <strong style={{ color: 'var(--color-1)', fontFamily: 'var(--font-heading)' }}>LETO10</strong> pre -10 %.
                    </div>
                  )}
                </div>

                <div className="card-sm">
                  <h3><Icon name="note" size={16} /> Poznámka k objednávke</h3>
                  {!showNote ? (
                    <button
                      onClick={() => setShowNote(true)}
                      style={{ background: 'none', border: 0, color: 'var(--color-1)', cursor: 'pointer', fontSize: 14, fontWeight: 600, padding: 0 }}
                    >+ Pridať poznámku pre kuriéra</button>
                  ) : (
                    <textarea
                      className="note-input"
                      placeholder="Napr. nechať u susedov, zavolať pred doručením..."
                      value={note} onChange={e => setNote(e.target.value)}
                      autoFocus
                    />
                  )}
                </div>
              </div>
            </div>

            <div className="summary">
              <div className="summary-card">
                <h2>Prehľad objednávky</h2>

                <div className="sum-row sub">
                  <span>Medzisúčet ({itemCount} ks)</span>
                  <span className="val">{toEur(subtotal)}</span>
                </div>
                {productSavings > 0 && (
                  <div className="sum-row discount">
                    <span>Zľava produktov</span>
                    <span className="val">-{toEur(productSavings)}</span>
                  </div>
                )}
                {promo && (
                  <div className="sum-row discount">
                    <span>Kód {promo.code}</span>
                    <span className="val">-{toEur(promoDiscount)}</span>
                  </div>
                )}
                <div className="sum-line" />
                <div className={"sum-row" + (freeShipReached ? " free" : "")}>
                  <span>Doprava · {selectedShip?.name.split(' ')[0]}</span>
                  <span className="val">{freeShipReached ? 'ZADARMO' : toEur(shipPrice)}</span>
                </div>

                <div className="total-row">
                  <div className="lbl">Spolu<small>vrátane DPH 20 %</small></div>
                  <div className="val">{toEur(total)}<small>{(total / 1.2).toLocaleString('sk-SK', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} € bez DPH</small></div>
                </div>

                {totalSavings > 0.01 && (
                  <div className="saved-pill">
                    <Icon name="sparkles" size={16} />
                    Ušetril si <strong>{toEur(totalSavings)}</strong>
                  </div>
                )}

                <ShippingPicker value={shipping} onChange={setShipping} freeShip={freeShipReached} toEur={toEur} />

                <button className="cta" onClick={() => pushToast('Presmerovávam na doručenie a platbu...')}>
                  Pokračovať k doprave
                  <Icon name="arrowRight" size={20} />
                </button>

                <div className="pay-methods" title="Akceptované spôsoby platby">
                  <span className="chip visa">VISA</span>
                  <span className="chip mc">MC</span>
                  <span className="chip apay">Pay</span>
                  <span className="chip gpay">G Pay</span>
                  <span className="chip tb">TB</span>
                  <span className="chip cod">Dobierka</span>
                </div>
              </div>

              <div className="trust">
                <div className="tr"><Icon name="shield" size={18} /><div><strong>HACCP + GMP</strong> certifikovaná výroba v Spišskej Novej Vsi</div></div>
                <div className="tr"><Icon name="flask" size={18} /><div><strong>Nezávisle lab-testované</strong> — certifikáty na stránkach produktov</div></div>
                <div className="tr"><Icon name="rotate" size={18} /><div><strong>14 dní na vrátenie</strong> bez udania dôvodu</div></div>
                <div className="tr"><Icon name="lock" size={18} /><div><strong>Bezpečná platba</strong> — SSL šifrovanie, 3D Secure</div></div>
              </div>
            </div>
          </div>
        )}

        {tweaks.showUpsell && !isEmpty && (
          <CrossSell items={CROSS_SELL} onAdd={addCrossSell} addedIds={addedIds} toEur={toEur} />
        )}
      </div>

      <ReassureStrip />
      <FooterMini />

      <div className="toast-wrap">
        {toasts.map(t => (
          <div key={t.id} className={"toast" + (t.kind === 'err' ? ' err' : '')}>
            <span className="ic">
              <Icon name={t.kind === 'err' ? 'x' : 'checkCircle'} size={16} />
            </span>
            {t.msg}
          </div>
        ))}
      </div>

      {tweaksOpen && (
        <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} onClose={() => setTweaksOpen(false)} />
      )}
    </div>
  );
}

window.Cart = Cart;