// aircraft.jsx — Aircraft screen: tabs ข้อมูล (Info + W&B) / MR2 (deferred) / เที่ยวบิน.
// Models the OPS-API fields (MSN, SELCAL, autoland/fumigation due, W&B, MR2) in our
// own design language. Exported to window.
const { useState: useAc } = React;

const MONTHS = { jan: 0, feb: 1, mar: 2, apr: 3, may: 4, jun: 5, jul: 6, aug: 7, sep: 8, oct: 9, nov: 10, dec: 11 };
function parseDate(s) {
  const m = /(\d{1,2})-([A-Za-z]{3})-(\d{2})/.exec(s || "");
  if (!m) return null;
  const mo = MONTHS[m[2].toLowerCase()];
  if (mo == null) return null;
  return new Date(2000 + +m[3], mo, +m[1]);
}
const TODAY = new Date(2026, 5, 4);
function daysUntil(s) { const d = parseDate(s); if (!d) return null; return Math.round((d - TODAY) / 864e5); }
function toISO(s) { const d = parseDate(s); if (!d) return null; return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; }
const fmtN = (n) => n.toLocaleString();

const CAT_COLOR = { A: "var(--danger)", B: "#E0671C", C: "var(--accent)", D: "var(--data)" };
function CatBadge({ cat }) {
  const c = CAT_COLOR[cat] || "var(--ink-soft)";
  return <span className="catbadge" style={{ "--cc": c }}>CAT {cat}</span>;
}

function DueValue({ date }) {
  const d = daysUntil(date);
  const cls = d == null ? "" : d < 0 ? " due--over" : d <= 14 ? " due--soon" : "";
  return <span className={"mono due" + cls}>{date}{d != null && d >= 0 && d <= 30 && <i> · {d}d</i>}{d != null && d < 0 && <i> · over</i>}</span>;
}

function AircraftScreen({ reg, onBack, onFuel, onAttach, onSchematic, onMel, onStatus }) {
  const [tab, setTab] = useAc("info");
  const ac = FLEET.find((a) => a.reg === reg) || FLEET[0];
  const info = AC_INFO[reg] || {};
  const mr2 = MR2[reg] || [];
  const flights = FLIGHTS.filter((f) => f.reg === reg);

  return (
    <div className="screen-scroll ac">
      <TopBar title={reg} sub={`${ac.type} · ${ac.eng}`} onBack={onBack}
        right={<span className="apipill"><i className="apipill-dot" />LIVE</span>} />

      <div className="actabs">
        {[["info", "Info"], ["mr2", `MR2 · ${mr2.length}`], ["flights", "Flights"]].map(([k, l]) => (
          <button key={k} className={"actab" + (tab === k ? " actab--on" : "")} onClick={() => setTab(k)}>{l}</button>
        ))}
      </div>

      <div className="ac-body">
        {tab === "info" && (
          <>
            <Card className="acinfo-head">
              <div className="acinfo-reg mono">{reg}</div>
              <div className="acinfo-sub">{ac.type} · Config {info.config || "—"}</div>
              <div className="acinfo-ids"><span className="mono">MSN {info.msn}</span><span className="mono">SELCAL {info.selcal}</span></div>
            </Card>

            <div className="block-head block-head--bare"><span>General</span></div>
            <Card>
              <KV k="PF / IF" v={`${info.pf} / ${info.iff}`} mono />
              <div className="kv"><span className="kv-k">Autoland next due</span><DueValue date={info.autolandDue} /></div>
              <KV k="Autoland performed" v={info.autolandPerf} mono />
              <div className="kv"><span className="kv-k">Fumigation next due</span><DueValue date={info.fumDue} /></div>
              <KV k="Fumigation performed" v={info.fumPerf} mono />
            </Card>

            <div className="block-head block-head--bare"><span>Weight &amp; Balance</span></div>
            <div className="wb-grid">
              <div className="wb"><span className="wb-l">MTOW</span><b className="mono">{fmtN(info.mtow)}<i>kg</i></b></div>
              <div className="wb"><span className="wb-l">MLW</span><b className="mono">{fmtN(info.mlw)}<i>kg</i></b></div>
              <div className="wb"><span className="wb-l">MZFW</span><b className="mono">{fmtN(info.mzfw)}<i>kg</i></b></div>
            </div>
            <Card>
              <KV k="DOW (2/4)" v={fmtN(info.dow) + " kg"} mono />
              <KV k="Index (2/4)" v={info.index} mono />
              <KV k="MAC (2/4)" v={info.mac + " %"} mono />
            </Card>
          </>
        )}

        {tab === "mr2" && (
          <div className="mr2-list">
            <div className="mr2-lead">Open deferred defects ({mr2.length}) — check before aircraft release</div>
            {mr2.map((d, i) => {
              const dd = daysUntil(d.expire);
              const urgent = dd != null && dd <= 14;
              return (
                <Card key={i} className={"mr2" + (urgent ? " mr2--urgent" : "")}>
                  <div className="mr2-top">
                    <CatBadge cat={d.cat} />
                    <span className="mr2-date mono">{d.date}</span>
                    <span className="mr2-status">{d.status}</span>
                  </div>
                  <div className="mr2-item">{d.item}</div>
                  <div className="mr2-foot">
                    <span className="mr2-mel mono">MEL {d.mel}</span>
                    <span className="mr2-exp">Expire <DueValue date={d.expire} /></span>
                    {d.ext !== "—" && <span className="mr2-ext mono">EXT {d.ext}</span>}
                  </div>
                  {/^[ABCD]$/.test(d.cat) && onMel && (
                    <button className="mr2-melbtn" onClick={() => onMel({ cat: d.cat, date: toISO(d.date) || undefined, item: d.item, reg, mel: d.mel, sheetExpiry: d.expire })}>
                      <Ic.clock width="15" height="15" />Open in MEL calculator<Ic.chevron width="15" height="15" />
                    </button>
                  )}
                </Card>
              );
            })}
            {mr2.length === 0 && <div className="empty">No open deferred defects</div>}
          </div>
        )}

        {tab === "flights" && (
          <div className="acflights">
            {flights.map((f) => (
              <Card key={f.id} className="acflt">
                <div className="acflt-top"><button className="flt-pill flt-pill--tap mono" onClick={() => onStatus && onStatus(f)}>{f.id}</button><span className="acflt-route mono">{f.from}→{f.to}</span><span className={"opstatus opstatus--" + opCls(f.opStatus)}>{f.opStatus}</span></div>
                <div className="acflt-meta mono">STD {f.std} · STA {f.sta} · Gate {f.gate}/Bay {f.bay} · Fuel {fmtN(f.fuelFinal)} {f.fuelStatus}</div>
                <div className="flt-actions flt-actions--3">
                  <button className="flt-act flt-act--ghost" onClick={() => onFuel(f)}><Ic.fuel width="15" height="15" />Fuel</button>
                  <button className="flt-act flt-act--track" onClick={() => window.open(trackUrl(f.id), "_blank", "noopener")}><Ic.flight width="15" height="15" />Track</button>
                  <button className="flt-act" onClick={() => onAttach(f)}>Work Log <Ic.arrowR width="15" height="15" /></button>
                </div>
              </Card>
            ))}
            {flights.length === 0 && <div className="empty">No flights for this aircraft</div>}
          </div>
        )}
      </div>
      <div className="scroll-pad" />
    </div>
  );
}

function opCls(s) { return s === "Boarding" ? "now" : s === "Departed" ? "off" : "soft"; }

Object.assign(window, { AircraftScreen, daysUntil });