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

// ============ Announce bar ============
function AnnounceBar() {
  return (
    <div className="anno">
      <span><Icon name="truck" size={13} />Doprava zadarmo nad 59 €</span>
      <span className="sep">•</span>
      <span><Icon name="shield" size={13} />HACCP + GMP certifikovaná výroba</span>
      <span className="sep">•</span>
      <span><Icon name="flask" size={13} />Nezávisle lab-testované</span>
    </div>
  );
}

// ============ Header ============
function Header() {
  return (
    <header className="hd">
      <div className="hd-inner">
        <div className="logo">
          <div className="dot">SK</div>
          <img src="../assets/logo-namaximum.svg" alt="NaMaximum" onError={e => { e.target.style.display = 'none'; e.target.insertAdjacentHTML('afterend', '<span style="font-family:var(--font-heading);font-weight:900;font-size:20px;color:#0077BC">NaMaximum</span>'); }} />
        </div>
        <div className="stepper" aria-label="Kroky objednávky">
          <div className="step active"><span className="num">1</span><span>Košík</span></div>
          <div className="step-divider" />
          <div className="step"><span className="num">2</span><span>Doprava & platba</span></div>
          <div className="step-divider" />
          <div className="step"><span className="num">3</span><span>Zhrnutie</span></div>
        </div>
        <div className="hd-secure">
          <Icon name="lock" size={14} /><strong>SSL</strong> · bezpečná platba
        </div>
        <a className="hd-back" href="#">
          <Icon name="arrowLeft" size={16} />Pokračovať v nákupe
        </a>
      </div>
    </header>
  );
}

