// ============ ADMIN VIEWS: Fleet, Devices (import / bulk) ============
const { useState: useStateAd } = React;

function lastSeen(d) {
  if (!d.lastSeen) return [d.online ? "—" : "Hors ligne", d.online ? "ok" : "off"];
  const secs = Math.max(0, Math.round((Date.now() - new Date(d.lastSeen).getTime()) / 1000));
  const label = secs < 60 ? `il y a ${secs} s`
              : secs < 3600 ? `il y a ${Math.round(secs / 60)} min`
              : secs < 86400 ? `il y a ${Math.round(secs / 3600)} h`
              : `il y a ${Math.round(secs / 86400)} j`;
  return [label, d.online ? "ok" : "off"];
}

// ---- FLEET ----
// What a device is, in a word, for tables that list every kind.
function kindLabel(d) {
  if ((d.kind || "ir") === "ir") return "Climatiseur";
  if (d.kind === "sensor") return "Capteur";
  const M = window.STMeasures;
  const med = M ? M.mediumOf(d).label : "";
  return med ? "Compteur · " + med : "Compteur";
}

function Fleet({ devices, units, onOpen }) {
  const D = window.STData;
  const unitName = (id) => ((units || []).find(u => u.id === id) || {}).name || "—";
  const online = devices.filter(d => d.online).length;
  const offline = devices.length - online;
  // "Active" means an air conditioner that is running: a meter is never on or off.
  const isAc = (d) => (d.kind || "ir") === "ir";
  const active = devices.filter(d => isAc(d) && d.online && d.power).length;
  const [filter, setFilter] = useStateAd("all");

  const tiles = [
    { id: "all", k: "Total", v: devices.length, ic: "devices", tone: "ink" },
    { id: "online", k: "En ligne", v: online, ic: "wifi", tone: "ok" },
    { id: "active", k: "Climatiseurs en marche", v: active, ic: "power", tone: "accent" },
    { id: "offline", k: "Hors ligne", v: offline, ic: "wifiOff", tone: "warn" },
  ];
  const rows = devices.filter(d => filter === "all" || (filter === "online" && d.online) || (filter === "offline" && !d.online) || (filter === "active" && isAc(d) && d.online && d.power));

  return React.createElement("div", { className: "view" },
    React.createElement("div", { className: "view-head" },
      React.createElement("div", null,
        React.createElement("h1", { className: "serif view-title" }, "Supervision du parc"),
        React.createElement("p", { className: "view-sub" }, "État temps réel de tous les appareils connectés")
      ),
      React.createElement("span", { className: "live-pill" }, React.createElement("span", { className: "live-dot" }), "Temps réel")
    ),
    React.createElement("div", { className: "summary summary-4" },
      tiles.map(t => React.createElement("button", {
        key: t.id, className: "sum-card sum-btn" + (filter === t.id ? " sel" : ""), onClick: () => setFilter(t.id),
      },
        React.createElement("span", { className: "sum-ic ic-" + t.tone }, React.createElement(Icon, { name: t.ic, size: 18 })),
        React.createElement("div", null,
          React.createElement("div", { className: "sum-v serif" }, t.v),
          React.createElement("div", { className: "sum-k" }, t.k)
        )
      ))
    ),
    React.createElement("div", { className: "panel table-wrap" },
      React.createElement("table", { className: "tbl" },
        React.createElement("thead", null, React.createElement("tr", null,
          ["Appareil", "Identifiant MQTT", "Logement", "Firmware", "État", "Type / mode", "Dernier signal"].map((h, i) =>
            React.createElement("th", { key: i, style: i >= 4 ? { textAlign: "center" } : {} }, h)))),
        React.createElement("tbody", null,
          rows.map(d => {
            const [seen, tone] = lastSeen(d);
            const on = isAc(d) && d.online && d.power;
            return React.createElement("tr", {
              key: d.id, className: "row-click",
              title: "Ouvrir la maintenance de cet appareil",
              onClick: () => onOpen && onOpen(d.id),
            },
              React.createElement("td", null, React.createElement("div", { className: "td-dev" }, React.createElement(MiniDot, { online: d.online }), d.name)),
              React.createElement("td", { className: "mono td-mqtt" }, d.mqtt),
              React.createElement("td", { className: "td-muted" }, unitName(d.unit)),
              React.createElement("td", { className: "mono td-mqtt" }, d.fw || "—"),
              React.createElement("td", { style: { textAlign: "center" } }, !isAc(d)
                ? React.createElement("span", { className: "badge " + (d.online ? "badge-ok" : "badge-muted") }, d.online ? "En ligne" : "Hors ligne")
                : on ? React.createElement("span", { className: "badge badge-ok" }, "Marche") : React.createElement("span", { className: "badge badge-muted" }, d.online ? "Arrêt" : "Hors ligne")),
              React.createElement("td", { style: { textAlign: "center" } }, !isAc(d)
                ? React.createElement("span", { className: "chip-kind" }, kindLabel(d))
                : on ? React.createElement("span", { className: "chip-mode" + (d.mode === "heat" ? " heat" : "") }, D.modeLabel(d.mode)) : "—"),
              React.createElement("td", { style: { textAlign: "center" } }, React.createElement("span", { className: "seen seen-" + tone }, seen))
            );
          }))
      )
    )
  );
}

