// === Savings Calculator ===
// Compares solar trailer to diesel equivalent for either Buy or Rent paths.
// Fuel cost is editable, with live NZ diesel price fetched on mount via Claude.

const TIER_DATA = {
  1: {
    name: "Solo",
    solarBuy: 19500,
    solarDay: 150, solarWeek: 700,
    dieselBuy: 3800,                 // ~6kVA diesel gen NZ
    dieselDay: 95, dieselWeek: 350,  // typical NZ hire chain
    dieselLPerHour: 1.6,             // L/hr at typical load
    dieselServiceYr: 800,
    co2PerLitre: 2.68,               // kg CO2 / L diesel
  },
  2: {
    name: "Crew",
    solarBuy: 36500,
    solarDay: 320, solarWeek: 1400,
    dieselBuy: 9500,                 // ~10kVA diesel
    dieselDay: 145, dieselWeek: 520,
    dieselLPerHour: 2.9,
    dieselServiceYr: 1400,
    co2PerLitre: 2.68,
  },
  3: {
    name: "Command",
    solarBuy: 58000,
    solarDay: 520, solarWeek: 2400,
    dieselBuy: 28000,                // ~25kVA diesel
    dieselDay: 285, dieselWeek: 980,
    dieselLPerHour: 5.6,
    dieselServiceYr: 2400,
    co2PerLitre: 2.68,
  },
};

