/* global React, ProductCard */
const { useState: useStateRail, useEffect: useEffectRail } = React;

const CAT_MAP = {
  hygiene: 'Hygiene',
  spielzeug: 'Spielzeug',
  basteln: 'Bastelartikel',
  heim: 'Heim-Garten',
  geraete: 'Geraete',
  textilien: 'Textilien',
  lebensmittel: 'Lebensmittel',
  sonstiges: 'Sonstiges',
};
const BADGE_LABELS = { neu: 'Neu', deal: 'Top Deal', hot: 'Hot', limit: 'Begrenzt', sale: 'Sale' };

const CAT_IMG = {
  Hygiene: 'cat-Hygiene.png',
  Spielzeug: 'cat-Spielzeug.png',
  Bastelartikel: 'cat-Bastelartikel.png',
  'Heim-Garten': 'cat-Heim-Garten.png',
  Geraete: 'cat-Geraete.png',
  Textilien: 'cat-Textilien.png',
  Lebensmittel: 'cat-Lebensmittel.png',
  Sonstiges: 'cat-Sonstiges.png',
};

function mapApiProducts(arr) {
  if (!Array.isArray(arr)) return [];
  return arr.map(p => {
    const cat = CAT_MAP[p.categoryId] || 'Sonstiges';
    const hasImg = p.image && String(p.image).trim().length > 0;
    return {
      name: p.name || 'Posten',
      desc: p.description || '',
      price: Number(p.price) || 0,
      uvp: Number(p.oldPrice) || 0,
      badges: p.badge ? [{ kind: p.badge, label: BADGE_LABELS[p.badge] || p.badge }] : [],
      img: hasImg ? p.image : (CAT_IMG[cat] || 'cat-Sonstiges.png'),
      cat,
    };
  });
}

function loadCachedProducts() {
  try {
    const raw = localStorage.getItem('dp_products');
    if (!raw) return null;
    const arr = JSON.parse(raw);
    if (!Array.isArray(arr) || arr.length === 0) return null;
    return mapApiProducts(arr);
  } catch { return null; }
}

const SAMPLE_PRODUCTS = [
  { name: 'Markenshampoo 400ml', desc: 'Hochwertige Pflege, Drogerie-Qualität, salonfein.', price: 4.99, uvp: 14.99, badges: [{ kind: 'neu', label: 'Neu' }, { kind: 'deal', label: 'Top Deal' }], img: 'cat-Hygiene.png', cat: 'Hygiene' },
  { name: 'Holzspielzeug Set', desc: 'Pädagogisch wertvoll, FSC-zertifiziert, EU-Norm.', price: 12.50, uvp: 39.90, badges: [{ kind: 'hot', label: 'Hot' }], img: 'cat-Spielzeug.png', cat: 'Spielzeug' },
  { name: 'Bastelpaket XXL', desc: 'Über 200 Teile, ideal für Kindergärten und Hort.', price: 8.90, uvp: 24.90, badges: [{ kind: 'sale', label: '−65%' }], img: 'cat-Bastelartikel.png', cat: 'Bastelartikel' },
  { name: 'Garten-Solarleuchten', desc: '6er-Pack, IP65, warmweiß, automatisch.', price: 14.99, uvp: 49.99, badges: [{ kind: 'limit', label: 'Begrenzt' }], img: 'cat-Heim-Garten.png', cat: 'Heim-Garten' },
  { name: 'Kaffeemaschine 1.2L', desc: 'Markengerät, A-Ware, OVP, 2 Jahre Garantie.', price: 29.90, uvp: 89.90, badges: [{ kind: 'deal', label: 'Top Deal' }], img: 'cat-Geraete.png', cat: 'Geraete' },
  { name: 'Frottee-Handtücher 6er', desc: '500g/m², 50×100cm, Premium-Baumwolle.', price: 19.99, uvp: 59.99, badges: [{ kind: 'neu', label: 'Neu' }], img: 'cat-Textilien.png', cat: 'Textilien' },
  { name: 'Bio-Pasta Mischpaket', desc: '12 Sorten, MHD 2026, italienische Manufaktur.', price: 11.90, uvp: 32.50, badges: [{ kind: 'hot', label: 'Hot' }], img: 'cat-Lebensmittel.png', cat: 'Lebensmittel' },
  { name: 'Werkzeugkoffer 145-tlg', desc: 'Profi-Set, Chrom-Vanadium, Systainer-Box.', price: 39.90, uvp: 119.00, badges: [{ kind: 'sale', label: '−66%' }], img: 'cat-Sonstiges.png', cat: 'Sonstiges' },
];

function ProductRail() {
  const [filter, setFilter] = useStateRail('Alle');
  const [products, setProducts] = useStateRail(() => loadCachedProducts() || SAMPLE_PRODUCTS);
  useEffectRail(() => {
    let cancelled = false;
    fetch('api.php?action=get_products', { cache: 'no-store' })
      .then(r => r.ok ? r.json() : null)
      .then(d => {
        if (cancelled || !d || !d.success) return;
        try { localStorage.setItem('dp_products', JSON.stringify(d.products || [])); } catch {}
        const mapped = mapApiProducts(d.products || []);
        if (mapped.length > 0) setProducts(mapped);
      })
      .catch(() => {});
    const onStorage = (e) => {
      if (!e || e.key === 'dp_products' || e.key === null) {
        setProducts(loadCachedProducts() || SAMPLE_PRODUCTS);
      }
    };
    window.addEventListener('storage', onStorage);
    const onFilter = (ev) => {
      const id = ev && ev.detail;
      if (!id) return;
      setFilter(id);
      const el = document.getElementById('angebote');
      if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: 'smooth' });
    };
    window.addEventListener('dp:filter', onFilter);
    return () => {
      cancelled = true;
      window.removeEventListener('storage', onStorage);
      window.removeEventListener('dp:filter', onFilter);
    };
  }, []);
  const filters = ['Alle', 'Hygiene', 'Spielzeug', 'Bastelartikel', 'Heim-Garten', 'Geraete', 'Textilien', 'Lebensmittel', 'Sonstiges'];
  const filtered = filter === 'Alle' ? products : products.filter(p => p.cat === filter);

  return (
    <section className="dp-section dp-section--cool" id="angebote">
      <div className="dp-container">
        <div className="dp-section-head dp-section-head--row">
          <div>
            <span className="dp-eyebrow">Frisch eingetroffen</span>
            <h2 className="dp-h2" style={{ marginTop: 12 }}>Aktuelle Posten.</h2>
            <p className="dp-lead" style={{ marginTop: 8 }}>Verfügbar solange Vorrat reicht. Mengenstaffelung auf Anfrage.</p>
          </div>
          <button className="dp-btn dp-btn--outline">Alle Angebote</button>
        </div>
        <div className="dp-chips">
          {filters.map(f => (
            <button key={f}
              className={`dp-chip ${filter === f ? 'active' : ''}`}
              onClick={() => setFilter(f)}>
              {f === 'Heim-Garten' ? 'Heim & Garten' : f === 'Geraete' ? 'Geräte' : f}
            </button>
          ))}
        </div>
        <div className="dp-rail">
          {filtered.map((p, i) => <ProductCard key={i} {...p} />)}
          {filtered.length === 0 && (
            <div style={{ padding: 48, textAlign: 'center', color: 'var(--dp-text-muted)' }}>
              <img src="assets/KinderFuchs.png" style={{ height: 120, margin: '0 auto 16px', display: 'block' }} />
              Keine Posten in dieser Kategorie. Schau später nochmal vorbei.
            </div>
          )}
        </div>
      </div>
    </section>
  );
}
window.ProductRail = ProductRail;