// fuel.jsx — Fuel Record calculator (A320 / A330) mirroring Maintenance Report 1.
// Per-tank values are TYPED directly into the green LED panel (arranged like the
// real cockpit gauge) and auto-summed into Departure. All other fields are exact
// numeric entry (no steppers). Totals/remaining/uplift/discrepancy auto-compute.
const { useState: useFu } = React;

const L_PER_USG = 3.785; // Litres = USG × 3.785 (per maint report)
const num = (v) => { const n = parseFloat(v); return isNaN(n) ? 0 : n; };

// tanks keyed; gridRows lays them out like the real gauge panel.
const A320_CFG = {
  type: "A320",
  tanks: { L: { label: "LEFT", cap: 3500 }, C: { label: "CTR", cap: 7300 }, R: { label: "RIGHT", cap: 3500 } },
  gridRows: [["L", "C", "R"]],
  def: { arrival: "3100", maint: "0", remaining: "2950", planned: "6600", litres: "4621", density: "0.790",
    tanks: { L: "3.30", C: "0.00", R: "3.30" } },
};
const A330_CFG = {
  type: "A330",
  tanks: {
    LI: { label: "L INR", cap: 22000 }, C: { label: "CENTRE", cap: 28000 }, RI: { label: "R INR", cap: 22000 },
    LO: { label: "L OUTR", cap: 1100 }, T: { label: "TRIM", cap: 4900 }, RO: { label: "R OUTR", cap: 1100 },
  },
  gridRows: [["LI", "C", "RI"], ["LO", "T", "RO"]],   // matches real A330 refuel panel
  def: { arrival: "14000", maint: "0", remaining: "13600", planned: "28000", litres: "18000", density: "0.800",
    tanks: { LI: "14.00", C: "0.00", RI: "14.00", LO: "0.00", T: "0.00", RO: "0.00" } },
};

const k1 = (kg) => (kg / 1000).toFixed(2);            // Kg×1000 format
const fk = (kg) => Math.round(kg).toLocaleString();   // full kg

/* one editable green-LED tank cell (type exact value, Kg×1000) */
function LedCell({ tk, value, set, over }) {
  return (
    <div className="led-cell">
      <input className={"led-input" + (over ? " led-input--over" : "")} inputMode="decimal"
        value={value} onChange={(e) => set(e.target.value)} onFocus={(e) => e.target.select()} />
      <span className="led-lbl">{tk.label}</span>
    </div>
  );
}

/* LED instrument panel — per-tank entry + auto sum (ACTUAL) */
function LedPanel({ cfg, vals, setVal, presel, actualSum }) {
  return (
    <div className="led">
      <div className="led-head"><span>FUEL QTY · DEPARTURE</span><span className="led-unit">Kg × 1000</span></div>
      <div className="led-grid">
        {cfg.gridRows.map((row, ri) => (
          <div className="led-row" key={ri}>
            {row.map((k) => {
              const tk = cfg.tanks[k]; const over = num(vals[k]) * 1000 > tk.cap + 1;
              return <LedCell key={k} tk={tk} value={vals[k]} over={over} set={(v) => setVal(k, v)} />;
            })}
          </div>
        ))}
      </div>
      <div className="led-foot">
        <div className="led-pa"><span className="led-num led-num--amber">{k1(presel)}</span><span className="led-lbl">PRESEL</span></div>
        <div className="led-pa"><span className="led-num">{actualSum.toFixed(2)}</span><span className="led-lbl">ACTUAL Σ</span></div>
        <div className="led-hint">พิมพ์ค่าต่อถัง · ผลรวม = Departure</div>
      </div>
    </div>
  );
}

/* exact numeric entry (no steppers) */
function InNum({ label, sub, value, set, unit }) {
  return (
    <div className="frow frow--in">
      <div className="frow-l"><span className="frow-lbl">{label}</span>{sub && <span className="frow-sub">{sub}</span>}</div>
      <div className="innum">
        <input className="innum-inp mono" inputMode="decimal" value={value}
          onChange={(e) => set(e.target.value)} onFocus={(e) => e.target.select()} />
        <span className="innum-u">{unit}</span>
      </div>
    </div>
  );
}