function Calculator() {
  const [tier, setTier] = React.useState(2);
  const [mode, setMode] = React.useState('buy'); // 'buy' | 'rent'
  const [hours, setHours] = React.useState(10);
  const [days, setDays] = React.useState(220);
  const [weeks, setWeeks] = React.useState(8);   // for rent path
  const [fuelPrice, setFuelPrice] = React.useState(2.25); // NZD / L (recent NZ retail avg fallback)
  const [priceAsOf, setPriceAsOf] = React.useState('');
  const [priceStatus, setPriceStatus] = React.useState('loading'); // loading | live | manual

  // Live NZ diesel price lookup — sourced from gaspy.nz / MBIE weekly data via Claude
  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        if (!window.claude || !window.claude.complete) throw new Error('no claude');
        const today = new Date().toLocaleDateString('en-NZ', { day:'numeric', month:'long', year:'numeric' });
        const res = await window.claude.complete(
          `Today's date is ${today}. What is the current national average retail price of diesel in New Zealand right now, GST inclusive, NZD per litre? Use the most recent figure you have from gaspy.nz or MBIE weekly fuel-price monitoring. Reply with strict JSON only, no prose: {"price": 2.25, "asof": "month YYYY"}.`
        );
        const m = res.match(/\{[\s\S]*?\}/);
        if (m) {
          const data = JSON.parse(m[0]);
          if (!cancelled && typeof data.price === 'number' && data.price > 1.5 && data.price < 4) {
            setFuelPrice(Number(data.price.toFixed(2)));
            if (data.asof) setPriceAsOf(String(data.asof));
            setPriceStatus('live');
          } else if (!cancelled) {
            setPriceStatus('manual');
          }
        } else if (!cancelled) {
          setPriceStatus('manual');
        }
      } catch (e) {
        if (!cancelled) setPriceStatus('manual');
      }
    })();
    return () => { cancelled = true; };
  }, []);

  const t = TIER_DATA[tier];

  // ---- BUY path ----
  // Annual operating savings = (fuel + service) avoided
  const annualHours = hours * days;
  const annualFuelL = annualHours * t.dieselLPerHour;
  const annualFuelCost = annualFuelL * fuelPrice;
  const annualServiceCost = t.dieselServiceYr;
  const annualOpsSaved = annualFuelCost + annualServiceCost;

  // CAPEX delta — paying more for the trailer than for a diesel gen.
  // Payback in years
  const capexDelta = t.solarBuy - t.dieselBuy;
  const paybackYears = annualOpsSaved > 0 ? capexDelta / annualOpsSaved : Infinity;
  const tenYearSavings = (annualOpsSaved * 10) - capexDelta;

  const annualCO2 = annualFuelL * t.co2PerLitre; // kg

  // ---- RENT path ----
  // Compare daily/weekly hire of solar trailer vs diesel gen, plus diesel fuel during the rental
  const rentDays = weeks * 7;
  const rentHours = rentDays * hours;
  const rentDieselFuelL = rentHours * t.dieselLPerHour;
  const rentDieselFuelCost = rentDieselFuelL * fuelPrice;
  const rentDieselHireCost = weeks * t.dieselWeek;
  const rentDieselTotal = rentDieselHireCost + rentDieselFuelCost;
  const rentSolarTotal = weeks * t.solarWeek;
  const rentSavings = rentDieselTotal - rentSolarTotal;
  const rentCO2 = rentDieselFuelL * t.co2PerLitre;

  // Convenience numbers
  const cars = (annualCO2 / 4600).toFixed(1);
  const trees = Math.round(annualCO2 / 21);
  const rentCars = (rentCO2 / 4600).toFixed(1);

  return (
    <section className="calc section-pad" id="calculator">
      <div className="shell">
        <div className="calc-head">
          <div>
            <div className="eyebrow">§ 11 — Savings calculator</div>
            <h2 className="kicker" style={{marginTop:14, color:'var(--bone)'}}>What does<br/>diesel <span style={{color:'var(--signal)'}}>cost you?</span></h2>
          </div>
          <p className="body-lg" style={{opacity:0.78}}>
            Pick a tier, decide if you'd buy or hire, and dial in your usage. We'll compare the all-in cost against an equivalent diesel generator — fuel, service, hire rates and tonnes of CO₂ included.
          </p>
        </div>

        <div className="calc-modetoggle">
          <button className={`calc-mode ${mode==='buy'?'active':''}`} onClick={()=>setMode('buy')}>
            <div className="calc-mode-eyebrow">Path A</div>
            <div className="calc-mode-name">Buy a trailer</div>
            <div className="calc-mode-sub">10-year ownership · payback period</div>
          </button>
          <button className={`calc-mode ${mode==='rent'?'active':''}`} onClick={()=>setMode('rent')}>
            <div className="calc-mode-eyebrow">Path B</div>
            <div className="calc-mode-name">Hire a trailer</div>
            <div className="calc-mode-sub">Per-project · weekly comparison</div>
          </button>
        </div>

        <div className="calc-grid">
          <div className="calc-controls">
            <div className="calc-block">
              <label>Trailer tier</label>
              <div className="calc-segments">
                {[1,2,3].map(n => (
                  <button key={n} className={`calc-seg ${tier===n?'active':''}`} onClick={()=>setTier(n)}>
                    <div className="calc-seg-num">T0{n}</div>
                    <div className="calc-seg-name">{TIER_DATA[n].name}</div>
                  </button>
                ))}
              </div>
            </div>

            <div className="calc-block">
              <div className="calc-label-row">
                <label>Hours running per day</label>
                <div className="calc-val">{hours} <span>hr</span></div>
              </div>
              <input type="range" min="1" max="24" value={hours} onChange={e=>setHours(+e.target.value)} className="calc-slider"
                style={{'--p': `${(hours-1)/23*100}%`}}/>
              <div className="calc-scale"><span>1</span><span>12</span><span>24</span></div>
            </div>

            {mode === 'buy' ? (
              <div className="calc-block">
                <div className="calc-label-row">
                  <label>Operating days per year</label>
                  <div className="calc-val">{days} <span>days</span></div>
                </div>
                <input type="range" min="20" max="365" value={days} onChange={e=>setDays(+e.target.value)} className="calc-slider"
                  style={{'--p': `${(days-20)/345*100}%`}}/>
                <div className="calc-scale"><span>20</span><span>192</span><span>365</span></div>
              </div>
            ) : (
              <div className="calc-block">
                <div className="calc-label-row">
                  <label>Project duration</label>
                  <div className="calc-val">{weeks} <span>{weeks===1?'week':'weeks'}</span></div>
                </div>
                <input type="range" min="1" max="52" value={weeks} onChange={e=>setWeeks(+e.target.value)} className="calc-slider"
                  style={{'--p': `${(weeks-1)/51*100}%`}}/>
                <div className="calc-scale"><span>1 wk</span><span>26 wk</span><span>1 yr</span></div>
              </div>
            )}

            <div className="calc-block">
              <div className="calc-label-row">
                <label>NZ diesel price · NZD/L</label>
                <div className="calc-priceline">
                  <span className={`price-dot ${priceStatus}`}/>
                  <span className="price-status">
                    {priceStatus==='loading' ? 'Fetching live price…' :
                     priceStatus==='live' ? `Live · NZ avg${priceAsOf ? ' · ' + priceAsOf : ''}` :
                     'Manual · edit anytime'}
                  </span>
                </div>
              </div>
              <div className="calc-fuelinput">
                <span className="prefix">$</span>
                <input
                  type="number"
                  step="0.01" min="0.50" max="10"
                  value={fuelPrice}
                  onChange={e => { setFuelPrice(+e.target.value || 0); setPriceStatus('manual'); }}
                />
                <span className="suffix">/ L</span>
                <button className="reset-fuel" onClick={async () => {
                  setPriceStatus('loading');
                  try {
                    const today = new Date().toLocaleDateString('en-NZ', { day:'numeric', month:'long', year:'numeric' });
                    const res = await window.claude.complete(
                      `Today's date is ${today}. Latest national average retail diesel price in New Zealand, GST inclusive, NZD per litre — from gaspy.nz or MBIE weekly fuel-price monitoring. Reply strict JSON only: {"price": 2.25, "asof": "month YYYY"}.`
                    );
                    const m = res.match(/\{[\s\S]*?\}/);
                    const data = m ? JSON.parse(m[0]) : null;
                    if (data && typeof data.price === 'number' && data.price > 1.5 && data.price < 4) {
                      setFuelPrice(Number(data.price.toFixed(2)));
                      if (data.asof) setPriceAsOf(String(data.asof));
                      setPriceStatus('live');
                    } else { setPriceStatus('manual'); }
                  } catch { setPriceStatus('manual'); }
                }}>Refresh</button>
              </div>
              <div className="calc-scale"><span>Edit if your delivered cost is different</span></div>
            </div>

            <div className="calc-foot">
              <span>vs. equivalent diesel generator · NZ$ ex-GST · indicative</span>
            </div>
          </div>

          <div className="calc-results">
            {mode === 'buy' ? (
              <>
                <div className="calc-bigstat">
                  <div className="calc-bigstat-eyebrow">Net savings · 10 years</div>
                  <div className={`calc-bigstat-num ${tenYearSavings < 0 ? 'neg' : ''}`}>
                    <span className="dollar">{tenYearSavings < 0 ? '−$' : '$'}</span>
                    <CountUp value={Math.abs(Math.round(tenYearSavings))} />
                  </div>
                  <div className="calc-bigstat-sub">
                    Payback in <strong style={{color:'var(--signal)'}}>{paybackYears < 100 ? paybackYears.toFixed(1) : '—'} years</strong> after the up-front delta
                  </div>
                </div>
                <div className="calc-statgrid">
                  <div className="calc-stat">
                    <div className="calc-stat-eyebrow">Diesel fuel / yr</div>
                    <div className="calc-stat-val">$<CountUp value={Math.round(annualFuelCost)}/></div>
                    <div className="calc-stat-foot">{Math.round(annualFuelL).toLocaleString()} L of diesel avoided</div>
                  </div>
                  <div className="calc-stat">
                    <div className="calc-stat-eyebrow">Service / yr</div>
                    <div className="calc-stat-val">$<CountUp value={annualServiceCost}/></div>
                    <div className="calc-stat-foot">Oil, filters, callouts</div>
                  </div>
                  <div className="calc-stat">
                    <div className="calc-stat-eyebrow">CapEx delta</div>
                    <div className="calc-stat-val">$<CountUp value={capexDelta}/></div>
                    <div className="calc-stat-foot">Trailer ${t.solarBuy.toLocaleString()} – diesel ${t.dieselBuy.toLocaleString()}</div>
                  </div>
                  <div className="calc-stat highlight">
                    <div className="calc-stat-eyebrow">CO₂ avoided / yr</div>
                    <div className="calc-stat-val"><CountUp value={Math.round(annualCO2)}/> <span className="unit">kg</span></div>
                    <div className="calc-stat-foot">≈ {cars} cars off the road · {trees.toLocaleString()} trees planted</div>
                  </div>
                </div>
              </>
            ) : (
              <>
                <div className="calc-bigstat">
                  <div className="calc-bigstat-eyebrow">Project savings · {weeks} {weeks===1?'week':'weeks'}</div>
                  <div className={`calc-bigstat-num ${rentSavings < 0 ? 'neg' : ''}`}>
                    <span className="dollar">{rentSavings < 0 ? '−$' : '$'}</span>
                    <CountUp value={Math.abs(Math.round(rentSavings))} />
                  </div>
                  <div className="calc-bigstat-sub">
                    Solar trailer hire <strong style={{color:'var(--signal)'}}>${rentSolarTotal.toLocaleString()}</strong> vs diesel gen + fuel <strong>${Math.round(rentDieselTotal).toLocaleString()}</strong>
                  </div>
                </div>
                <div className="calc-statgrid">
                  <div className="calc-stat">
                    <div className="calc-stat-eyebrow">Diesel hire</div>
                    <div className="calc-stat-val">$<CountUp value={rentDieselHireCost}/></div>
                    <div className="calc-stat-foot">${t.dieselWeek}/wk · {weeks} {weeks===1?'wk':'wks'}</div>
                  </div>
                  <div className="calc-stat">
                    <div className="calc-stat-eyebrow">Diesel fuel</div>
                    <div className="calc-stat-val">$<CountUp value={Math.round(rentDieselFuelCost)}/></div>
                    <div className="calc-stat-foot">{Math.round(rentDieselFuelL).toLocaleString()} L @ ${fuelPrice.toFixed(2)}/L</div>
                  </div>
                  <div className="calc-stat">
                    <div className="calc-stat-eyebrow">Solar trailer hire</div>
                    <div className="calc-stat-val">$<CountUp value={rentSolarTotal}/></div>
                    <div className="calc-stat-foot">${t.solarWeek}/wk · all-in, no fuel</div>
                  </div>
                  <div className="calc-stat highlight">
                    <div className="calc-stat-eyebrow">CO₂ avoided</div>
                    <div className="calc-stat-val"><CountUp value={Math.round(rentCO2)}/> <span className="unit">kg</span></div>
                    <div className="calc-stat-foot">≈ {rentCars} cars off the road for a year</div>
                  </div>
                </div>
              </>
            )}
            <div className="calc-cta">
              <a href="#contact" className="btn btn-primary">
                {mode==='buy' ? `Quote a Tier 0${tier} build` : `Check Tier 0${tier} availability`}
                <ArrowRight size={14} stroke={2} className="arrow"/>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CountUp({ value }) {
  const [n, setN] = React.useState(value);
  const prev = React.useRef(value);
  React.useEffect(() => {
    const start = prev.current;
    const delta = value - start;
    const dur = 500;
    const t0 = performance.now();
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - t0) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(start + delta * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
      else prev.current = value;
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value]);
  return <>{n.toLocaleString()}</>;
}

window.Calculator = Calculator;