/* global React, fmtUAH, fmtNum, fmtPct */
const { useState, useMemo } = React;

/* ============================================================
   useCalcState — shared state for all 3 calculators
   Persists in localStorage so refresh doesn't reset
   ============================================================ */
function useCalcState() {
  const [state, _setState] = useState(() => {
    try {
      const saved = localStorage.getItem('baza_calc_v1');
      if (saved) return JSON.parse(saved);
    } catch {}
    return {
      clientCount: 1200,
      activeRate: 70,         // %
      repeatRate: 15,         // %
      avgCheck: 4500,         // грн
      intensity: 3,           // months between purchases
      period: 6,              // calculation period months
      // calc 2
      margin: 30,             // %
      adCostPerSale: 500,     // грн
      noAdShare: 80,          // % of repeats without ad spend
      // calc 3
      currentIncome: 80000,   // грн / month
      ownerShare: 50,         // % of extra profit owner takes
    };
  });

  const setState = (patch) => {
    _setState(prev => {
      const next = { ...prev, ...patch };
      try { localStorage.setItem('baza_calc_v1', JSON.stringify(next)); } catch {}
      return next;
    });
  };

  // ----- Derived values -----
  const derived = useMemo(() => {
    const activeBase = state.clientCount * (state.activeRate / 100);
    const buyers = activeBase * (state.repeatRate / 100);
    const purchasesPerBuyerInPeriod = Math.max(1, state.period / state.intensity);
    const totalPurchases = buyers * purchasesPerBuyerInPeriod;
    const totalRevenue = totalPurchases * state.avgCheck;

    // Calc 2
    const standardProfit = totalRevenue * (state.margin / 100);
    const adCostIfAllNew = totalPurchases * state.adCostPerSale;
    const adSavings = adCostIfAllNew * (state.noAdShare / 100);
    const profitWithRepeats = standardProfit + adSavings;
    const effectiveMargin = totalRevenue > 0 ? (profitWithRepeats / totalRevenue) * 100 : 0;

    // Calc 3
    const ownerExtraTotal = profitWithRepeats * (state.ownerShare / 100);
    const ownerExtraPerMonth = ownerExtraTotal / state.period;
    const newMonthlyIncome = state.currentIncome + ownerExtraPerMonth;
    const ownerGrowthPct = state.currentIncome > 0 ? (ownerExtraPerMonth / state.currentIncome) * 100 : 0;

    return {
      activeBase, buyers, totalPurchases, totalRevenue,
      standardProfit, adCostIfAllNew, adSavings, profitWithRepeats, effectiveMargin,
      ownerExtraTotal, ownerExtraPerMonth, newMonthlyIncome, ownerGrowthPct,
    };
  }, [state]);

  return [state, setState, derived];
}

/* ============================================================
   Shared field building blocks
   ============================================================ */
function NumField({ label, value, onChange, suffix, hint, min = 0, max, step = 1 }) {
  return (
    <div className="field">
      <label className="field__label">
        <span>{label}</span>
      </label>
      <div className="input-group">
        <input className="input input--num"
               type="number"
               value={value}
               min={min}
               max={max}
               step={step}
               onChange={e => onChange(Number(e.target.value))} />
        {suffix && <span className="input-group__suffix">{suffix}</span>}
      </div>
      {hint && <span className="field__hint">{hint}</span>}
    </div>
  );
}

function SliderField({ label, value, onChange, min = 0, max = 100, step = 1, format = (v) => v + '%', hint }) {
  return (
    <div className="field">
      <label className="field__label">
        <span>{label}</span>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 700 }}>{format(value)}</span>
      </label>
      <input className="slider"
             type="range"
             min={min} max={max} step={step}
             value={value}
             onChange={e => onChange(Number(e.target.value))} />
      {hint && <span className="field__hint">{hint}</span>}
    </div>
  );
}

function SegmentedField({ label, value, onChange, options, hint }) {
  return (
    <div className="field">
      <label className="field__label"><span>{label}</span></label>
      <div className="segmented" style={{ flexWrap: 'wrap' }}>
        {options.map(opt => (
          <button key={opt.value}
                  className={`segmented__option ${value === opt.value ? 'segmented__option--active' : ''}`}
                  onClick={() => onChange(opt.value)}>
            {opt.label}
          </button>
        ))}
      </div>
      {hint && <span className="field__hint">{hint}</span>}
    </div>
  );
}

/* ============================================================
   CalcIntro — instruction block above each calculator
   ============================================================ */
function CalcIntro({ num, title, children }) {
  return (
    <div className="calc-intro">
      <div className="calc-intro__icon">{num}</div>
      <div>
        <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, marginBottom: 6, lineHeight: 1.2 }}>
          {title}
        </h4>
        <p style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--ink-700)', margin: 0 }}>{children}</p>
      </div>
    </div>
  );
}

