/* SkyOps — Fleet & crew: drones, pilots, technicians and contractor companies.
   Shared store used by Work orders (assignee + drone) and New inspection (pilot + drone). */

const { useState: uSFL, useEffect: uEFL } = React;

const RES_TODAY = window.SKY_TODAY;
const RES_PEOPLE_SEED = [
  { id: "P-01", name: "T. Aragón", role: "Pilot · thermographer", kind: "employee", org: "Iberdrola O&M", region: "Alentejo", phone: "+351 912 004 118", rate: null,
    certs: [["EASA A2 CofC", "2027-03-12"], ["STS-01 operational", "2027-01-20"], ["Thermography Level 2 (ISO 18436-7)", "2026-11-30"]], skills: ["Pilot", "Thermography"], status: "available" },
  { id: "P-02", name: "L. Ferreira", role: "Pilot", kind: "freelancer", org: "Self-employed", region: "Algarve · Alentejo", phone: "+351 936 220 451", rate: 480,
    certs: [["EASA A2 CofC", "2026-12-04"], ["Thermography Level 1", "2027-05-18"]], skills: ["Pilot", "Thermography"], status: "available" },
  { id: "P-03", name: "M. Rivera", role: "Pilot · site manager", kind: "employee", org: "Iberdrola Renovables", region: "Murcia", phone: "+34 611 482 090", rate: null,
    certs: [["EASA A2 CofC", "2027-06-01"], ["Thermography Level 2", "2027-02-14"]], skills: ["Pilot", "Thermography", "Review"], status: "on_mission" },
  { id: "P-04", name: "J. Castaño", role: "Pilot", kind: "contractor", org: "AeroScan Ibérica", region: "Aragón", phone: "+34 677 310 225", rate: null,
    certs: [["EASA A2 CofC", "2026-10-30"], ["STS-02 operational", "2027-04-02"]], skills: ["Pilot"], status: "on_mission" },
  { id: "P-05", name: "R. Pardal", role: "Electrician", kind: "employee", org: "Iberdrola O&M", region: "Alentejo", phone: "+351 917 330 812", rate: null,
    certs: [["HV authorisation", "2027-08-10"], ["Working at height", "2027-01-05"]], skills: ["Electrical"], status: "available" },
  { id: "P-06", name: "J. Mota", role: "O&M crew A", kind: "employee", org: "Iberdrola O&M", region: "Alentejo · Murcia", phone: "+351 913 551 093", rate: null,
    certs: [["Module replacement", "2027-02-20"]], skills: ["Module replace", "Tracker"], status: "on_job" },
  { id: "P-07", name: "S. Lima", role: "O&M crew B", kind: "employee", org: "Iberdrola O&M", region: "Aragón", phone: "+351 918 664 207", rate: null,
    certs: [["Tracker systems (NEXTracker)", "2026-11-15"]], skills: ["Tracker", "Vegetation"], status: "on_job" },
];
const RES_COMPANIES_SEED = [
  { id: "C-01", name: "CleanTech Iberia", role: "contractor", kind: "company", service: "Robotic & manual module cleaning", region: "PT · ES", contract: "Framework · €1.30/module", sla: "5 working days", insurance: "2027-03-31", headcount: 24, skills: ["Cleaning"], status: "available" },
  { id: "C-02", name: "AeroScan Ibérica", role: "drone services", kind: "company", service: "Drone thermography & mapping", region: "ES", contract: "Per MIC · €4,200 + €18/ha", sla: "72 h mobilisation", insurance: "2026-12-15", headcount: 9, skills: ["Pilot", "Thermography"], status: "available" },
  { id: "C-03", name: "Verde Sul", role: "contractor", kind: "company", service: "Vegetation management", region: "Alentejo", contract: "Per ha · €310", sla: "10 working days", insurance: "2027-05-01", headcount: 12, skills: ["Vegetation"], status: "available" },
];
const RES_DRONES_SEED = [
  { id: "SKY-D01", model: "DJI M350 RTK", payload: "Zenmuse H30T", owner: "Iberdrola O&M", serial: "1581F5BKD23S", hours: 412, flights: 1284, batt: "TB65 ×6 · avg 112 cycles", base: "Évora depot", status: "available", nextMaint: "2026-11-20", firmware: "v09.01", insurance: "2027-02-28" },
  { id: "SKY-D02", model: "DJI M350 RTK", payload: "Zenmuse H30T", owner: "Iberdrola O&M", serial: "1581F5BKD24Q", hours: 368, flights: 1102, batt: "TB65 ×6 · avg 98 cycles", base: "Murcia depot", status: "deployed", reason: { cat: "Assigned to mission", text: "Lorca Photon Field · review re-fly sectors 3–4", since: "2026-10-21", back: "2026-10-24", by: "M. Rivera" }, nextMaint: "2026-12-04", firmware: "v09.01", insurance: "2027-02-28" },
  { id: "SKY-D03", model: "DJI M300 RTK", payload: "Zenmuse H20T", owner: "Iberdrola O&M", serial: "1ZNBJ4800C0021", hours: 1196, flights: 3410, batt: "TB60 ×8 · avg 241 cycles", base: "Évora depot", status: "maintenance", nextMaint: "2026-10-25", firmware: "v07.02", insurance: "2027-02-28", note: "Gimbal recalibration · IMU drift", reason: { cat: "Fault / breakdown", text: "IMU drift and gimbal pitch oscillation after hard landing in sortie 11 (MIC-2026-04-033).", since: "2026-10-18", back: "2026-10-25", by: "T. Aragón" },
    log: [["2026-10-18", "fault", "IMU drift + gimbal oscillation reported after hard landing", "T. Aragón"], ["2026-10-19", "maint", "Sent to DJI Enterprise service · RMA 88213", "M. Rivera"], ["2026-09-02", "maint", "100 h service · props + arms inspected", "Depot"]] },
  { id: "SKY-D04", model: "DJI Mavic 3T", payload: "Integrated", owner: "Iberdrola O&M", serial: "1581F4QDA31K", hours: 154, flights: 602, batt: "×4 · avg 70 cycles", base: "Algarve depot", status: "available", nextMaint: "2027-01-10", firmware: "v10.00", insurance: "2027-02-28" },
  { id: "ASI-07", model: "DJI M350 RTK", payload: "Zenmuse H30T", owner: "AeroScan Ibérica", serial: "1581F5BKC88P", hours: 503, flights: 1520, batt: "TB65 ×8", base: "Zaragoza", status: "deployed", nextMaint: "2026-11-02", firmware: "v09.01", insurance: "2026-12-15" },
];