// ============ Free-ship progress ============
function FreeShipProgress({ subtotal }) {
  const threshold = 59;
  const pct = Math.min(100, (subtotal / threshold) * 100);
  const remain = Math.max(0, threshold - subtotal);
  const done = remain === 0;

  return (
    <div className="freeship">
      <div className="freeship-top">
        <div className="freeship-icon"><Icon name={done ? 'checkCircle' : 'truck'} size={20} /></div>
        <div className={"freeship-msg" + (done ? ' reached' : '')}>
          {done ? (
            <>Máš <strong>dopravu zadarmo</strong> — pridať môžeš ešte viac, hranica je prekročená 🎉</>
          ) : (
            <>Pridaj tovar za <strong>{remain.toLocaleString('sk-SK', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €</strong> a získaš <strong>dopravu zadarmo</strong></>
          )}
        </div>
        <div className={"freeship-badge" + (done ? ' active' : '')}>{done ? '✓ splnené' : `${Math.round(pct)} %`}</div>
      </div>
      <div className="track">
        <div className={"track-bar" + (done ? ' done' : '')} style={{ width: pct + '%' }} />
      </div>
      <div className="freeship-stops">
        <span className={subtotal >= 0 ? 'hit' : ''}>0 €</span>
        <span className={subtotal >= 30 ? 'hit' : ''}>30 € · vzorka</span>
        <span className={subtotal >= 40 ? 'hit' : ''}>40 € · darček</span>
        <span className={done ? 'done' : ''}>59 € · doprava zadarmo</span>
      </div>
    </div>
  );
}

// ============ Item row ============
function Item({ it, toEur, removing, isFav, onQty, onSetQty, onRemove, onFav }) {
  const lineTotal = it.unit * it.qty;
  const origLineTotal = (it.orig ?? it.unit) * it.qty;
  const save = origLineTotal - lineTotal;
  const badgeSrc = (b) => `assets/badges/${b}.svg`;

  return (
    <div className={"item" + (removing ? ' removing' : '')}>
      <div className="item-img" style={{ background: `linear-gradient(135deg, ${it.packColor}15, #F7F8FA)` }}>
        {it.flag && <div className={"flag" + (it.flag === 'NOVÉ' ? ' new' : '')}>{it.flag}</div>}
        <div className="pack" style={{ color: it.packColor }}>
          {it.packLabel}
          <small>{it.packSub}</small>
        </div>
      </div>

      <div className="item-info">
        <div className="item-brand">{it.brand}</div>
        <div className="item-name">{it.name}</div>
        <div className="item-variant">
          {it.flavor && <span className="item-tag"><span className="k">Príchuť</span>{it.flavor}</span>}
          <span className="item-tag"><span className="k">Balenie</span>{it.size}</span>
          {it.badges?.map(b => (
            <span key={b} className="item-tag" style={{ background: 'var(--color-1-tint)', color: 'var(--color-1-darker)' }}>
              <img src={badgeSrc(b)} alt="" width={14} height={14} onError={e => e.target.style.display = 'none'} />
              {b === 'gmo-free' ? 'GMO-free' : b === 'vegan' ? 'Vegan' : b === 'lacto-free' ? 'Lacto-free' : b}
            </span>
          ))}
        </div>
        <div className="item-actions">
          <button className={"fav" + (isFav ? ' active' : '')} onClick={() => onFav(it.id)}>
            <Icon name="heart" size={14} stroke={isFav ? 0 : 2} />
            <span style={{ fill: isFav ? 'currentColor' : 'none' }}>{isFav ? 'Obľúbené' : 'Uložiť na neskôr'}</span>
          </button>
          <button onClick={() => onRemove(it.id)}>
            <Icon name="trash" size={14} />Odstrániť
          </button>
        </div>
      </div>

      <div className="qty">
        <button onClick={() => onQty(it.id, -1)} disabled={it.qty <= 1} aria-label="Znížiť"><Icon name="minus" size={14} /></button>
        <input
          type="text" inputMode="numeric" value={it.qty}
          onChange={e => onSetQty(it.id, e.target.value)}
          aria-label="Množstvo"
        />
        <button onClick={() => onQty(it.id, 1)} aria-label="Zvýšiť"><Icon name="plus" size={14} /></button>
      </div>

      <div className="item-price">
        <div className="total">{toEur(lineTotal)}</div>
        <div className="unit">{toEur(it.unit)} / ks</div>
        {it.orig && <div className="orig">{toEur(origLineTotal)}</div>}
        {save > 0 && <div className="save">-{toEur(save)}</div>}
      </div>

      <div className="item-stock">{it.stock}</div>

      <button className="item-remove" onClick={() => onRemove(it.id)} aria-label="Odstrániť položku">
        <Icon name="x" size={16} />
      </button>
    </div>
  );
}

// ============ Shipping picker ============
function ShippingPicker({ value, onChange, freeShip, toEur }) {
  const SHIPPING = window.__SHIPPING || [];
  return (
    <div className="ship-group">
      <h3>Doručenie</h3>
      {SHIPPING.map(s => (
        <div
          key={s.id}
          className={"ship" + (value === s.id ? ' selected' : '')}
          onClick={() => onChange(s.id)}
          role="radio" aria-checked={value === s.id} tabIndex={0}
          onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onChange(s.id)}
        >
          <div className={"logo-mini " + s.cls}>{s.logo}</div>
          <div className="ship-body">
            <div className="ship-name">{s.name}</div>
            <div className="ship-eta">
              {s.fast && <span className="green">✓ rýchle doručenie</span>}
              {s.fast && ' · '}{s.eta}
            </div>
          </div>
          <div className={"ship-price" + (freeShip ? ' free' : '')}>
            {freeShip ? 'Zadarmo' : toEur(s.price)}
          </div>
        </div>
      ))}
    </div>
  );
}

// ============ Cross-sell ============
function CrossSell({ items, onAdd, addedIds, toEur }) {
  return (
    <div className="cross">
      <div className="cross-head">
        <h2>Často kupované spolu<small>Produkty, ktoré si iní kupujú k proteínu a kreatínu</small></h2>
        <a href="#" style={{ color: 'var(--color-1)', fontWeight: 600, fontSize: 13 }}>Zobraziť všetky →</a>
      </div>
      <div className="cross-grid">
        {items.map(p => (
          <div key={p.id} className="prod">
            <div className="img" style={{ background: `linear-gradient(135deg, ${p.packColor}12, #F7F8FA)` }}>
              {p.flag && <div className={"flag-top" + (p.flag === 'NOVÉ' ? ' new' : '')}>{p.flag}</div>}
              {p.badges?.length > 0 && (
                <div className="badges-top">
                  {p.badges.map(b => (
                    <img key={b} src={`assets/badges/${b}.svg`} alt={b} onError={e => e.target.style.display = 'none'} />
                  ))}
                </div>
              )}
              <div className="pack" style={{ color: p.packColor }}>
                {p.packLabel}
                <small>{p.packSub}</small>
              </div>
            </div>
            <div className="prod-brand">{p.brand}</div>
            <div className="prod-name">{p.name}</div>
            <div className="prod-rating">
              <span className="star">★</span> {p.rating} <span style={{ color: 'var(--muted)' }}>({p.reviews})</span>
            </div>
            <div className="prod-price-row">
              <div>
                <span className="prod-price">{toEur(p.unit)}</span>
                {p.orig && <span className="prod-price-orig">{toEur(p.orig)}</span>}
              </div>
              <button
                className={"prod-add" + (addedIds.has(p.id) ? ' added' : '')}
                onClick={() => onAdd(p)}
                aria-label="Pridať do košíka"
              >
                <Icon name={addedIds.has(p.id) ? 'check' : 'plus'} size={18} />
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============ Reassurance strip ============
function ReassureStrip() {
  return (
    <div className="reassure">
      <div className="reassure-in">
        <div className="it"><Icon name="truck" size={28} /><div><h4>Doprava zadarmo nad 59 €</h4><p>Packeta, DPD, GLS a Z-BOX — doručenie do 1–2 pracovných dní.</p></div></div>
        <div className="it"><Icon name="flask" size={28} /><div><h4>Lab-testované v SR</h4><p>Každá šarža nezávisle overená. Certifikáty prikladáme pri produktoch.</p></div></div>
        <div className="it"><Icon name="rotate" size={28} /><div><h4>14 dní na vrátenie</h4><p>Nie si spokojný? Vráť tovar bez udania dôvodu — my preplatíme.</p></div></div>
        <div className="it"><Icon name="phone" size={28} /><div><h4>Pýtaj sa</h4><p>Zákaznícka linka Po–Pi 8:00–16:00 · <strong style={{ color: 'var(--ink)' }}>+421 948 252 444</strong></p></div></div>
      </div>
    </div>
  );
}

// ============ Footer mini ============
function FooterMini() {
  return (
    <footer className="foot-mini">
      <div className="certs">
        <img src="../assets/certifications/HACCP-certified-icon-new.svg" alt="HACCP" onError={e => e.target.style.display = 'none'} />
        <img src="../assets/certifications/GMP-certified-icon-new.svg" alt="GMP" onError={e => e.target.style.display = 'none'} />
        <img src="../assets/certifications/Independent-laboratory-tested-new.svg" alt="Independent lab" onError={e => e.target.style.display = 'none'} />
      </div>
      <div className="links">
        <a href="#">Obchodné podmienky</a>·
        <a href="#">Ochrana osobných údajov</a>·
        <a href="#">Reklamačný poriadok</a>·
        <a href="#">Kontakt</a>
      </div>
      <div style={{ marginTop: 12 }}>© 2013–2026 Green Medical s.r.o. · Spišská Nová Ves · IČ DPH SK2023456789</div>
    </footer>
  );
}

// ============ Empty cart ============
function EmptyCart() {
  return (
    <div className="empty">
      <div className="icon"><Icon name="cart" size={32} /></div>
      <h2>Tvoj košík je zatiaľ prázdny</h2>
      <p>Doplnky výživy, vitamíny a športová výživa — všetko od nás, s vlastnou výrobou a lab-testami.</p>
      <button className="cta">Prejsť do e-shopu <Icon name="arrowRight" size={18} /></button>
    </div>
  );
}

// ============ Tweaks panel ============
function TweaksPanel({ tweaks, setTweaks, onClose }) {
  const save = (partial) => {
    const next = { ...tweaks, ...partial };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*');
  };
  return (
    <div className="tweaks">
      <h4>Tweaks <button onClick={onClose} style={{ background: 'none', border: 0, cursor: 'pointer', color: 'var(--muted)', padding: 0 }}><Icon name="x" size={16} /></button></h4>
      <label>Stav košíka</label>
      <select value={tweaks.state} onChange={e => save({ state: e.target.value })}>
        <option value="full">4 položky (realistický)</option>
        <option value="single">1 položka</option>
        <option value="empty">Prázdny košík</option>
      </select>
      <div className="switch">
        <span>Progress bar k doprave</span>
        <input type="checkbox" checked={tweaks.showProgress} onChange={e => save({ showProgress: e.target.checked })} />
      </div>
      <div className="switch">
        <span>Upsell „Často kupované spolu"</span>
        <input type="checkbox" checked={tweaks.showUpsell} onChange={e => save({ showUpsell: e.target.checked })} />
      </div>
      <div className="switch">
        <span>Darček v košíku (&gt; 40 €)</span>
        <input type="checkbox" checked={tweaks.showGift} onChange={e => save({ showGift: e.target.checked })} />
      </div>
    </div>
  );
}

Object.assign(window, {
  AnnounceBar, Header, FreeShipProgress, Item, ShippingPicker,
  CrossSell, ReassureStrip, FooterMini, EmptyCart, TweaksPanel,
});
window.__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 },
];