// inputs.jsx — Input panel components for the loan calculator.
// Uses LoanEngine globals. Exports input components to window.

const { useState: useStateInputs } = React;
const PLANS_DATA = window.LoanEngine.PLANS;

function PlanPicker({ value, onChange }) {
  return (
    <div className="plan-grid">
      {Object.entries(PLANS_DATA).map(([key, p]) =>
      <button key={key} type="button"
      className={`plan-pick ${value === key ? 'active' : ''}`}
      onClick={() => onChange(key)}>
          <div className="plan-name">{p.label}</div>
          <div className="plan-sub">{p.country}</div>
        </button>
      )}
    </div>);

}

function CurrencyInput({ label, value, onChange, step = 100, min = 0, max = 1000000, prefix = '£' }) {
  return (
    <div className="input-row">
      <label>{label}</label>
      <div style={{ position: 'relative' }}>
        <span style={{
          position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
          color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', fontSize: 14, pointerEvents: 'none'
        }}>{prefix}</span>
        <input className="input" type="number" value={value}
        step={step} min={min} max={max}
        onChange={(e) => onChange(Number(e.target.value) || 0)}
        style={{ paddingLeft: 24 }} />
      </div>
    </div>);

}

function GradYearInput({ planKey, value, onChange }) {
  const plan = PLANS_DATA[planKey] || PLANS_DATA.plan5;
  const CURRENT = 2026;
  const elapsed = Math.max(0, CURRENT - value);
  const remaining = Math.max(0, plan.writeOffYears - elapsed);
  return (
    <div className="input-row">
      <label>Year you graduated</label>
      <input className="input" type="number" value={value}
             step={1} min={1990} max={CURRENT}
             onChange={(e) => onChange(Number(e.target.value) || CURRENT)} />
      <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>
        → {remaining} yrs until write-off ({plan.writeOffYears}-yr term)
      </div>
    </div>
  );
}

function SliderInput({ label, value, onChange, min, max, step = 1, unit = '', format }) {
  const disp = format ? format(value) : `${value}${unit}`;
  return (
    <div className="slider-row">
      <div className="head">
        <label>{label}</label>
        <span className="val">{disp}</span>
      </div>
      <input type="range" min={min} max={max} step={step}
      value={value} onChange={(e) => onChange(Number(e.target.value))} />
    </div>);

}

function InputsPanel({ inputs, setInputs, fmt }) {
  const set = (k) => (v) => setInputs({ ...inputs, [k]: v });
  return (
    <div className="stack" style={{ width: "340px" }}>
      <div className="card card-pad-sm">
        <h3 className="card-title">Loan</h3>
        <p className="card-sub">Plan & balance</p>
        <PlanPicker value={inputs.planKey} onChange={set('planKey')} />
        <div style={{ height: 16 }} />
        <div className="grid grid-2">
          <CurrencyInput label="Outstanding balance" value={inputs.balance}
          onChange={set('balance')} step={500} max={200000} />
          <GradYearInput planKey={inputs.planKey} value={inputs.gradYear}
          onChange={set('gradYear')} />
        </div>
      </div>

      <div className="card card-pad-sm">
        <h3 className="card-title">Income</h3>
        <p className="card-sub">Today and future</p>
        <div className="grid grid-2">
          <CurrencyInput label="Current salary" value={inputs.salary}
          onChange={set('salary')} step={500} max={500000} />
          <CurrencyInput label="Bonus / yr" value={inputs.bonus}
          onChange={set('bonus')} step={500} max={200000} />
        </div>
        <div style={{ height: 12 }} />
        <SliderInput label="Salary growth"
        value={inputs.salaryGrowth} min={0} max={15} step={0.5}
        onChange={set('salaryGrowth')} format={(v) => `${v}% / yr`} />
        <div style={{ height: 12 }} />
        <SliderInput label="Pension contribution"
        value={inputs.pension} min={0} max={20} step={0.5}
        onChange={set('pension')} format={(v) => `${v}%`} />
        <div style={{ height: 12 }} />
        <SliderInput label="Age"
        value={inputs.age} min={18} max={65}
        onChange={set('age')} format={(v) => `${v} yrs`} />
      </div>

      <div className="card card-pad-sm">
        <h3 className="card-title">Extra payments</h3>
        <p className="card-sub">What you'd put toward the loan — or invest instead</p>
        <SliderInput label="Monthly overpayment / invested"
        value={inputs.monthlyOverpay} min={0} max={1500} step={25}
        onChange={set('monthlyOverpay')}
        format={(v) => `£${v} / mo`} />
        <div style={{ height: 12 }} />
        <CurrencyInput label="One-off lump sum (today)" value={inputs.lumpSum}
        onChange={set('lumpSum')} step={500} max={100000} />
        <div style={{ height: 14 }} />
        <div className="input-row">
          <label>After the lump sum, the £{inputs.monthlyOverpay}/mo…</label>
          <div className="seg" style={{ width: '100%' }}>
            {[
              { v: 'invest', l: 'Invests' },
              { v: 'overpay', l: 'Overpays' },
              { v: 'none', l: 'Does nothing' },
            ].map((o) => (
              <button key={o.v} className={inputs.lumpThenAction === o.v ? 'active' : ''}
                      onClick={() => set('lumpThenAction')(o.v)} style={{ flex: 1 }}>{o.l}</button>
            ))}
          </div>
        </div>
      </div>

      <div className="card card-pad-sm">
        <h3 className="card-title">Investment assumptions</h3>
        <p className="card-sub">What your alternative could earn</p>
        <SliderInput label="Expected annual return"
        value={inputs.investReturn * 100} min={2} max={12} step={0.25}
        onChange={(v) => set('investReturn')(v / 100)}
        format={(v) => `${v.toFixed(2)}% / yr`} />
        <div style={{ height: 12 }} />
        <SliderInput label="Inflation"
        value={inputs.inflation * 100} min={0} max={8} step={0.25}
        onChange={(v) => set('inflation')(v / 100)}
        format={(v) => `${v.toFixed(2)}% / yr`} />
        <div style={{ height: 12 }} />
        <SliderInput label="Platform fees"
        value={inputs.investFee * 100} min={0} max={2} step={0.05}
        onChange={(v) => set('investFee')(v / 100)}
        format={(v) => `${v.toFixed(2)}% / yr`} />
        <div style={{ height: 12 }} />
        <div className="seg" style={{ width: '100%' }}>
          {['ISA', 'Pension', 'Taxable'].map((w) =>
          <button key={w} className={inputs.wrapper === w ? 'active' : ''}
          onClick={() => set('wrapper')(w)} style={{ flex: 1 }}>{w}</button>
          )}
        </div>
      </div>
    </div>);

}

Object.assign(window, { InputsPanel, PlanPicker, CurrencyInput, SliderInput });