/* auto-calculated value */
function CalcRow({ label, sub, value, unit, strong, op }) {
  return (
    <div className={"frow frow--calc" + (strong ? " frow--strong" : "")}>
      <div className="frow-l"><span className="frow-lbl">{label}</span>{sub && <span className="frow-sub">{sub}</span>}</div>
      <div className="frow-r">{op && <span className="frow-op mono">{op}</span>}<span className="frow-val mono">{fk(value)}<i>{unit}</i></span></div>
    </div>
  );
}

function FGroup({ title, children }) {
  return <div className="fgroup"><div className="fgroup-h">{title}</div>{children}</div>;
}

function FuelCalc({ preset, onBack, onSave }) {
  const initType = preset?.type || "A320";
  const d0 = (initType === "A320" ? A320_CFG : A330_CFG).def;
  const [type, setType] = useFu(initType);
  const [arrival, setArrival] = useFu(preset?.arrival != null ? String(preset.arrival) : d0.arrival);
  const [maint, setMaint] = useFu(d0.maint);
  const [remaining, setRemaining] = useFu(d0.remaining);
  const [planned, setPlanned] = useFu(preset?.target != null ? String(preset.target) : d0.planned);
  const [litresIn, setLitresIn] = useFu(d0.litres);
  const [density, setDensity] = useFu(preset?.density != null ? String(preset.density) : d0.density);
  const [tanks, setTanks] = useFu({ ...d0.tanks });

  const cfg = type === "A320" ? A320_CFG : A330_CFG;
  const switchType = (tp) => {
    const d = (tp === "A320" ? A320_CFG : A330_CFG).def;
    setType(tp); setArrival(d.arrival); setMaint(d.maint); setRemaining(d.remaining);
    setPlanned(d.planned); setLitresIn(d.litres); setDensity(d.density); setTanks({ ...d.tanks });
  };
  const setTank = (k, v) => setTanks((t) => ({ ...t, [k]: v }));

  // ---- auto calculations (mirror MR1 fuel record) ----
  // Remaining fuel is TYPED (read from the gauge); used-on-ground is derived.
  const arrivalN = num(arrival), plannedN = num(planned), remainingN = num(remaining);
  const totalArr = arrivalN + num(maint);                    // total = arrival + maint uplift
  const groundUsed = Math.max(0, totalArr - remainingN);     // used on ground = total − remaining
  const litresN = num(litresIn);                             // Litres typed from the truck meter
  const usgCalc = litresN / L_PER_USG;                       // USG = Litres ÷ 3.785 (reference)
  const calcUplift = litresN * num(density);                 // kg = Litres × density
  const totalUpliftReq = Math.max(0, plannedN - remainingN); // to reach planned = planned − remaining
  const departureCalc = remainingN + calcUplift;             // remaining + calc uplift
  const actualSum = Object.keys(cfg.tanks).reduce((s, k) => s + num(tanks[k]), 0); // Σ tanks (×1000)
  const departureGauge = actualSum * 1000;                   // final gauge/panel total
  const disc = departureCalc - departureGauge;               // calc − panel
  const mli = Math.abs(disc) > 1000;

  const save = () => onSave({
    id: "FUEL-" + Math.floor(Math.random() * 900), type, arrival: arrivalN, planned: plannedN, target: plannedN,
    remaining: remainingN, groundUsed: Math.round(groundUsed), uplift: totalUpliftReq,
    litres: Math.round(litresN), usg: Math.round(usgCalc), calcUplift: Math.round(calcUplift),
    departureCalc: Math.round(departureCalc), departureGauge: Math.round(departureGauge),
    density: num(density), disc: Math.round(disc), mli,
  });

  return (
    <>
    <div className="screen-scroll fuel">
      <TopBar title="Fuel Record" sub="Type values · auto-calculated" onBack={onBack}
        right={<span className="apipill"><i className="apipill-dot" />AUTO</span>} />

      <div className="fuel-type">
        {["A320", "A330"].map((tp) => (
          <button key={tp} className={"typebtn" + (type === tp ? " typebtn--on" : "")} onClick={() => switchType(tp)}>
            <b>{tp}</b><span>{tp === "A320" ? "3 tanks" : "6 tanks"}</span>
          </button>
        ))}
      </div>

      <div className="fuel-body">
        <LedPanel cfg={cfg} vals={tanks} setVal={setTank} presel={plannedN} actualSum={actualSum} />

        <Card className="frec">
          <FGroup title="On arrival">
            <InNum label="Arrival fuel" sub="น้ำมันคงเหลือเมื่อถึง" value={arrival} set={setArrival} unit="kg" />
            <InNum label="Fuel uplift for maint" sub="เติมเพื่องานช่าง" value={maint} set={setMaint} unit="kg" />
            <CalcRow label="Total arrival + uplift" value={totalArr} unit="kg" op="=" />
            <InNum label="Remaining fuel" sub="น้ำมันคงเหลือขณะนั้น (อ่านจากเกจ)" value={remaining} set={setRemaining} unit="kg" />
            <CalcRow label="Used on ground" sub="total − remaining (APU/run)" value={groundUsed} unit="kg" op="−" strong />
          </FGroup>

          <FGroup title="Refuel">
            <InNum label="Uplift (Litres)" sub="จากมิเตอร์รถเติม (อ่านเป็นลิตร)" value={litresIn} set={setLitresIn} unit="L" />
            <CalcRow label="≈ USG" sub="Litres ÷ 3.785" value={usgCalc} unit="USG" op="=" />
            <InNum label="Density" sub="จากใบเติม (ratio)" value={density} set={setDensity} unit="kg/L" />
            <CalcRow label="CALC uplift" sub="Litres × density" value={calcUplift} unit="kg" op="=" strong />
          </FGroup>

          <FGroup title="Departure">
            <InNum label="Planned departure fuel" sub="กัปตันสั่ง (PRESEL)" value={planned} set={setPlanned} unit="kg" />
            <CalcRow label="Total uplift required" sub="planned − remaining" value={totalUpliftReq} unit="kg" op="=" />
            <CalcRow label="Departure (calc)" sub="remaining + calc uplift" value={departureCalc} unit="kg" op="=" />
            <CalcRow label="Departure (panel Σ)" sub="ผลรวมจากจอ LED ด้านบน (เติมเสร็จ)" value={departureGauge} unit="kg" op="Σ" strong />
          </FGroup>

          <div className={"disc" + (mli ? " disc--bad" : " disc--ok")}>
            {mli ? <Ic.warn width="20" height="20" /> : <Ic.check width="20" height="20" />}
            <div className="disc-main">
              <div className="disc-top"><span className="disc-cap mono">DISCREPANCY</span><span className="disc-v mono">{disc >= 0 ? "+" : ""}{fk(disc)} kg</span></div>
              <div className="disc-l">{mli ? "Over 1,000 kg — MLI Check required (calc − panel)" : "Within limit < 1,000 kg (calc − panel)"}</div>
            </div>
          </div>
        </Card>

        <div className="fuel-cap mono">{type} · พิมพ์ค่าต่อถังเป็น Kg×1000 (เช่น 14.00) ให้ตรงเกจ · ช่องอื่นพิมพ์เป็น kg เต็ม</div>
      </div>
      <div className="scroll-pad" />
    </div>

    <div className="savebar">
      <Btn kind="ghost" onClick={onBack}>Close</Btn>
      <Btn kind="primary" full onClick={save} icon={<Ic.check width="18" height="18" />}>Save to Work Log</Btn>
    </div>
    </>
  );
}

Object.assign(window, { FuelCalc });