const __AC = window.__AQUO_CONTENT__ || {};
const __PP = __AC.productsPage || {};
const PAGE_EYEBROW = __PP.eyebrow || 'Shop';
const PAGE_TITLE_HTML = __PP.titleHtml || 'The <span class="outline">AQUO</span><br/>catalog.';
const PAGE_SUB = __PP.sub || "Systems, cartridges, dispensers and spares — everything on the floor at our flagship. Build your enquiry, send it across and we'll confirm stock, delivery and final pricing by email.";

const FALLBACK_PRODUCTS = [
  { id: 'ro-pnp', cat: 'Systems', name: 'RO Plug & Play', price: 4899, tag: 'Popular', img: '/img/products/ro-plug-play.png',
    desc: 'Complete reverse-osmosis station. Pre-plumbed, self-contained — set it down, plug it in, pour.' },
];

const PRODUCTS = (Array.isArray(__AC.products) && __AC.products.length > 0)
  ? __AC.products.map(p => ({ ...p, price: Number(p.price) || 0 }))
  : FALLBACK_PRODUCTS;

const CATEGORIES = ['All', ...Array.from(new Set(PRODUCTS.map(p => p.cat).filter(Boolean)))];

function hasVariants(p) {
  return Array.isArray(p.variants) && p.variants.length > 0;
}

// Display rule:
//   variants present → use base + active delta (the picked variant wins)
//   no variants:
//     both from and to set & differ → "R{from} – R{to}"
//     both set & equal             → "R{from}"
//     only from                    → "From R{from}"
//     only to                      → "Up to R{to}"
//     neither, but base > 0        → "R{base}"
//     nothing at all               → null (hide the price line)
function priceDisplay(p, activeDelta) {
  const fmt = (n) => `R${Number(n).toLocaleString()}`;
  const base = Number(p.price) || 0;
  if (hasVariants(p)) {
    return fmt(base + (Number(activeDelta) || 0));
  }
  const from = Number(p.fromPrice) || 0;
  const to = Number(p.toPrice) || 0;
  if (from > 0 && to > 0) return from === to ? fmt(from) : `${fmt(from)} – ${fmt(to)}`;
  if (from > 0) return `From ${fmt(from)}`;
  if (to > 0) return `Up to ${fmt(to)}`;
  if (base > 0) return fmt(base);
  return null;
}

function VariantDial({ variants, value, onChange }) {
  const n = variants.length;
  const step = 360 / n;
  const angle = value * step * -1;
  const prev = () => onChange((value - 1 + n) % n);
  const next = () => onChange((value + 1) % n);
  const active = variants[value];
  const delta = Number(active.delta) || 0;
  return (
    <div className="dial-row">
      <button type="button" className="dial-btn" onClick={prev} aria-label="Previous variant">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
      </button>
      <div className="dial-stage">
        <svg className="dial-svg" viewBox="0 0 56 56" aria-hidden="true">
          <circle cx="28" cy="28" r="24" fill="rgba(13,22,40,0.7)" stroke="rgba(120,200,255,0.28)" strokeWidth="1"/>
          <path d="M28 1 L24 5 L32 5 Z" fill="#00E5FF" style={{ filter: 'drop-shadow(0 0 4px rgba(0,229,255,0.8))' }}/>
          <g className="dial-disc" transform={`rotate(${angle} 28 28)`}>
            <circle cx="28" cy="28" r="20" fill="rgba(4,7,14,0.7)" stroke="rgba(120,200,255,0.4)" strokeWidth="0.8"/>
            {Array.from({ length: n }).map((_, i) => {
              const a = (i * step - 90) * Math.PI / 180;
              const x1 = 28 + Math.cos(a) * 18;
              const y1 = 28 + Math.sin(a) * 18;
              const x2 = 28 + Math.cos(a) * 22;
              const y2 = 28 + Math.sin(a) * 22;
              const on = i === value;
              return (
                <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
                  stroke={on ? '#00E5FF' : 'rgba(120,200,255,0.5)'}
                  strokeWidth={on ? 2 : 1}
                  strokeLinecap="round"
                  style={on ? { filter: 'drop-shadow(0 0 3px rgba(0,229,255,0.9))' } : null}
                />
              );
            })}
            <circle cx="28" cy="28" r="3.5" fill="#00E5FF" style={{ filter: 'drop-shadow(0 0 4px rgba(0,229,255,0.8))' }}/>
            <circle cx="28" cy="28" r="7" fill="none" stroke="rgba(0,229,255,0.4)" strokeWidth="0.5" strokeDasharray="2 2"/>
          </g>
        </svg>
        <div className="dial-meta">
          <div className="dial-label">Variant</div>
          <div className="dial-name">{active.name}</div>
          <div className="dial-counter">{String(value + 1).padStart(2,'0')} / {String(n).padStart(2,'0')}{delta ? ` · ${delta > 0 ? '+' : ''}R${delta}` : ''}</div>
        </div>
      </div>
      <button type="button" className="dial-btn" onClick={next} aria-label="Next variant">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6"/></svg>
      </button>
    </div>
  );
}

