const ALL_ITEMS = window.TPS_CATEGORIES.flatMap((c) => c.items.map((it) => ({ ...it, catId: c.id, catTitle: c.title })));

function Calculator({ accent }) {
  const cart = useCart();
  const [catId, setCatId] = React.useState('sort');
  const cat = window.TPS_CATEGORIES.find((c) => c.id === catId);
  const [itemName, setItemName] = React.useState(cat.items[0].name);
  const item = cat.items.find((x) => x.name === itemName) || cat.items[0];

  const [qty, setQty] = React.useState(1000);
  const [services, setServices] = React.useState({ cut: false, bend: false, zinc: false });

  React.useEffect(() => {
    setItemName(cat.items[0].name);
  }, [catId]);

  const fmt = (n) => new Intl.NumberFormat('ru-RU').format(Math.round(n));
  const base = (item.price || 0) * qty;
  const svc = (services.cut ? qty * 8 : 0) + (services.bend ? qty * 12 : 0) + (services.zinc ? qty * 60 : 0);
  const total = base + svc;

  const orderMsg = () => {
    let m = `Здравствуйте! Расчёт стоимости:%0A%0A`;
    m += `Категория: ${cat.title}%0A`;
    m += `Позиция: ${item.name}%0A`;
    m += `Спецификация: ${item.spec}%0A`;
    m += `Размеры: ${item.sizes}%0A`;
    m += `Объём: ${qty} ${item.unit}%0A`;
    if (services.cut) m += `+ Резка%0A`;
    if (services.bend) m += `+ Гибка%0A`;
    if (services.zinc) m += `+ Цинкование%0A`;
    m += `%0AИтого: ${fmt(total)} ₸ (предварительно)`;
    return `https://wa.me/${window.TPS_WA}?text=${m}`;
  };

  const addToCart = () => {
    cart.add(item, qty);
    cart.setOpen(true);
  };

  return (
    <section id="calculator" className="section section-beige">
      <div className="container">
        <div className="section-eyebrow">
          <span className="eyebrow-num">04</span>
          <span>Калькулятор стоимости</span>
        </div>
        <h2 className="section-title">
          Узнайте цену<br/>
          <span style={{ color: accent }}>прямо сейчас.</span>
        </h2>
        <p className="section-sub">
          Выберите позицию и объём — посчитаем предварительно. Финальная цена согласовывается менеджером.
        </p>

        <div className="calc">
          <div className="calc-fields">
            <div className="calc-field">
              <label>Категория</label>
              <div className="calc-chips">
                {window.TPS_CATEGORIES.map((c) => (
                  <button key={c.id}
                    className={`chip ${c.id === catId ? 'chip-on' : ''}`}
                    style={c.id === catId ? { background: accent, borderColor: accent, color: '#fff' } : {}}
                    onClick={() => setCatId(c.id)}>
                    {c.title}
                  </button>
                ))}
              </div>
            </div>

            <div className="calc-field">
              <label>Позиция</label>
              <select value={itemName} onChange={(e) => setItemName(e.target.value)} className="calc-select">
                {cat.items.map((it) => (
                  <option key={it.name} value={it.name}>
                    {it.name} — {it.price ? `${fmt(it.price)} ₸/${it.unit}` : 'цена по запросу'}
                  </option>
                ))}
              </select>
              <div className="calc-spec">
                <span>{item.spec}</span> · <span>{item.sizes}</span>
              </div>
            </div>

            <div className="calc-field">
              <label>Объём ({item.unit})</label>
              <div className="calc-qty">
                <button onClick={() => setQty(Math.max(1, qty - 100))}>−100</button>
                <input type="number" value={qty} min={1} onChange={(e) => setQty(Math.max(1, parseInt(e.target.value) || 1))} />
                <button onClick={() => setQty(qty + 100)}>+100</button>
              </div>
              <input type="range" min="1" max="20000" step="1" value={Math.min(qty, 20000)} onChange={(e) => setQty(parseInt(e.target.value))} className="calc-range" style={{ accentColor: accent }} />
            </div>

            <div className="calc-field">
              <label>Дополнительные услуги</label>
              <div className="calc-services">
                {[
                  ['cut', 'Резка', '+8 ₸/' + item.unit],
                  ['bend', 'Гибка', '+12 ₸/' + item.unit],
                  ['zinc', 'Цинкование', '+60 ₸/' + item.unit],
                ].map(([k, lbl, sub]) => (
                  <label key={k} className="calc-svc">
                    <input type="checkbox" checked={services[k]} onChange={(e) => setServices({ ...services, [k]: e.target.checked })} />
                    <span className="calc-svc-box" style={services[k] ? { background: accent, borderColor: accent } : {}} />
                    <span><b>{lbl}</b> <span style={{ color: '#888' }}>{sub}</span></span>
                  </label>
                ))}
              </div>
            </div>
          </div>

          <div className="calc-result">
            <div className="cr-eyebrow">Предварительная стоимость</div>
            {item.price ? (
              <>
                <div className="cr-total" style={{ color: accent }}>
                  {fmt(total)} <span>₸</span>
                </div>
                <div className="cr-breakdown">
                  <div className="cr-row">
                    <span>{item.name} × {qty} {item.unit}</span>
                    <span>{fmt(base)} ₸</span>
                  </div>
                  {svc > 0 && (
                    <div className="cr-row">
                      <span>Услуги обработки</span>
                      <span>{fmt(svc)} ₸</span>
                    </div>
                  )}
                </div>
              </>
            ) : (
              <>
                <div className="cr-total" style={{ color: accent, fontSize: 28 }}>
                  Цена по&nbsp;запросу
                </div>
                <div className="cr-breakdown">
                  <div className="cr-row">
                    <span>{item.name} × {qty} {item.unit}</span>
                    <span>—</span>
                  </div>
                </div>
              </>
            )}
            <div className="cr-actions">
              <button onClick={addToCart} className="btn btn-primary" style={{ background: accent }}>
                В корзину
              </button>
              <a href={orderMsg()} target="_blank" rel="noopener" className="btn btn-wa-outline" style={{ borderColor: accent, color: accent }}>
                <WaIcon /> WhatsApp
              </a>
            </div>
            <div className="cr-note">
              Цены ориентировочные, актуальны на дату обращения. Не оферта.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Calculator = Calculator;