const resStore = {
  data: (() => { try { const s = localStorage.getItem("skyops_res_v1"); if (s) return JSON.parse(s); } catch {} return { people: RES_PEOPLE_SEED, companies: RES_COMPANIES_SEED, drones: RES_DRONES_SEED }; })(),
  subs: new Set(),
  set(fn) { this.data = fn(this.data); try { localStorage.setItem("skyops_res_v1", JSON.stringify(this.data)); } catch {} this.subs.forEach(s => s(this.data)); },
};
function useRes() { const [d, setD] = uSFL(resStore.data); uEFL(() => { resStore.subs.add(setD); return () => resStore.subs.delete(setD); }, []); return d; }

const RES_KIND = { employee: "Employee", freelancer: "Freelancer", contractor: "Contractor", company: "Company" };
const resLabel = (r) => r.kind === "company" ? `${r.name} (${r.role})` : `${r.name} · ${r.role}`;
function resAssignees() { const d = resStore.data; return [...d.people.map(resLabel), ...d.companies.map(resLabel), "Unassigned"]; }
function resByLabel(l) { const d = resStore.data; return [...d.people, ...d.companies].find(r => resLabel(r) === l); }
function resPilots() { const d = resStore.data; return d.people.filter(p => p.skills.includes("Pilot")); }
function resDrones() { return resStore.data.drones; }
const droneLabel = (d) => `${d.id} · ${d.model} · ${d.payload}`;
const DR_STATUS = { available: "Available", deployed: "Deployed", maintenance: "Maintenance", grounded: "Grounded", retired: "Retired" };
const DR_REASONS = ["Scheduled maintenance", "Fault / breakdown", "Crash / incident", "Battery issue", "Calibration", "Firmware update", "Awaiting parts", "Regulatory / insurance hold", "Assigned to mission"];
function droneBatteries(dr) {
  if (dr.batteries) return dr.batteries;
  const n = +((dr.batt.match(/×(\d+)/) || [0, 4])[1]);
  const avg = +((dr.batt.match(/avg (\d+)/) || [0, 90])[1]);
  const type = (dr.batt.match(/^(TB\d+)/) || [0, "BAT"])[1];
  return Array.from({ length: n }).map((_, i) => {
    const cyc = Math.max(4, Math.round(avg + (i - n / 2) * avg * 0.12));
    const health = Math.max(58, Math.round(100 - cyc * 0.11 - (i === 2 && dr.id === "SKY-D03" ? 18 : 0)));
    return { id: `${type}-${dr.id.slice(-2)}${String.fromCharCode(65 + i)}`, cycles: cyc, health, last: "2026-10-" + String(12 + i).padStart(2, "0"),
      status: health < 70 ? "degraded" : i === 1 && dr.status === "deployed" ? "in_use" : "ok" };
  });
}
const resExpiring = (date) => date < RES_TODAY ? "expired" : date < window.skyAdd(60) ? "soon" : "ok";

