// Interactive price calculator
const { useState, useMemo } = React;

function Calculator() {
  const [partId, setPartId] = useState('val');
  const [matId, setMatId] = useState('st45');
  const [method, setMethod] = useState('stamp');
  const [qty, setQty] = useState(10);
  const [dims, setDims] = useState({ L: 2000, D: 180, d: 140, B: 100, H: 60 });

  const part = PART_TYPES.find((p) => p.id === partId);
  const mat = MATERIALS.find((m) => m.id === matId);

  // when part changes, reset dims to its placeholders
  React.useEffect(() => {
    setDims((d) => ({ ...d, ...part.placeholders }));
  }, [partId]); // eslint-disable-line

  const calc = useMemo(() => {
    // volume in mm³ → cm³
    const vol_mm3 = part.volume(dims);
    const vol_cm3 = vol_mm3 / 1000;
    // mass in kg
    const mass_kg = (vol_cm3 * STEEL_DENSITY) / 1000;
    // price per unit
    const unit_price = mass_kg * BASE_PRICE_PER_KG * mat.mult * METHOD_MULT[method] * QTY_DISCOUNT(qty);
    // total
    const total = unit_price * qty;
    // band
    const low = total * (1 - ESTIMATE_BAND);
    const high = total * (1 + ESTIMATE_BAND);

    // sanity
    const valid = mass_kg > 0 && mass_kg <= 1250 && qty >= 1;
    let warning = null;
    if (mass_kg > 1250) warning = 'Превышен максимальный вес 1 250 кг — свяжитесь с нами для индивидуального расчёта.';
    else if (mass_kg < 0.3) warning = 'Минимальный вес заготовки — 0,3 кг.';

    return { mass_kg, unit_price, total, low, high, valid, warning };
  }, [partId, matId, method, qty, dims, part]);

  const fmt = (n) => {
    if (!isFinite(n) || n <= 0) return '—';
    return Math.round(n).toLocaleString('ru-RU').replace(/,/g, ' ');
  };

  const setDim = (k, v) => setDims((d) => ({ ...d, [k]: Math.max(0, Number(v) || 0) }));

  const partIcon = (p) => p.drawing;

  return (
    <section id="calculator" className="section calc-section">
      <div className="container">
        <div className="sec-head">
          <div className="sec-title">
            <div className="eyebrow"><span className="num">04</span> Калькулятор</div>
            <h2>Рассчитайте<br/>стоимость поковки</h2>
          </div>
          <div className="sec-desc">
            <p className="lead">
              Укажите тип детали, размеры, материал и тираж — мы покажем ориентировочный
              диапазон цены за партию. Точная стоимость с учётом оснастки, термообработки
              и логистики — после вашей заявки.
            </p>
          </div>
        </div>

        <div className="calc-grid">
          {/* ── FORM ── */}
          <div className="calc-form">
            {/* Part type */}
            <div className="calc-field">
              <div className="calc-label">
                <span>01 / Тип детали</span>
                <span className="val">{part.name}</span>
              </div>
              <div className="seg">
                {PART_TYPES.map((p) => (
                  <button
                    key={p.id}
                    className={'seg-btn' + (p.id === partId ? ' active' : '')}
                    onClick={() => setPartId(p.id)}
                    type="button"
                  >
                    <span className="icon">{partIcon(p)}</span>
                    {p.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Dimensions */}
            <div className="calc-field">
              <div className="calc-label">
                <span>02 / Размеры, мм</span>
                <span className="val">{part.fields.map((f) => `${f}=${dims[f] || '—'}`).join('  ·  ')}</span>
              </div>
              <div className="dim-grid" style={{ gridTemplateColumns: `repeat(${part.fields.length}, 1fr)` }}>
                {part.fields.map((f) => {
                  const [min, max] = part.limits[f];
                  return (
                    <div className="dim-input" key={f}>
                      <span className="lbl">{f} <span style={{ opacity: 0.6 }}>· {min}–{max}</span></span>
                      <input
                        type="number"
                        value={dims[f] ?? ''}
                        min={min}
                        max={max}
                        onChange={(e) => setDim(f, e.target.value)}
                      />
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Material */}
            <div className="calc-field">
              <div className="calc-label">
                <span>03 / Материал</span>
                <span className="val">{mat.name}</span>
              </div>
              <div className="calc-mat-list">
                {MATERIALS.map((m) => (
                  <button
                    key={m.id}
                    className={'calc-mat' + (m.id === matId ? ' active' : '')}
                    onClick={() => setMatId(m.id)}
                    type="button"
                    title={m.cat}
                  >
                    {m.name}
                  </button>
                ))}
              </div>
            </div>

            {/* Method */}
            <div className="calc-field">
              <div className="calc-label">
                <span>04 / Метод</span>
                <span className="val">{method === 'stamp' ? 'Горячая штамповка' : 'Свободная ковка'}</span>
              </div>
              <div className="calc-method">
                <button
                  type="button"
                  className={'calc-method-btn' + (method === 'stamp' ? ' active' : '')}
                  onClick={() => setMethod('stamp')}
                >Горячая штамповка</button>
                <button
                  type="button"
                  className={'calc-method-btn' + (method === 'forge' ? ' active' : '')}
                  onClick={() => setMethod('forge')}
                >Свободная ковка</button>
              </div>
            </div>

            {/* Quantity */}
            <div className="calc-field">
              <div className="calc-label">
                <span>05 / Тираж</span>
                <span className="val">
                  {qty} шт{' '}
                  {QTY_DISCOUNT(qty) < 1 && (
                    <span style={{ color: 'var(--ok)' }}>· скидка −{Math.round((1 - QTY_DISCOUNT(qty)) * 100)}%</span>
                  )}
                </span>
              </div>
              <div className="qty-row">
                <input
                  className="qty-input"
                  type="number"
                  min="1"
                  value={qty}
                  onChange={(e) => setQty(Math.max(1, Number(e.target.value) || 1))}
                />
                <div style={{ display: 'flex', gap: '1px', background: 'var(--line)', border: '1px solid var(--line)' }}>
                  {[1, 5, 10, 50, 100].map((n) => (
                    <button
                      key={n}
                      type="button"
                      className={'calc-mat' + (qty === n ? ' active' : '')}
                      onClick={() => setQty(n)}
                    >{n}</button>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* ── RESULT ── */}
          <div className="calc-result">
            <div className="result-head">
              <span>Расчёт</span>
              <span className="live"><span className="dot"></span>В реальном времени</span>
            </div>

            <div className="result-weight">
              Расчётный вес единицы:{' '}
              <span className="v">
                {calc.mass_kg > 0 ? calc.mass_kg.toFixed(calc.mass_kg < 10 ? 2 : 1) : '—'} кг
              </span>
            </div>
            <div className="result-weight" style={{ fontSize: 16 }}>
              Цена за единицу:{' '}
              <span className="v">{fmt(calc.unit_price)} ₽</span>
            </div>

            <div className="result-price-label">Ориентировочная стоимость партии</div>
            <div className="result-price">
              {calc.valid ? (
                <>
                  {fmt(calc.low)}<span className="sep">—</span>{fmt(calc.high)}
                  <span className="cur">₽</span>
                </>
              ) : (
                <span style={{ color: 'var(--fg-3)', fontSize: 28 }}>—</span>
              )}
            </div>

            <div className="result-disclaimer">
              {calc.warning ? (
                <span style={{ color: 'var(--accent-2)' }}>{calc.warning}</span>
              ) : (
                <>
                  Расчёт ориентировочный. Точная стоимость, скидки и сроки —
                  по запросу. Оставьте сообщение в форме ниже, и мы пришлём коммерческое предложение
                  в течение рабочего дня.
                </>
              )}
            </div>

            <div className="result-breakdown">
              <div className="result-row"><span>Объём</span><span className="v">{fmt(part.volume(dims) / 1000)} см³</span></div>
              <div className="result-row"><span>Материал</span><span className="v">{mat.name} · ×{mat.mult.toFixed(2)}</span></div>
              <div className="result-row"><span>Метод</span><span className="v">{method === 'stamp' ? 'Штамповка' : 'Ковка'} · ×{METHOD_MULT[method].toFixed(2)}</span></div>
              <div className="result-row"><span>Тираж</span><span className="v">{qty} шт · ×{QTY_DISCOUNT(qty).toFixed(2)}</span></div>
            </div>

            <div className="result-actions">
              <a className="btn btn-primary" href="#contact">
                Получить точное КП
                <span className="arrow">→</span>
              </a>
              <a className="btn btn-ghost" href="tel:+74912932771">
                +7 (4912) 93-27-71
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Calculator = Calculator;