// ============ AC REMOTE ============
const { useState: useStateR } = React;
const MIN_T = 16, MAX_T = 30;

// Mirrors isMapped() in backend/src/ir/remote-map.ts: a map with nothing in
// it is no map at all.
function isMapped(m) {
  return !!(m && (m.powerOn || m.powerOff || m.powerToggle || m.tempUp || m.tempDown ||
    m.modeCycle || m.fanCycle ||
    Object.values(m.modes || {}).some(Boolean) || Object.values(m.fans || {}).some(Boolean)));
}

function modeColor(mode) {
  if (mode === "heat") return "var(--warm)";
  if (mode === "dry") return "#C9A227";
  if (mode === "fan") return "var(--ink-3)";
  return "var(--accent)"; // cool / auto
}

function Dial({ device }) {
  const frac = (device.target - MIN_T) / (MAX_T - MIN_T);
  const R = 86, C = 2 * Math.PI * R;
  const on = device.online && device.power;
  const col = on ? modeColor(device.mode) : "var(--ink-3)";
  // 270deg arc
  const arc = 0.75;
  const dash = `${C * arc * frac} ${C}`;
  return React.createElement("div", { className: "dial" },
    React.createElement("svg", { viewBox: "0 0 220 220", className: "dial-svg" },
      React.createElement("circle", { cx: 110, cy: 110, r: R, fill: "none", stroke: "var(--line)", strokeWidth: 14, strokeLinecap: "round",
        strokeDasharray: `${C * arc} ${C}`, transform: "rotate(135 110 110)" }),
      React.createElement("circle", { cx: 110, cy: 110, r: R, fill: "none", stroke: col, strokeWidth: 14, strokeLinecap: "round",
        strokeDasharray: dash, transform: "rotate(135 110 110)", style: { transition: "stroke-dasharray .4s cubic-bezier(.2,.8,.2,1), stroke .3s" } })
    ),
    React.createElement("div", { className: "dial-center" },
      React.createElement("div", { className: "dial-temp", style: { color: on ? "var(--ink)" : "var(--ink-3)" } },
        on ? device.target : "—", React.createElement("span", { className: "dial-unit" }, "°C")),
      React.createElement("div", { className: "dial-sub" },
        on ? (STData.modeLabel(device.mode) + (device.temp == null ? "" : ` · ambiant ${device.temp}°`))
           : (device.online ? "Éteint" : "Hors ligne"))
    )
  );
}

function AcRemote({ device, units, map, onChange, onSend, compact }) {
  const D = window.STData;
  const unitName = ((units || []).find(u => u.id === device.unit) || {}).name || "—";
  const on = device.online && device.power;
  const disabled = !device.online;

  // No mapping yet? Leave every control enabled - the firmware's own key names
  // may still work, and greying the whole card out would just look broken.
  //
  // An empty map counts as no mapping. getRemoteMap() answers {} for a device
  // whose buttons were never mapped, and {} is truthy: every control was
  // disabled, so a device the dashboard switched on happily looked dead here.
  // The backend makes the same call with isMapped() and falls back to sending
  // the A/C state to the board.
  const m = isMapped(map) ? map : null;
  const has = (v) => !m || !!v;
  const canPower = !m || !!(m.powerOn || m.powerOff || m.powerToggle);
  const canTemp  = !m || !!(m.tempUp || m.tempDown);
  const modeOk   = (id) => !m || !!((m.modes || {})[id] || m.modeCycle);
  const fanOk    = (id) => !m || !!((m.fans || {})[id] || m.fanCycle);
  const extras   = (m && m.extras) || [];

  const setTarget = (delta) => {
    const t = Math.min(MAX_T, Math.max(MIN_T, device.target + delta));
    onChange({ target: t, power: true });
  };

  return React.createElement("div", { className: "remote" + (disabled ? " remote-off" : "") },
    // header
    React.createElement("div", { className: "remote-head" },
      React.createElement("div", null,
        React.createElement("div", { className: "remote-name" }, device.name),
        React.createElement("div", { className: "remote-loc mono" },
          unitName, " · ", device.mqtt)
      ),
      React.createElement("button", {
        className: "pow-btn" + (device.power ? " on" : ""),
        disabled: disabled || !canPower,
        onClick: () => onChange({ power: !device.power }),
        title: canPower ? "Marche / Arrêt" : "Aucun bouton marche/arrêt configuré",
      }, React.createElement(Icon, { name: "power", size: 20, stroke: 2.2 }))
    ),
    // dial + steppers
    React.createElement("div", { className: "remote-dial-row" },
      React.createElement("button", {
        className: "step", disabled: disabled || !device.power || !canTemp,
        title: canTemp ? "" : "Aucun bouton de température configuré",
        onClick: () => setTarget(-1),
      }, React.createElement(Icon, { name: "minus", size: 22, stroke: 2.4 })),
      React.createElement(Dial, { device }),
      React.createElement("button", {
        className: "step", disabled: disabled || !device.power || !canTemp,
        title: canTemp ? "" : "Aucun bouton de température configuré",
        onClick: () => setTarget(1),
      }, React.createElement(Icon, { name: "plus", size: 22, stroke: 2.4 }))
    ),
    // modes
    React.createElement("div", { className: "ctrl-label mono" }, "Mode"),
    React.createElement("div", { className: "seg" },
      D.MODES.map(m => React.createElement("button", {
        key: m.id,
        className: "seg-btn" + (device.mode === m.id ? " act" : ""),
        disabled: disabled || !modeOk(m.id),
        title: modeOk(m.id) ? "" : "Aucun bouton configuré pour ce mode",
        style: device.mode === m.id ? { "--seg": modeColor(m.id) } : {},
        onClick: () => onChange({ mode: m.id, power: true }),
      },
        React.createElement(Icon, { name: m.icon, size: 17, stroke: 1.9 }),
        React.createElement("span", null, m.label)
      ))
    ),
    // fan
    React.createElement("div", { className: "ctrl-label mono" }, "Ventilation"),
    React.createElement("div", { className: "seg" },
      D.FANS.map(f => React.createElement("button", {
        key: f.id,
        className: "seg-btn small" + (device.fan === f.id ? " act" : ""),
        disabled: disabled || !fanOk(f.id),
        title: fanOk(f.id) ? "" : "Aucun bouton configuré pour cette vitesse",
        onClick: () => onChange({ fan: f.id }),
      }, f.label))
    ),

    // Buttons the user pinned in the configurator: anything their remote has
    // that this dial has no concept of — swing, sleep, turbo, an extra off.
    extras.length > 0 && React.createElement(React.Fragment, null,
      React.createElement("div", { className: "ctrl-label mono" }, "Raccourcis"),
      React.createElement("div", { className: "seg seg-extras" },
        extras.map(name => React.createElement("button", {
          key: name, className: "seg-btn small", disabled,
          onClick: () => onSend && onSend(name),
        }, name))
      )
    )
  );
}

window.AcRemote = AcRemote;
window.modeColor = modeColor;