/* Enfito — Listing, PDP, Cart Pages */

/* ============ LISTING ============ */
const Listing = ({ route, onNav, onAdd, onFav, favs }) => {
  const cat = window.ENFITO_CATEGORIES.find(c => c.id === route.cat);
  const isSale = route.cat === 'distsount';
  const isAll = !route.cat;
  const title = isAll ? 'ყველა პროდუქტი' : (isSale ? 'ფასდაკლება' : cat?.label);
  const heroImg = {
    therabody: 'https://images.unsplash.com/photo-1605296867424-35fc25c9212a?w=1600&auto=format&fit=crop&q=80',
    fitnes:    'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=1600&auto=format&fit=crop&q=80',
    ioga:      'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=1600&auto=format&fit=crop&q=80',
    trx:       'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1600&auto=format&fit=crop&q=80',
    aksesuari: 'https://images.unsplash.com/photo-1521093470119-a3acdc43374a?w=1600&auto=format&fit=crop&q=80',
    distsount: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1600&auto=format&fit=crop&q=80',
  }[route.cat] || 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1600&auto=format&fit=crop&q=80';

  const all = window.ENFITO_PRODUCTS;
  const baseFiltered = isAll ? all : (isSale ? all.filter(p => p.old) : all.filter(p => p.cat === route.cat));

  const [activeBrands, setActiveBrands] = React.useState(new Set());
  const [priceMax, setPriceMax] = React.useState(13000);
  const [onlyDiscount, setOnlyDiscount] = React.useState(isSale);
  const [activeSubs, setActiveSubs] = React.useState(new Set());
  const [sort, setSort] = React.useState('popular');

  React.useEffect(() => {
    setOnlyDiscount(isSale);
    setActiveBrands(new Set());
    setActiveSubs(new Set());
  }, [route.cat]);

  const brands = Array.from(new Set(baseFiltered.map(p => p.brand)));

  let filtered = baseFiltered.filter(p =>
    (activeBrands.size === 0 || activeBrands.has(p.brand)) &&
    (p.price <= priceMax) &&
    (!onlyDiscount || p.old) &&
    (activeSubs.size === 0 || activeSubs.has(p.sub))
  );

  if (sort === 'price-asc') filtered = [...filtered].sort((a, b) => a.price - b.price);
  else if (sort === 'price-desc') filtered = [...filtered].sort((a, b) => b.price - a.price);
  else if (sort === 'new') filtered = [...filtered].sort((a, b) => (b.tag === 'ახალი') - (a.tag === 'ახალი'));

  const toggle = (set, setter, v) => {
    const ns = new Set(set);
    ns.has(v) ? ns.delete(v) : ns.add(v);
    setter(ns);
  };

  return (
    <div className="fade-up">
      <section className="listing-hero">
        <img className="lh-img" src={heroImg} alt="" />
        <div className="container">
          <div className="crumbs">
            <a onClick={() => onNav({ page: 'home' })}>მთავარი</a>
            <span className="sep">/</span>
            <span>{title}</span>
          </div>
          <h1>{title}</h1>
          <p>{baseFiltered.length} პროდუქტი · უფასო მიწოდება ₾200+ შეკვეთაზე · ოფიციალური გარანტია</p>
        </div>
      </section>

      <section className="section sm">
        <div className="container">
          <div className="listing-grid">
            <aside className="filters">
              {cat?.sub?.length > 0 && (
                <div className="filter-group">
                  <h5>ქვეკატეგორია</h5>
                  <div className="filter-pill-row">
                    {cat.sub.map(s => (
                      <button key={s.id}
                        className={"filter-pill" + (activeSubs.has(s.id) ? ' active' : '')}
                        onClick={() => toggle(activeSubs, setActiveSubs, s.id)}>
                        {s.label}
                      </button>
                    ))}
                  </div>
                </div>
              )}

              <div className="filter-group">
                <h5>ბრენდი</h5>
                <ul>
                  {brands.map(b => {
                    const count = baseFiltered.filter(p => p.brand === b).length;
                    return (
                      <li key={b}>
                        <label>
                          <input type="checkbox" checked={activeBrands.has(b)} onChange={() => toggle(activeBrands, setActiveBrands, b)} />
                          <span>{b}</span>
                          <span className="count">{count}</span>
                        </label>
                      </li>
                    );
                  })}
                </ul>
              </div>

              <div className="filter-group">
                <h5>ფასი</h5>
                <input type="range" min="0" max="13000" step="100" value={priceMax} onChange={e => setPriceMax(+e.target.value)}
                  style={{ width: '100%', accentColor: 'var(--accent)' }} />
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: 'var(--text-muted)', marginTop: 6 }}>
                  <span>₾0</span>
                  <span><strong style={{ color: 'var(--text)' }}>₾{priceMax.toLocaleString()}</strong></span>
                </div>
              </div>

              <div className="filter-group">
                <h5>აქცია</h5>
                <ul>
                  <li>
                    <label>
                      <input type="checkbox" checked={onlyDiscount} onChange={e => setOnlyDiscount(e.target.checked)} />
                      <span>მხოლოდ ფასდაკლება</span>
                    </label>
                  </li>
                </ul>
              </div>

              <button className="btn btn-outline btn-sm" style={{ marginTop: 12 }}
                onClick={() => { setActiveBrands(new Set()); setActiveSubs(new Set()); setPriceMax(13000); setOnlyDiscount(false); }}>
                გაასუფთავე ფილტრები
              </button>
            </aside>

            <div>
              <div className="listing-toolbar">
                <div className="results-count">
                  ნაპოვნია <strong>{filtered.length}</strong> პროდუქტი
                </div>
                <div className="sort-select">
                  <span style={{ fontSize: 13.5, color: 'var(--text-muted)' }}>დალაგება:</span>
                  <select value={sort} onChange={e => setSort(e.target.value)}>
                    <option value="popular">პოპულარული</option>
                    <option value="new">ახალი ჯერ</option>
                    <option value="price-asc">ფასი: დაბალი → მაღალი</option>
                    <option value="price-desc">ფასი: მაღალი → დაბალი</option>
                  </select>
                </div>
              </div>

              {filtered.length === 0 ? (
                <div style={{ padding: '64px 0', textAlign: 'center', color: 'var(--text-muted)' }}>
                  ფილტრით ვერ მოიძებნა პროდუქტი. გაასუფთავე ფილტრები ან სცადე სხვა კატეგორია.
                </div>
              ) : (
                <div className="product-grid">
                  {filtered.map(p => (
                    <ProductCard key={p.id} p={p} onNav={onNav} onAdd={onAdd} onFav={onFav} faved={favs.has(p.id)} />
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

/* ============ PDP ============ */
const PDP = ({ route, onNav, onAdd, onFav, favs }) => {
  const p = window.ENFITO_PRODUCT_BY_ID[route.id];
  const [tab, setTab] = React.useState('desc');
  const [qty, setQty] = React.useState(1);
  const [color, setColor] = React.useState(0);
  const [thumb, setThumb] = React.useState(0);
  const cat = window.ENFITO_CATEGORIES.find(c => c.id === p?.cat);

  if (!p) return <div className="container" style={{ padding: 60 }}>პროდუქტი ვერ მოიძებნა</div>;

  const related = window.ENFITO_PRODUCTS.filter(x => x.cat === p.cat && x.id !== p.id).slice(0, 4);
  const swatches = ['#0a0a0a', '#c0392b', '#3a4a5c', '#e8e1d4'];
  const thumbs = [p.name, 'ფრონტი', 'პროფილი', 'დეტალები'];

  return (
    <div className="fade-up">
      <div className="container">
        <div className="crumbs" style={{ marginTop: 24 }}>
          <a onClick={() => onNav({ page: 'home' })}>მთავარი</a>
          <span className="sep">/</span>
          <a onClick={() => onNav({ page: 'listing', cat: p.cat })}>{cat?.label}</a>
          <span className="sep">/</span>
          <span>{p.name}</span>
        </div>

        <div className="pdp-grid">
          <div className="pdp-gallery">
            <div className="pdp-thumbs">
              {thumbs.map((t, i) => (
                <div key={i} className={"pdp-thumb" + (thumb === i ? ' active' : '')}
                  style={{ background: p.bg, color: p.fg }}
                  onClick={() => setThumb(i)}>
                  {p.img ? <img src={p.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : (i + 1)}
                </div>
              ))}
            </div>
            <div className="pdp-main-img" style={{ background: p.bg, color: p.fg }}>
              {p.img && <img src={p.img} alt={p.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'inherit' }} />}
              {!p.img && (
                <div style={{ position: 'relative', zIndex: 1 }}>
                  <span className="ghost">{p.name}</span>
                  <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, opacity: 0.5, marginTop: 24, letterSpacing: '0.06em' }}>
                    [ {p.brand} • {thumbs[thumb]} ]
                  </div>
                </div>
              )}
              {p.tag && <span className="pcard-tag" style={{ top: 24, left: 24, zIndex: 2 }}>{p.tag}</span>}
            </div>
          </div>

          <div className="pdp-info">
            <div className="pdp-brand-row">
              <div className="pdp-brand">{p.brand}</div>
              <div className="pdp-stock"><span className="dot" />მარაგშია</div>
            </div>
            <h1 className="pdp-title">{p.name}</h1>
            <div className="pdp-rating">
              <span className="stars">
                {[1,2,3,4,5].map(s => <Icon.Star key={s} style={{ display: 'inline', marginRight: 1 }} />)}
              </span>
              <span>4.8</span>
              <span style={{ opacity: 0.5 }}>·</span>
              <a style={{ textDecoration: 'underline', textUnderlineOffset: 3 }}>247 შეფასება</a>
            </div>
            <p className="pdp-desc">{p.shortDesc}. პროფესიონალური დონის მოწყობილობა, რომელიც ხელმისაწვდომია ნებისმიერი დონის სპორტსმენისთვის. სრული ოფიციალური გარანტია 2 წელი.</p>

            <div className="pdp-price-row">
              <span className="pdp-price">{window.ENFITO_FMT_PRICE(p.price)}</span>
              {p.old && <span className="pdp-price-old">{window.ENFITO_FMT_PRICE(p.old)}</span>}
              {p.old && <span className="pdp-save">-{Math.round((1 - p.price/p.old) * 100)}%</span>}
            </div>

            <div className="pdp-section">
              <div className="pdp-section-label">ფერი — {['შავი', 'წითელი', 'ნაცრისფერი', 'ქვიშისფერი'][color]}</div>
              <div className="swatches">
                {swatches.map((s, i) => (
                  <div key={i} className={"swatch" + (color === i ? ' active' : '')} style={{ background: s }} onClick={() => setColor(i)} />
                ))}
              </div>
            </div>

            <div className="pdp-actions">
              <div className="qty">
                <button onClick={() => setQty(Math.max(1, qty - 1))}><Icon.Minus /></button>
                <span>{qty}</span>
                <button onClick={() => setQty(qty + 1)}><Icon.Plus /></button>
              </div>
              <button className="btn btn-primary btn-lg" style={{ flex: 1 }} onClick={() => { for (let i = 0; i < qty; i++) onAdd(p.id); }}>
                <Icon.Bag /> კალათაში დამატება — {window.ENFITO_FMT_PRICE(p.price * qty)}
              </button>
              <button className={"pdp-fav-btn" + (favs.has(p.id) ? ' active' : '')} onClick={() => onFav(p.id)}>
                <Icon.Heart filled={favs.has(p.id)} />
              </button>
            </div>

            <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginTop: 16, display: 'flex', gap: 14, alignItems: 'center' }}>
              <Icon.Truck style={{ flexShrink: 0 }} />
              <span>მიწოდება 1-3 დღეში · უფასო ₾200+ შეკვეთაზე</span>
            </div>

            <div className="pdp-features">
              <div className="pdp-feature">
                <span className="icon"><Icon.Shield /></span>
                <span className="lbl">2 წლის გარანტია</span>
                <span className="desc">ოფიციალური წარმომადგენელი</span>
              </div>
              <div className="pdp-feature">
                <span className="icon"><Icon.Return /></span>
                <span className="lbl">30 დღე დაბრუნება</span>
                <span className="desc">უპირობოდ</span>
              </div>
              <div className="pdp-feature">
                <span className="icon"><Icon.Card /></span>
                <span className="lbl">განვადება 0%</span>
                <span className="desc">24 თვემდე</span>
              </div>
            </div>
          </div>
        </div>

        <div className="pdp-tabs">
          <div className="pdp-tab-row">
            <button className={"pdp-tab" + (tab === 'desc' ? ' active' : '')} onClick={() => setTab('desc')}>აღწერა</button>
            <button className={"pdp-tab" + (tab === 'spec' ? ' active' : '')} onClick={() => setTab('spec')}>მახასიათებლები</button>
            <button className={"pdp-tab" + (tab === 'rev' ? ' active' : '')} onClick={() => setTab('rev')}>შეფასებები (247)</button>
            <button className={"pdp-tab" + (tab === 'ship' ? ' active' : '')} onClick={() => setTab('ship')}>მიწოდება</button>
          </div>
          <div className="pdp-tab-content">
            {tab === 'desc' && (
              <div>
                <h3>{p.name}</h3>
                <p>{p.shortDesc}. ეს არის პროფესიონალური დონის მოწყობილობა, რომელიც ხელმისაწვდომია ნებისმიერი დონის სპორტსმენისთვის — დამწყებიდან ელიტურ მოთამაშემდე.</p>
                <p>დიზაინირებულია ერგონომიულად, რათა უზრუნველყოს მაქსიმალური კომფორტი ხანგრძლივი ვარჯიშის დროს. დამზადებულია მაღალი ხარისხის მასალებისგან, რომლებიც გამოცდილია მსოფლიო კლასის ფიტნეს ცენტრებში.</p>
                <ul style={{ paddingLeft: 18, marginTop: 16 }}>
                  <li>პროფესიონალური ხარისხის შენახვა და სიგრძე</li>
                  <li>ერგონომიული დიზაინი</li>
                  <li>2 წლის ოფიციალური გარანტია</li>
                  <li>დახმარების სერვისი ქართულ ენაზე</li>
                </ul>
              </div>
            )}
            {tab === 'spec' && (
              <table className="spec-table">
                <tbody>
                  <tr><td>ბრენდი</td><td>{p.brand}</td></tr>
                  <tr><td>კატეგორია</td><td>{cat?.label}</td></tr>
                  <tr><td>გარანტია</td><td>2 წელი</td></tr>
                  <tr><td>წონა</td><td>2.5 კგ</td></tr>
                  <tr><td>მასალა</td><td>პრემიუმ კლასი</td></tr>
                  <tr><td>წარმოშობის ქვეყანა</td><td>აშშ</td></tr>
                </tbody>
              </table>
            )}
            {tab === 'rev' && (
              <div>
                <h3>4.8 / 5 — 247 შეფასება</h3>
                <p>მომხმარებლების შეფასებები ჩამოიტვირთება. ფუნქცია მზადდება.</p>
              </div>
            )}
            {tab === 'ship' && (
              <div>
                <h3>მიწოდება</h3>
                <p>თბილისში — 1-2 დღე. რეგიონებში — 2-4 დღე. უფასო მიწოდება ₾200+ შეკვეთებზე. შეკვეთა შესაძლებელია მაღაზიიდან გატანაც.</p>
              </div>
            )}
          </div>
        </div>

        {related.length > 0 && (
          <section className="section">
            <div className="section-head">
              <div>
                <div className="section-eyebrow">აღმოაჩინე მეტი</div>
                <h2 className="section-title">მსგავსი <em>პროდუქტები</em></h2>
              </div>
            </div>
            <div className="product-grid">
              {related.map(rp => (
                <ProductCard key={rp.id} p={rp} onNav={onNav} onAdd={onAdd} onFav={onFav} faved={favs.has(rp.id)} />
              ))}
            </div>
          </section>
        )}
      </div>
    </div>
  );
};

/* ============ CART ============ */
const Cart = ({ cart, onNav, onAdd, onRemove, onSetQty, onFav, favs }) => {
  const lines = Object.entries(cart).map(([id, qty]) => ({
    p: window.ENFITO_PRODUCT_BY_ID[id], qty
  })).filter(l => l.p);
  const subtotal = lines.reduce((s, l) => s + l.p.price * l.qty, 0);
  const shipping = subtotal >= 200 ? 0 : 15;
  const total = subtotal + shipping;
  const savings = lines.reduce((s, l) => s + (l.p.old ? (l.p.old - l.p.price) * l.qty : 0), 0);
  const recommended = window.ENFITO_PRODUCTS.slice(0, 4);

  if (lines.length === 0) {
    return (
      <div className="container fade-up">
        <div className="crumbs" style={{ marginTop: 24 }}>
          <a onClick={() => onNav({ page: 'home' })}>მთავარი</a>
          <span className="sep">/</span>
          <span>კალათა</span>
        </div>
        <div className="cart-empty-state">
          <Icon.Bag style={{ width: 56, height: 56, opacity: 0.3 }} />
          <h2>კალათა ცარიელია</h2>
          <p>დაამატე პროდუქცია და ისიამოვნე უფასო მიწოდებით ₾200+ შეკვეთებზე</p>
          <button className="btn btn-primary btn-lg" onClick={() => onNav({ page: 'home' })}>
            გააგრძელე შოპინგი <Icon.ArrowRight />
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="container fade-up">
      <div className="crumbs" style={{ marginTop: 24 }}>
        <a onClick={() => onNav({ page: 'home' })}>მთავარი</a>
        <span className="sep">/</span>
        <span>კალათა</span>
      </div>

      <div className="cart-grid">
        <div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 44, margin: '24px 0 32px', fontWeight: 600, letterSpacing: '-0.02em' }}>
            შენი კალათა <span style={{ color: 'var(--text-muted)', fontWeight: 400 }}>({lines.length})</span>
          </h1>

          {lines.map(({ p, qty }) => (
            <div key={p.id} className="cart-line">
              <div className="cart-line-img" style={{ background: p.bg, color: p.fg, position: 'relative', overflow: 'hidden' }} onClick={() => onNav({ page: 'pdp', id: p.id })}>
                {p.img ? <img src={p.img} alt={p.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} /> : p.name}
              </div>
              <div className="cart-line-info">
                <div className="cart-line-brand">{p.brand}</div>
                <div className="cart-line-name" onClick={() => onNav({ page: 'pdp', id: p.id })} style={{ cursor: 'pointer' }}>{p.name}</div>
                <div className="cart-line-meta">ფერი: შავი · მარაგშია</div>
                <div className="cart-line-controls">
                  <div className="cart-qty">
                    <button onClick={() => onSetQty(p.id, Math.max(1, qty - 1))}><Icon.Minus /></button>
                    <span>{qty}</span>
                    <button onClick={() => onSetQty(p.id, qty + 1)}><Icon.Plus /></button>
                  </div>
                  <button className="cart-line-remove" onClick={() => onRemove(p.id)}>წაშლა</button>
                  <button className="cart-line-remove" onClick={() => onFav(p.id)}>{favs.has(p.id) ? 'ფავორიტებში' : 'ფავორიტებში გადატანა'}</button>
                </div>
              </div>
              <div className="cart-line-price">
                <div className="p">{window.ENFITO_FMT_PRICE(p.price * qty)}</div>
                {p.old && <div className="old">{window.ENFITO_FMT_PRICE(p.old * qty)}</div>}
              </div>
            </div>
          ))}

          <section style={{ marginTop: 64 }}>
            <div className="section-head" style={{ marginBottom: 24 }}>
              <div>
                <div className="section-eyebrow">გირჩევთ</div>
                <h2 className="section-title" style={{ fontSize: 32 }}>დააკომპლექტე<em>.</em></h2>
              </div>
            </div>
            <div className="product-grid cols-3" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
              {recommended.slice(0, 3).map(p => (
                <ProductCard key={p.id} p={p} onNav={onNav} onAdd={onAdd} onFav={onFav} faved={favs.has(p.id)} />
              ))}
            </div>
          </section>
        </div>

        <aside className="cart-summary">
          <h3>შეკვეთის შეჯამება</h3>
          <div className="cart-row">
            <span className="l">ჯამი ({lines.length} პროდუქტი)</span>
            <span className="r">{window.ENFITO_FMT_PRICE(subtotal)}</span>
          </div>
          {savings > 0 && (
            <div className="cart-row" style={{ color: 'var(--accent)' }}>
              <span className="l">ფასდაკლება</span>
              <span className="r">−{window.ENFITO_FMT_PRICE(savings)}</span>
            </div>
          )}
          <div className="cart-row">
            <span className="l">მიწოდება</span>
            <span className="r">{shipping === 0 ? 'უფასო' : window.ENFITO_FMT_PRICE(shipping)}</span>
          </div>

          <div className="promo">
            <input placeholder="პრომო კოდი" />
            <button>გამოყენება</button>
          </div>

          <div className="cart-row total">
            <span className="l">ჯამი</span>
            <span className="r">{window.ENFITO_FMT_PRICE(total)}</span>
          </div>

          <button className="btn btn-primary btn-lg" style={{ width: '100%', marginTop: 16 }}>
            გადახდაზე გადასვლა <Icon.ArrowRight />
          </button>

          <div style={{ textAlign: 'center', fontSize: 12, color: 'var(--text-muted)', marginTop: 12 }}>
            ან გადაიხადე განვადებით — 24 თვემდე 0%
          </div>

          <div className="cart-perks">
            <div className="cart-perk"><span className="icon"><Icon.Truck /></span> სწრაფი მიწოდება</div>
            <div className="cart-perk"><span className="icon"><Icon.Shield /></span> 2წ. გარანტია</div>
            <div className="cart-perk"><span className="icon"><Icon.Return /></span> 30დღ. დაბრუნება</div>
          </div>
        </aside>
      </div>
    </div>
  );
};

Object.assign(window, { Listing, PDP, Cart });