/* ============================================================
   Calculator 1 — base potential
   ============================================================ */
function Calculator1({ state, setState, derived }) {
  return (
    <div>
      <CalcIntro num="1" title="Калькулятор №1 — потенціал повторних продажів">
        Введіть базові показники вашої клієнтської бази, щоб побачити, скільки додаткового доходу вона може дати за обраний період.
      </CalcIntro>
      <div className="calc">
        <div className="calc__fields">
          <NumField label="Кількість клієнтів у базі"
                    value={state.clientCount}
                    onChange={v => setState({ clientCount: v })}
                    suffix="осіб"
                    hint="CRM, Instagram, месенджери, таблиці — порахуйте разом" />
          <SliderField label="Активна база"
                       value={state.activeRate}
                       onChange={v => setState({ activeRate: v })}
                       min={5} max={100}
                       hint="З якою часткою бази ви реально можете вийти на зв'язок" />
          <SliderField label="Конверсія в повторну покупку"
                       value={state.repeatRate}
                       onChange={v => setState({ repeatRate: v })}
                       min={1} max={50}
                       hint="Краще почати з обережного сценарію: 5–20%" />
          <NumField label="Середній чек повторної покупки"
                    value={state.avgCheck}
                    onChange={v => setState({ avgCheck: v })}
                    suffix="грн"
                    step={100} />
          <SegmentedField label="Інтенсивність повторних покупок"
                          value={state.intensity}
                          onChange={v => setState({ intensity: v })}
                          options={[
                            { value: 1, label: 'Раз/міс' },
                            { value: 2, label: '2 міс' },
                            { value: 3, label: '3 міс' },
                            { value: 6, label: '6 міс' },
                            { value: 12, label: 'Раз/рік' },
                          ]} />
          <SegmentedField label="Період розрахунку"
                          value={state.period}
                          onChange={v => setState({ period: v })}
                          options={[
                            { value: 1, label: '1 міс' },
                            { value: 3, label: '3 міс' },
                            { value: 6, label: '6 міс' },
                            { value: 12, label: '12 міс' },
                          ]} />
        </div>

        <div className="calc__output">
          <div>
            <div className="metric__label">Потенційний додатковий дохід</div>
            <div className="calc__hero-num">{fmtUAH(derived.totalRevenue)}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-300)', marginTop: 8 }}>
              за {state.period} {state.period === 1 ? 'місяць' : state.period < 5 ? 'місяці' : 'місяців'}
            </div>
          </div>

          <div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Активна база</span>
              <span className="calc__output-row__val">{fmtNum(derived.activeBase)} осіб</span>
            </div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Повторні покупці</span>
              <span className="calc__output-row__val">{fmtNum(derived.buyers)} осіб</span>
            </div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Кількість покупок</span>
              <span className="calc__output-row__val">{fmtNum(derived.totalPurchases)}</span>
            </div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Середній чек</span>
              <span className="calc__output-row__val">{fmtUAH(state.avgCheck)}</span>
            </div>
          </div>

          <div style={{ fontSize: 12, color: 'var(--ink-300)', lineHeight: 1.5, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
            Результат — це орієнтир, а не гарантія. Він показує потенціал бази, якщо з нею системно працювати.
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Calculator 2 — with margin economics
   ============================================================ */
function Calculator2({ state, setState, derived }) {
  return (
    <div>
      <CalcIntro num="2" title="Калькулятор №2 — маржа і витрати">
        Додаємо економіку: маржинальність, витрати на залучення нового клієнта та частку повторних продажів без реклами.
      </CalcIntro>
      <div className="calc">
        <div className="calc__fields">
          <div style={{ padding: 'var(--s-4)', background: 'var(--bone-2)', borderRadius: 'var(--r-3)', fontSize: 13, color: 'var(--ink-700)', lineHeight: 1.5 }}>
            <strong style={{ color: 'var(--ink-900)' }}>Дані з калькулятора №1:</strong><br/>
            {fmtNum(state.clientCount)} клієнтів · активна база {state.activeRate}% · повторна {state.repeatRate}% · чек {fmtUAH(state.avgCheck)} · період {state.period} міс.
            <br/><span style={{ color: 'var(--fg-3)', fontSize: 12 }}>Параметри можна змінити вище в калькуляторі №1.</span>
          </div>

          <SliderField label="Поточна маржинальність"
                       value={state.margin}
                       onChange={v => setState({ margin: v })}
                       min={5} max={80}
                       hint="Прибуток ÷ Дохід × 100%. Якщо не знаєте — беріть обережно" />
          <NumField label="Витрати на рекламу для одного продажу"
                    value={state.adCostPerSale}
                    onChange={v => setState({ adCostPerSale: v })}
                    suffix="грн"
                    step={50}
                    hint="Рекламний бюджет ÷ кількість продажів" />
          <SliderField label="Частка повторних продажів без реклами"
                       value={state.noAdShare}
                       onChange={v => setState({ noAdShare: v })}
                       min={0} max={100}
                       hint="Через CRM, email, дзвінки — без додаткових витрат на залучення" />
        </div>

        <div className="calc__output">
          <div>
            <div className="metric__label">Прибуток з повторних продажів</div>
            <div className="calc__hero-num">{fmtUAH(derived.profitWithRepeats)}</div>
            <div style={{ fontSize: 13, color: 'var(--kiwi-300)', marginTop: 8 }}>
              + {fmtUAH(derived.adSavings)} економії на рекламі
            </div>
          </div>

          <div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Дохід (з калькулятора №1)</span>
              <span className="calc__output-row__val">{fmtUAH(derived.totalRevenue)}</span>
            </div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Звичайний прибуток ({state.margin}%)</span>
              <span className="calc__output-row__val">{fmtUAH(derived.standardProfit)}</span>
            </div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Якщо всі — нові клієнти</span>
              <span className="calc__output-row__val">−{fmtUAH(derived.adCostIfAllNew)}</span>
            </div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Економія на рекламі</span>
              <span className="calc__output-row__val" style={{ color: 'var(--kiwi-400)' }}>+{fmtUAH(derived.adSavings)}</span>
            </div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Ефективна маржинальність</span>
              <span className="calc__output-row__val" style={{ color: 'var(--kiwi-400)' }}>{fmtPct(derived.effectiveMargin)}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Calculator 3 — personal income for owner
   ============================================================ */
function Calculator3({ state, setState, derived }) {
  return (
    <div>
      <CalcIntro num="3" title="Калькулятор №3 — особистий дохід власника">
        Скільки додатково ви зможете забирати собі, якщо запустити систему повторних продажів.
      </CalcIntro>
      <div className="calc">
        <div className="calc__fields">
          <div style={{ padding: 'var(--s-4)', background: 'var(--bone-2)', borderRadius: 'var(--r-3)', fontSize: 13, color: 'var(--ink-700)', lineHeight: 1.5 }}>
            <strong style={{ color: 'var(--ink-900)' }}>Дані з попередніх калькуляторів:</strong><br/>
            Прибуток з повторних продажів: {fmtUAH(derived.profitWithRepeats)} за {state.period} міс.
          </div>

          <NumField label="Ваш поточний особистий дохід"
                    value={state.currentIncome}
                    onChange={v => setState({ currentIncome: v })}
                    suffix="грн/міс"
                    step={1000}
                    hint="Скільки ви зараз забираєте з бізнесу щомісяця" />
          <SliderField label="Частка прибутку, яку ви забираєте собі"
                       value={state.ownerShare}
                       onChange={v => setState({ ownerShare: v })}
                       min={10} max={90}
                       hint="Решту краще залишити на розвиток і резерви. Обережно: 30–50%" />
        </div>

        <div className="calc__output">
          <div>
            <div className="metric__label">Новий особистий дохід / міс</div>
            <div className="calc__hero-num">{fmtUAH(derived.newMonthlyIncome)}</div>
            <div style={{ fontSize: 13, color: 'var(--kiwi-300)', marginTop: 8 }}>
              +{fmtUAH(derived.ownerExtraPerMonth)} · ріст {fmtPct(derived.ownerGrowthPct)}
            </div>
          </div>

          <div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Поточний дохід / міс</span>
              <span className="calc__output-row__val">{fmtUAH(state.currentIncome)}</span>
            </div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Додатковий прибуток за період</span>
              <span className="calc__output-row__val">{fmtUAH(derived.profitWithRepeats)}</span>
            </div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Власнику ({state.ownerShare}%)</span>
              <span className="calc__output-row__val">{fmtUAH(derived.ownerExtraTotal)}</span>
            </div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Додатково / міс</span>
              <span className="calc__output-row__val" style={{ color: 'var(--kiwi-400)' }}>+{fmtUAH(derived.ownerExtraPerMonth)}</span>
            </div>
            <div className="calc__output-row">
              <span className="calc__output-row__label">Ріст особистого доходу</span>
              <span className="calc__output-row__val" style={{ color: 'var(--kiwi-400)' }}>{fmtPct(derived.ownerGrowthPct)}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  useCalcState, NumField, SliderField, SegmentedField, CalcIntro,
  Calculator1, Calculator2, Calculator3,
});