function App() {
  const initialFilter = (() => {
    try {
      const cat = new URLSearchParams(window.location.search).get('cat');
      if (cat && CATEGORIES.some(c => c.toLowerCase() === cat.toLowerCase())) {
        return CATEGORIES.find(c => c.toLowerCase() === cat.toLowerCase());
      }
    } catch (e) {}
    return 'All';
  })();
  const [filter, setFilter] = React.useState(initialFilter);
  const [justAdded, setJustAdded] = React.useState(null);
  const [variantIdx, setVariantIdx] = React.useState({});
  const getVariant = (id) => variantIdx[id] || 0;
  const setVariant = (id, v) => setVariantIdx(s => ({ ...s, [id]: v }));

  const add = (p) => {
    let item = p;
    if (hasVariants(p)) {
      const vi = getVariant(p.id);
      const variant = p.variants[vi];
      const delta = Number(variant.delta) || 0;
      item = {
        ...p,
        id: `${p.id}-${vi}`,
        name: `${p.name} · ${variant.name}`,
        price: (Number(p.price) || 0) + delta,
      };
    }
    if (window.EnquiryUI) window.EnquiryUI.add(item);
    setJustAdded(p.id);
    setTimeout(() => setJustAdded(null), 800);
  };

  const filtered = filter === 'All' ? PRODUCTS : PRODUCTS.filter(p => p.cat === filter);
  const catCount = (c) => c === 'All' ? PRODUCTS.length : PRODUCTS.filter(p => p.cat === c).length;

  return (
    <React.Fragment>
      <section className="page-hero wrap">
        <div className="eyebrow">{PAGE_EYEBROW}</div>
        <h1 className="page-title" dangerouslySetInnerHTML={{ __html: PAGE_TITLE_HTML }} />
        <p className="page-sub">{PAGE_SUB}</p>
      </section>

      <section className="wrap">
        <div className="filter-bar">
          {CATEGORIES.map(c => (
            <button key={c}
              className={`filter-chip${filter === c ? ' active' : ''}`}
              onClick={() => setFilter(c)}>
              {c}<span className="count">{catCount(c)}</span>
            </button>
          ))}
        </div>

        <div className="grid">
          {filtered.map(p => {
            const variants = hasVariants(p) ? p.variants : null;
            const vi = getVariant(p.id);
            const delta = variants ? (Number(variants[vi].delta) || 0) : 0;
            const priceLabel = priceDisplay(p, delta);
            return (
              <article key={p.id} className="card">
                <div className="card-media" style={p.bgColor ? { background: p.bgColor } : null}>
                  {p.tag && <span className={`card-tag${p.tag === 'Popular' ? ' popular' : p.tag === 'New' ? ' new' : ''}`}>{p.tag}</span>}
                  <img src={p.img} alt={p.name} loading="lazy"/>
                </div>
                <div className="card-body">
                  <div className="card-cat">{p.cat}</div>
                  <div className="card-name">{p.name}</div>
                  <p className="card-desc">{p.shortDesc || ''}</p>
                  <div className="dial-slot">
                    {variants && (
                      <VariantDial
                        variants={variants}
                        value={vi}
                        onChange={(v) => setVariant(p.id, v)}
                      />
                    )}
                  </div>
                  <div className="card-foot">
                    {priceLabel
                      ? <span className="card-price">{priceLabel}<span className="unit"> ZAR</span></span>
                      : <span className="card-price card-price-empty" aria-hidden="true"/>}
                    <div className="card-actions">
                      {p.showDetailsPage && p.url && (
                        <a className="details-btn" href={p.url} aria-label={`View ${p.name} details`}>
                          Details
                          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                        </a>
                      )}
                      <button className={`add-btn${justAdded === p.id ? ' added' : ''}`} onClick={() => add(p)}>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></svg>
                        {justAdded === p.id ? 'Added' : 'Add'}
                      </button>
                    </div>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <EnquiryDrawer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);