function ResKind({ k }) { return <span className={`fl-kind fl-kind-${k}`}>{RES_KIND[k]}</span>; }
function ResStatus({ s }) {
  const L = { available: "Available", on_mission: "On mission", on_job: "On job", deployed: "Deployed", maintenance: "Maintenance" };
  return <span className={`fl-st fl-st-${s}`}><i/>{L[s] || s}</span>;
}

function FleetPage({ go, setActiveSite, setActiveMic, setWsStage }) {
  const d = useRes();
  const wos = window.useWOs ? window.useWOs() : [];
  const [tab, setTab] = uSFL("crew");
  const [kind, setKind] = uSFL("all");
  const [sel, setSel] = uSFL(null);
  const [adding, setAdding] = uSFL(null);
  const insps = window.INSPECTIONS || [];
  const crew = [...d.people, ...d.companies].filter(r => kind === "all" || r.kind === kind || (kind === "contractor" && r.kind === "company"));
  const openFor = (r) => wos.filter(w => w.assignee === resLabel(r) && w.status !== "verified");
  const inspFor = (r) => insps.filter(i => i.lead === r.name || (r.kind === "company" && i.contractor === r.name));
  const droneWos = (dr) => wos.filter(w => w.drone && w.drone.startsWith(dr.id) && w.status !== "verified");
  const droneInsps = (dr) => insps.filter(i => (i.drone || "").startsWith(dr.id + " "));
  const certAlerts = d.people.flatMap(p => p.certs.filter(c => resExpiring(c[1]) !== "ok").map(c => [p, c]));
  const k = {
    pilots: d.people.filter(p => p.skills.includes("Pilot")).length,
    avail: d.people.filter(p => p.status === "available").length,
    drones: d.drones.filter(x => x.status === "available").length,
    maint: d.drones.filter(x => x.status === "maintenance" || x.nextMaint < window.skyAdd(14)).length,
  };
  const cur = sel && ([...d.people, ...d.companies, ...d.drones].find(x => x.id === sel));
  const openWo = (w) => { setActiveSite(w.siteId); go("workorders"); };

  return (
    <div className="page fl">
      <div className="page-head">
        <div className="title"><div className="kicker">Operate · resources</div><h1>Fleet & crew</h1>
          <div className="sub">Drones, pilots, technicians and contractor companies. Every work order and inspection is assigned from here.</div></div>
        <div className="actions">
          <button className="btn btn-secondary" onClick={() => setAdding("drone")}><Icon name="drone" size={12}/>Add drone</button>
          <button className="btn btn-primary" onClick={() => setAdding("person")}><Icon name="plus" size={12}/>Add person or company</button>
        </div>
      </div>

      <div className="wo-kpis">
        <div className="wo-kpi"><span className="caps">Pilots</span><b className="mono">{k.pilots}</b><em>{d.people.filter(p => p.skills.includes("Pilot") && p.kind !== "employee").length} external</em></div>
        <div className="wo-kpi is-ok"><span className="caps">Crew available today</span><b className="mono">{k.avail}/{d.people.length}</b><em>{d.companies.length} contractor companies</em></div>
        <div className="wo-kpi"><span className="caps">Drones ready</span><b className="mono">{k.drones}/{d.drones.length}</b><em>{d.drones.filter(x => x.status === "deployed").length} deployed</em></div>
        <div className="wo-kpi is-crit"><span className="caps">Attention</span><b className="mono">{k.maint + certAlerts.length}</b><em>{k.maint} maintenance · {certAlerts.length} certifications</em></div>
      </div>

      {certAlerts.length > 0 && <div className="fl-alert"><Icon name="alert" size={13}/>
        <span>{certAlerts.map(([p, c]) => `${p.name}: ${c[0]} ${resExpiring(c[1]) === "expired" ? "expired" : "expires"} ${c[1]}`).join(" · ")}</span></div>}

      <div className="tabs" style={{ marginBottom: 12 }}>
        {[["crew", `Crew & companies · ${d.people.length + d.companies.length}`], ["drones", `Drones · ${d.drones.length}`]].map(([v, l]) => <button key={v} className={tab === v ? "on" : ""} onClick={() => setTab(v)}>{l}</button>)}
      </div>

      {tab === "crew" && <>
        <div className="wo-tb"><div className="ps-seg">{[["all","All"],["employee","Employees"],["freelancer","Freelancers"],["contractor","Contractors & companies"]].map(([v,l]) => <button key={v} className={kind === v ? "on" : ""} onClick={() => setKind(v)}>{l}</button>)}</div></div>
        <div className="card"><table className="tbl">
          <thead><tr><th>Name</th><th>Type</th><th>Role · service</th><th>Organisation</th><th>Region</th><th>Skills</th><th>Status</th><th className="r">Open WOs</th></tr></thead>
          <tbody>{crew.map(r => (
            <tr key={r.id} className={sel === r.id ? "sel" : ""} onClick={() => setSel(r.id)}>
              <td><b>{r.name}</b></td>
              <td><ResKind k={r.kind}/></td>
              <td className="sec">{r.kind === "company" ? r.service : r.role}</td>
              <td className="sec">{r.kind === "company" ? `${r.headcount} staff` : r.org}</td>
              <td className="sec">{r.region}</td>
              <td><div className="fl-skills">{r.skills.map(s => <span key={s}>{s}</span>)}</div></td>
              <td><ResStatus s={r.status}/></td>
              <td className="r mono">{openFor(r).length || "—"}</td>
            </tr>))}</tbody></table></div>
      </>}

      {tab === "drones" && <div className="fl-drones">{d.drones.map(dr => (
        <button key={dr.id} className={`fl-dc ${sel === dr.id ? "on" : ""}`} onClick={() => setSel(dr.id)}>
          <div className="fl-dc-hd"><span className="mono fl-dc-id">{dr.id}</span><ResStatus s={dr.status}/></div>
          <div className="fl-dc-m">{dr.model}<span> · {dr.payload}</span></div>
          <div className="fl-dc-o">{dr.owner === "Iberdrola O&M" ? "Own fleet" : `Contractor · ${dr.owner}`} · {dr.base}</div>
          <div className="fl-dc-g">
            <div><span className="caps">Flight hours</span><b className="mono">{dr.hours}</b></div>
            <div><span className="caps">Flights</span><b className="mono">{dr.flights.toLocaleString()}</b></div>
            <div><span className="caps">Next service</span><b className={`mono ${dr.nextMaint < window.skyAdd(14) ? "warn" : ""}`}>{dr.nextMaint}</b></div>
          </div>
          {(() => { const b = droneBatteries(dr); const avg = Math.round(b.reduce((a, x) => a + x.health, 0) / b.length); const bad = b.filter(x => x.status === "degraded" || x.status === "retired").length;
            return <div className="fl-dc-batt"><Icon name="zap" size={10}/><span>{b.length} batteries · avg health</span><b className={`mono ${avg < 80 ? "warn" : ""}`}>{avg}%</b>{bad > 0 && <em>{bad} degraded</em>}</div>; })()}
          {dr.reason && dr.status !== "available" && <div className={`fl-dc-note fl-dc-note-${dr.status}`}><Icon name={dr.status === "deployed" ? "send" : "alert"} size={10}/><span><b>{dr.reason.cat}</b> · {dr.reason.text}</span></div>}
        </button>))}</div>}

      {cur && cur.model && <DroneDrawer dr={cur} onClose={() => setSel(null)} wos={droneWos(cur)} insps={droneInsps(cur)} openWo={openWo} openInsp={(i) => { setActiveSite(i.siteId); setActiveMic(i.id); setWsStage("plan"); go("workspace"); }}/>}
      {cur && !cur.model && <>
        <div className="wo-scrim" onClick={() => setSel(null)}/>
        <aside className="wo-drawer" role="dialog" aria-label={cur.name || cur.id}>
          <div className="wo-dr-hd">
            <div>
              <div className="wo-dr-id">{cur.model ? <span className="mono">{cur.id}</span> : <ResKind k={cur.kind}/>}<ResStatus s={cur.status}/></div>
              <div className="wo-dr-t">{cur.model ? `${cur.model} · ${cur.payload}` : cur.name}</div>
              <div className="sec wo-dr-s">{cur.model ? `${cur.owner} · ${cur.base}` : cur.kind === "company" ? cur.service : `${cur.role} · ${cur.org}`}</div>
            </div>
            <button className="ask-hd-btn" onClick={() => setSel(null)}><Icon name="x" size={13}/></button>
          </div>
          <div className="wo-dr-body">
            <div className="wo-dr-grid">
              <label className="field"><span className="caps">Status</span>
                <select className="sel" value={cur.status} onChange={e => resStore.set(x => { const key = cur.model ? "drones" : cur.kind === "company" ? "companies" : "people"; return { ...x, [key]: x[key].map(r => r.id === cur.id ? { ...r, status: e.target.value } : r) }; })}>
                  {(cur.model ? ["available","deployed","maintenance"] : ["available","on_mission","on_job"]).map(s => <option key={s} value={s}>{s.replace("_", " ")}</option>)}
                </select></label>
              {!cur.model && <div className="field"><span className="caps">Contact</span><div className="inp mono">{cur.phone || cur.contract}</div></div>}
              {cur.model && <div className="field"><span className="caps">Serial</span><div className="inp mono">{cur.serial}</div></div>}
            </div>

            {cur.model ? <div className="wo-dr-sec"><div className="caps">Airworthiness</div>
              {[["Flight hours", cur.hours], ["Flights", cur.flights.toLocaleString()], ["Batteries", cur.batt], ["Firmware", cur.firmware], ["Next service", cur.nextMaint], ["Insurance until", cur.insurance]].map(([a, b]) => <div key={a} className="ps-kv"><span>{a}</span><b className="mono">{b}</b></div>)}
            </div> : cur.kind === "company" ? <div className="wo-dr-sec"><div className="caps">Contract</div>
              {[["Terms", cur.contract], ["SLA", cur.sla], ["Insurance until", cur.insurance], ["Headcount", cur.headcount], ["Coverage", cur.region]].map(([a, b]) => <div key={a} className="ps-kv"><span>{a}</span><b>{b}</b></div>)}
            </div> : <div className="wo-dr-sec"><div className="caps">Certifications</div>
              {cur.certs.map(([c, dt]) => <div key={c} className={`fl-cert fl-cert-${resExpiring(dt)}`}><Icon name={resExpiring(dt) === "ok" ? "check_circle" : "alert"} size={12}/><span>{c}</span><b className="mono">{dt}</b></div>)}
              {cur.rate && <div className="ps-kv"><span>Day rate</span><b className="mono">€{cur.rate}</b></div>}
            </div>}

            <div className="wo-dr-sec"><div className="caps">Work orders · {(cur.model ? droneWos(cur) : openFor(cur)).length} open</div>
              {(cur.model ? droneWos(cur) : openFor(cur)).map(w => (
                <button key={w.id} className="wo-src" onClick={() => openWo(w)}><span className={`wo-prio wo-prio-${w.prio}`}>{w.prio}</span><span><b className="mono">{w.id}</b> {w.title}</span><Icon name="arrow_right" size={11}/></button>))}
              {(cur.model ? droneWos(cur) : openFor(cur)).length === 0 && <div className="sec" style={{ fontSize: 11 }}>No open work orders.</div>}
              {!cur.model && <button className="btn btn-secondary btn-xs" onClick={() => window.dispatchEvent(new CustomEvent("skyops:new-wo", { detail: { assignee: resLabel(cur) } }))}><Icon name="plus" size={11}/>Assign new work order</button>}
            </div>

            <div className="wo-dr-sec"><div className="caps">Inspections</div>
              {(cur.model ? droneInsps(cur) : inspFor(cur)).slice(0, 5).map(i => (
                <button key={i.id} className="wo-src" onClick={() => { setActiveSite(i.siteId); setActiveMic(i.id); setWsStage("plan"); go("workspace"); }}>
                  <Icon name="crosshair" size={12}/><span><b className="mono">{i.id}</b> · {(window.SITES || []).find(s => s.id === i.siteId)?.name} · {i.status}</span><Icon name="arrow_right" size={11}/></button>))}
              {(cur.model ? droneInsps(cur) : inspFor(cur)).length === 0 && <div className="sec" style={{ fontSize: 11 }}>Not assigned to any inspection.</div>}
            </div>
          </div>
        </aside>
      </>}

      {adding && <ResAddModal kind={adding} onClose={() => setAdding(null)}/>}
    </div>
  );
}