// ---- ADMIN DEVICES (import + bulk) ----
const IMPORT_ROWS = [
  { mqtt: "AC-GUE-G25-A", name: "Clim — Studio", unit: "Appart G25", status: "nouveau" },
  { mqtt: "AC-GUE-G26-A", name: "Clim — Séjour", unit: "Appart G26", status: "nouveau" },
  { mqtt: "AC-MED-401-A", name: "Clim — Terrasse", unit: "Suite 401", status: "nouveau" },
  { mqtt: "AC-MED-201-A", name: "Clim — Séjour", unit: "Studio 201", status: "doublon" },
  { mqtt: "AC-GUE-G27-A", name: "Clim — Chambre", unit: "Appart G27", status: "nouveau" },
];

function AdminDevices({ devices, units, onEdit, onDeleted, showToast }) {
  const D = window.STData;
  const unitName = (id) => ((units || []).find(u => u.id === id) || {}).name || "—";
  // Read the prop directly. Copying it into state froze this table at whatever
  // the fleet looked like when the page mounted, so a device deleted anywhere
  // stayed on screen until you navigated away and back.
  const list = devices;
  const [sel, setSel] = useStateAd([]);
  const [imp, setImp] = useStateAd(false);
  const [busy, setBusy] = useStateAd(false);

  const toggle = (id) => setSel(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
  const allSel = sel.length === list.length && list.length > 0;
  const toggleAll = () => setSel(allSel ? [] : list.map(d => d.id));

  // This used to filter the local array and nothing else: the rows vanished,
  // the devices were never deleted, and they reappeared on the next visit.
  const del = async () => {
    const names = list.filter(d => sel.includes(d.id)).map(d => d.name);
    if (!confirm(`Retirer ${sel.length} appareil${sel.length > 1 ? "s" : ""} du parc ?\n\n${names.join("\n")}`)) return;
    setBusy(true);
    let failed = 0;
    for (const id of sel) {
      try { await STApi.deleteDevice(id); }
      catch { failed++; }
    }
    setBusy(false);
    setSel([]);
    if (showToast) {
      showToast(failed
        ? `${sel.length - failed} retiré(s), ${failed} en échec`
        : `${sel.length} appareil${sel.length > 1 ? "s" : ""} retiré${sel.length > 1 ? "s" : ""}`);
    }
    if (onDeleted) onDeleted();
  };

  const doImport = () => {
    const news = IMPORT_ROWS.filter(r => r.status === "nouveau").map((r, i) => ({
      id: "imp" + i, name: r.name, mqtt: r.mqtt, unit: "g11", online: false, power: false, temp: 26, target: 24, mode: "cool", fan: "auto", hum: 50, watt: 0, _new: true,
    }));
    setList(l => [...l, ...news]); setImp(false);
  };

  return React.createElement("div", { className: "view" },
    React.createElement("div", { className: "view-head" },
      React.createElement("div", null,
        React.createElement("h1", { className: "serif view-title" }, "Gestion du parc"),
        React.createElement("p", { className: "view-sub" }, list.length, " appareils provisionnés")
      ),
      React.createElement("div", { className: "head-actions" },
        sel.length > 0 && React.createElement("button", { className: "btn btn-danger", onClick: del, disabled: busy },
          React.createElement(Icon, { name: "trash", size: 15 }),
          busy ? "Suppression…" : `Retirer (${sel.length})`),
        React.createElement("button", { className: "btn btn-ghost" }, React.createElement(Icon, { name: "download", size: 15 }), "Exporter"),
        React.createElement("button", { className: "btn btn-primary", onClick: () => setImp(true) }, React.createElement(Icon, { name: "upload", size: 15 }), "Importer")
      )
    ),
    React.createElement("div", { className: "panel table-wrap" },
      React.createElement("table", { className: "tbl tbl-sel" },
        React.createElement("thead", null, React.createElement("tr", null,
          React.createElement("th", { style: { width: 40 } }, React.createElement("input", { type: "checkbox", checked: allSel, onChange: toggleAll })),
          ["Appareil", "Identifiant MQTT", "Logement", "Provisionné"].map((h, i) => React.createElement("th", { key: i }, h)),
          React.createElement("th", null))),
        React.createElement("tbody", null,
          list.map(d => React.createElement("tr", { key: d.id, className: sel.includes(d.id) ? "row-sel" : "" },
            React.createElement("td", null, React.createElement("input", { type: "checkbox", checked: sel.includes(d.id), onChange: () => toggle(d.id) })),
            React.createElement("td", null, React.createElement("div", { className: "td-dev" }, d.name, d._new && React.createElement("span", { className: "tag-new" }, "nouveau"))),
            React.createElement("td", { className: "mono td-mqtt" }, d.mqtt),
            React.createElement("td", { className: "td-muted" }, unitName(d.unit)),
            React.createElement("td", { className: "td-muted" },
              React.createElement("span", { className: "badge " + (d.online ? "badge-ok" : "badge-muted") },
                d.online ? "En ligne" : "Hors ligne")),
            React.createElement("td", { style: { textAlign: "right" } },
              React.createElement("button", {
                className: "icon-btn-sm", title: "Paramètres de l'appareil",
                onClick: () => onEdit && onEdit(d),
              }, React.createElement(Icon, { name: "settings", size: 15 })))
          )))
      )
    ),
    imp && React.createElement("div", { className: "modal-scrim", onClick: () => setImp(false) },
      React.createElement("div", { className: "modal modal-wide", onClick: e => e.stopPropagation() },
        React.createElement("div", { className: "modal-head" },
          React.createElement("div", null,
            React.createElement("h3", { className: "serif" }, "Importer des appareils"),
            React.createElement("p", { className: "import-sub" }, "Aperçu du fichier ", React.createElement("span", { className: "mono" }, "parc-juin-2026.xlsx"))
          ),
          React.createElement("button", { className: "icon-btn-sm", onClick: () => setImp(false) }, React.createElement(Icon, { name: "x", size: 16 }))
        ),
        React.createElement("div", { className: "import-drop" },
          React.createElement(Icon, { name: "upload", size: 22, className: "import-drop-ic" }),
          React.createElement("span", null, "Glissez un fichier Excel ou CSV, ou ", React.createElement("b", null, "parcourez")),
          React.createElement("span", { className: "mono import-fmt" }, "colonnes : mqtt_id · nom · logement")
        ),
        React.createElement("table", { className: "tbl import-tbl" },
          React.createElement("thead", null, React.createElement("tr", null,
            ["Identifiant MQTT", "Nom", "Logement", "Statut"].map((h, i) => React.createElement("th", { key: i }, h)))),
          React.createElement("tbody", null,
            IMPORT_ROWS.map((r, i) => React.createElement("tr", { key: i, className: r.status === "doublon" ? "row-warn" : "" },
              React.createElement("td", { className: "mono td-mqtt" }, r.mqtt),
              React.createElement("td", null, r.name),
              React.createElement("td", { className: "td-muted" }, r.unit),
              React.createElement("td", null, r.status === "nouveau"
                ? React.createElement("span", { className: "badge badge-ok" }, React.createElement(Icon, { name: "check", size: 12, stroke: 3 }), " Nouveau")
                : React.createElement("span", { className: "badge badge-warn" }, React.createElement(Icon, { name: "alert", size: 12 }), " Doublon — ignoré"))
            )))
        ),
        React.createElement("div", { className: "modal-foot" },
          React.createElement("span", { className: "import-count mono" }, IMPORT_ROWS.filter(r => r.status === "nouveau").length, " nouveaux · 1 doublon ignoré"),
          React.createElement("div", { className: "head-actions" },
            React.createElement("button", { className: "btn btn-ghost", onClick: () => setImp(false) }, "Annuler"),
            React.createElement("button", { className: "btn btn-primary", onClick: doImport }, "Importer ", IMPORT_ROWS.filter(r => r.status === "nouveau").length, " appareils")
          )
        )
      )
    )
  );
}

window.kindLabel = kindLabel;
window.Fleet = Fleet;
window.AdminDevices = AdminDevices;