function DroneDrawer({ dr, onClose, wos, insps, openWo, openInsp }) {
  const [edit, setEdit] = uSFL(false);
  const [f, setF] = uSFL(dr);
  const [st, setSt] = uSFL(null);
  const [note, setNote] = uSFL("");
  uEFL(() => { setF(dr); setEdit(false); setSt(null); }, [dr.id]);
  const save = (patch) => resStore.set(x => ({ ...x, drones: x.drones.map(d => d.id === dr.id ? { ...d, ...patch } : d) }));
  const bats = droneBatteries(dr);
  const setBats = (nb) => save({ batteries: nb, batt: `${(bats[0]?.id || "BAT").split("-")[0]} ×${nb.filter(b => b.status !== "retired").length}` });
  const log = dr.log || [];
  const addLog = (type, text) => save({ log: [[RES_TODAY, type, text, "You"], ...log] });
  const avgH = Math.round(bats.filter(b => b.status !== "retired").reduce((a, b) => a + b.health, 0) / Math.max(1, bats.filter(b => b.status !== "retired").length));
  const endurance = Math.round(42 * avgH / 100);
  const setF1 = (k) => (e) => setF(x => ({ ...x, [k]: e.target.value }));
  const applyStatus = () => {
    if (st.status !== "available" && !st.text.trim()) return;
    save({ status: st.status, reason: st.status === "available" ? null : { cat: st.cat, text: st.text, since: st.since, back: st.back, by: "You" },
      log: [[RES_TODAY, st.status === "available" ? "ok" : st.cat.startsWith("Fault") || st.cat.startsWith("Crash") ? "fault" : "maint", `Status → ${DR_STATUS[st.status]}${st.status === "available" ? "" : " · " + st.cat + ": " + st.text}`, "You"], ...log] });
    setSt(null);
  };
  const BST = { ok: "OK", in_use: "In use", charging: "Charging", degraded: "Degraded", swollen: "Swollen · do not fly", retired: "Retired" };
  return (<>
    <div className="wo-scrim" onClick={onClose}/>
    <aside className="wo-drawer dd" role="dialog" aria-label={dr.id}>
      <div className="wo-dr-hd">
        <div>
          <div className="wo-dr-id"><span className="mono">{dr.id}</span><span className={`fl-st fl-st-${dr.status}`}><i/>{DR_STATUS[dr.status] || dr.status}</span></div>
          <div className="wo-dr-t">{dr.model} · {dr.payload}</div>
          <div className="sec wo-dr-s">{dr.owner} · {dr.base} · <span className="mono">{dr.serial}</span></div>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <button className={`btn btn-xs ${edit ? "btn-primary" : "btn-secondary"}`} onClick={() => { if (edit) { save({ ...f, hours: +f.hours, flights: +f.flights }); addLog("edit", "Drone details edited"); } setEdit(!edit); }}><Icon name={edit ? "check" : "settings"} size={11}/>{edit ? "Save" : "Edit"}</button>
          {edit && <button className="btn btn-ghost btn-xs" onClick={() => { setF(dr); setEdit(false); }}>Cancel</button>}
          <button className="ask-hd-btn" onClick={onClose}><Icon name="x" size={13}/></button>
        </div>
      </div>
      <div className="wo-dr-body">
        {/* Status + reason */}
        <div className={`dd-status dd-status-${dr.status}`}>
          <div className="dd-status-hd">
            <span className="caps">Status</span>
            {!st && <button className="btn btn-secondary btn-xs" onClick={() => setSt({ status: dr.status === "available" ? "maintenance" : "available", cat: dr.reason?.cat || "Fault / breakdown", text: "", since: RES_TODAY, back: "" })}>Change status</button>}
          </div>
          {!st && (dr.reason && dr.status !== "available" ? <div className="dd-reason">
            <b>{dr.reason.cat}</b><p>{dr.reason.text}</p>
            <div className="dd-reason-m mono"><span>since {dr.reason.since}</span>{dr.reason.back && <span>expected back {dr.reason.back}</span>}<span>by {dr.reason.by}</span></div>
          </div> : <div className="sec" style={{ fontSize: 12 }}>{DR_STATUS[dr.status]} · ready to be assigned to inspections and work orders.</div>)}
          {st && <div className="dd-form">
            <div className="ps-seg dd-seg">{Object.entries(DR_STATUS).map(([k, l]) => <button key={k} className={st.status === k ? "on" : ""} onClick={() => setSt(x => ({ ...x, status: k }))}>{l}</button>)}</div>
            {st.status !== "available" && <>
              <label className="field"><span>Reason *</span><select className="sel" value={st.cat} onChange={e => setSt(x => ({ ...x, cat: e.target.value }))}>{DR_REASONS.map(c => <option key={c}>{c}</option>)}</select></label>
              <label className="field"><span>Description *</span><textarea className="inp" rows={3} style={{ height: "auto", resize: "vertical" }} value={st.text} onChange={e => setSt(x => ({ ...x, text: e.target.value }))} placeholder="What happened, symptoms, where, which mission"/></label>
              <div className="wo-dr-grid">
                <label className="field"><span>Since</span><input className="inp" type="date" value={st.since} onChange={e => setSt(x => ({ ...x, since: e.target.value }))}/></label>
                <label className="field"><span>Expected back</span><input className="inp" type="date" value={st.back} onChange={e => setSt(x => ({ ...x, back: e.target.value }))}/></label>
              </div>
            </>}
            <div style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
              <button className="btn btn-ghost btn-xs" onClick={() => setSt(null)}>Cancel</button>
              <button className="btn btn-primary btn-xs" disabled={st.status !== "available" && !st.text.trim()} onClick={applyStatus}><Icon name="check" size={11}/>Apply</button>
            </div>
          </div>}
        </div>

        {/* Details */}
        <div className="wo-dr-sec"><div className="caps">Airframe</div>
          {edit ? <div className="wo-dr-grid">
            {[["model","Model"],["payload","Payload"],["owner","Owner"],["serial","Serial"],["base","Base"],["firmware","Firmware"],["hours","Flight hours"],["flights","Flights"]].map(([k, l]) => <label key={k} className="field"><span>{l}</span><input className="inp" value={f[k]} onChange={setF1(k)}/></label>)}
            <label className="field"><span>Next service</span><input className="inp" type="date" value={f.nextMaint} onChange={setF1("nextMaint")}/></label>
            <label className="field"><span>Insurance until</span><input className="inp" type="date" value={f.insurance} onChange={setF1("insurance")}/></label>
          </div> : [["Flight hours", dr.hours], ["Flights", (+dr.flights).toLocaleString()], ["Firmware", dr.firmware], ["Next service", dr.nextMaint], ["Insurance until", dr.insurance]].map(([a, b]) => <div key={a} className="ps-kv"><span>{a}</span><b className="mono">{b}</b></div>)}
        </div>

        {/* Batteries */}
        <div className="wo-dr-sec">
          <div className="dd-bat-hd"><span className="caps">Batteries · {bats.filter(b => b.status !== "retired").length} in service</span>
            <span className="mono sec">avg health {avgH}% · ≈ {endurance} min / flight</span>
            <button className="btn btn-ghost btn-xs" onClick={() => setBats([...bats, { id: `${(bats[0]?.id || "BAT-00A").slice(0, -1)}${String.fromCharCode(65 + bats.length)}`, cycles: 0, health: 100, last: RES_TODAY, status: "ok" }])}><Icon name="plus" size={10}/>Add</button>
          </div>
          <div className="dd-bats">
            {bats.map((b, i) => (
              <div key={b.id} className={`dd-bat dd-bat-${b.status}`}>
                <span className="mono dd-bat-id">{b.id}</span>
                <span className="dd-bat-bar"><i style={{ width: b.health + "%", background: b.health < 70 ? "var(--sev-critical)" : b.health < 85 ? "var(--sev-medium)" : "var(--sev-low)" }}/></span>
                <input className="mono dd-bat-h" type="number" min="0" max="100" value={b.health} onChange={e => setBats(bats.map((x, j) => j === i ? { ...x, health: +e.target.value, status: +e.target.value < 70 && x.status === "ok" ? "degraded" : x.status } : x))}/>
                <span className="mono sec dd-bat-c">{b.cycles} cyc</span>
                <select className="sel dd-bat-s" value={b.status} onChange={e => { setBats(bats.map((x, j) => j === i ? { ...x, status: e.target.value } : x)); if (["swollen","retired","degraded"].includes(e.target.value)) addLog("battery", `${b.id} → ${BST[e.target.value]}`); }}>
                  {Object.entries(BST).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
                </select>
              </div>
            ))}
          </div>
          {bats.some(b => b.status === "swollen") && <div className="fl-alert" style={{ margin: 0 }}><Icon name="alert" size={12}/><span>Swollen battery in pack — quarantine and do not fly. Drone should not be assigned until replaced.</span></div>}
        </div>

        {/* Log */}
        <div className="wo-dr-sec"><div className="caps">Maintenance & incident log</div>
          <div className="dd-note"><input className="inp" value={note} onChange={e => setNote(e.target.value)} placeholder="Add a note — inspection, repair, part replaced…" onKeyDown={e => { if (e.key === "Enter" && note.trim()) { addLog("note", note.trim()); setNote(""); } }}/>
            <button className="btn btn-secondary btn-xs" disabled={!note.trim()} onClick={() => { addLog("note", note.trim()); setNote(""); }}>Add</button></div>
          {log.length === 0 && <div className="sec" style={{ fontSize: 11 }}>No entries yet.</div>}
          {log.map(([d, t, txt, by], i) => <div key={i} className={`dd-log dd-log-${t}`}><i/><span className="mono dd-log-d">{d}</span><span className="dd-log-t">{txt}</span><span className="sec dd-log-b">{by}</span></div>)}
        </div>

        <div className="wo-dr-sec"><div className="caps">Work orders · {wos.length} open</div>
          {wos.map(w => <button key={w.id} className="wo-src" onClick={() => openWo(w)}><span className={`wo-prio wo-prio-${w.prio}`}>{w.prio}</span><span><b className="mono">{w.id}</b> {w.title}</span><Icon name="arrow_right" size={11}/></button>)}
          {wos.length === 0 && <div className="sec" style={{ fontSize: 11 }}>No open work orders.</div>}
        </div>
        <div className="wo-dr-sec"><div className="caps">Inspections</div>
          {insps.slice(0, 5).map(i => <button key={i.id} className="wo-src" onClick={() => openInsp(i)}><Icon name="crosshair" size={12}/><span><b className="mono">{i.id}</b> · {(window.SITES || []).find(x => x.id === i.siteId)?.name} · {i.status}</span><Icon name="arrow_right" size={11}/></button>)}
          {insps.length === 0 && <div className="sec" style={{ fontSize: 11 }}>Not assigned to any inspection.</div>}
        </div>
      </div>
    </aside>
  </>);
}

function ResAddModal({ kind, onClose }) {
  const [t, setT] = uSFL(kind === "drone" ? "drone" : "employee");
  const [f, setF] = uSFL({ name: "", role: "Pilot", org: "Iberdrola O&M", region: "", service: "", model: "DJI M350 RTK", payload: "Zenmuse H30T", owner: "Iberdrola O&M", base: "Évora depot", skills: ["Pilot"] });
  const set = (k) => (e) => setF(x => ({ ...x, [k]: e.target.value }));
  const save = () => {
    resStore.set(d => {
      if (t === "drone") return { ...d, drones: [...d.drones, { id: `SKY-D${String(d.drones.length + 1).padStart(2, "0")}`, model: f.model, payload: f.payload, owner: f.owner, serial: "—", hours: 0, flights: 0, batt: "—", base: f.base, status: "available", nextMaint: "2027-04-22", firmware: "—", insurance: "2027-10-22" }] };
      if (t === "company") return { ...d, companies: [...d.companies, { id: `C-${String(d.companies.length + 1).padStart(2, "0")}`, name: f.name, role: "contractor", kind: "company", service: f.service, region: f.region, contract: "—", sla: "—", insurance: "—", headcount: 1, skills: f.skills, status: "available" }] };
      return { ...d, people: [...d.people, { id: `P-${String(d.people.length + 1).padStart(2, "0")}`, name: f.name, role: f.role, kind: t, org: t === "freelancer" ? "Self-employed" : f.org, region: f.region, phone: "—", rate: null, certs: [], skills: f.skills, status: "available" }] };
    });
    onClose();
  };
  const SK = ["Pilot", "Thermography", "Electrical", "Module replace", "Cleaning", "Vegetation", "Tracker"];
  return (
    <div className="ni-scrim" onClick={onClose}><div className="ni-modal" onClick={e => e.stopPropagation()} role="dialog">
      <div className="ni-hd"><div><div className="kicker">Fleet & crew</div><h3>{t === "drone" ? "Add drone" : "Add person or company"}</h3></div><button className="ask-hd-btn" onClick={onClose}><Icon name="x" size={13}/></button></div>
      <div className="ni-body">
        {kind !== "drone" && <div className="ps-seg">{[["employee","Employee"],["freelancer","Freelancer"],["contractor","Contractor staff"],["company","Company"]].map(([v,l]) => <button key={v} className={t === v ? "on" : ""} onClick={() => setT(v)}>{l}</button>)}</div>}
        <div className="ni-grid">
          {t === "drone" ? <>
            <label className="field"><span>Model</span><select className="sel" value={f.model} onChange={set("model")}><option>DJI M350 RTK</option><option>DJI M300 RTK</option><option>DJI Mavic 3T</option><option>DJI Matrice 4T</option></select></label>
            <label className="field"><span>Payload</span><select className="sel" value={f.payload} onChange={set("payload")}><option>Zenmuse H30T</option><option>Zenmuse H20T</option><option>Integrated</option></select></label>
            <label className="field"><span>Owner</span><input className="inp" value={f.owner} onChange={set("owner")}/></label>
            <label className="field"><span>Base</span><input className="inp" value={f.base} onChange={set("base")}/></label>
          </> : <>
            <label className="field ni-span"><span>{t === "company" ? "Company name" : "Full name"}</span><input className="inp" value={f.name} onChange={set("name")}/></label>
            {t === "company" ? <label className="field ni-span"><span>Service</span><input className="inp" value={f.service} onChange={set("service")} placeholder="e.g. Module cleaning"/></label>
              : <label className="field"><span>Role</span><input className="inp" value={f.role} onChange={set("role")}/></label>}
            {t === "contractor" || t === "employee" ? <label className="field"><span>{t === "contractor" ? "Contractor company" : "Department"}</span><input className="inp" value={f.org} onChange={set("org")}/></label> : null}
            <label className="field"><span>Region</span><input className="inp" value={f.region} onChange={set("region")}/></label>
            <div className="field ni-span"><span>Skills</span><div className="fl-skills fl-skills-pick">{SK.map(s => <button key={s} className={f.skills.includes(s) ? "on" : ""} onClick={() => setF(x => ({ ...x, skills: x.skills.includes(s) ? x.skills.filter(y => y !== s) : [...x.skills, s] }))}>{s}</button>)}</div></div>
          </>}
        </div>
      </div>
      <div className="ni-ft"><span className="grow"/><button className="btn btn-ghost" onClick={onClose}>Cancel</button><button className="btn btn-primary" disabled={t !== "drone" && !f.name.trim()} onClick={save}><Icon name="check" size={12}/>Add</button></div>
    </div></div>
  );
}

Object.assign(window, { DroneDrawer, droneBatteries, DR_STATUS, FleetPage, resStore, useRes, resAssignees, resByLabel, resPilots, resDrones, droneLabel, resLabel, ResKind, RES_KIND });
