/* settings.jsx — HEMS Inställningar
   Loads existing settings from /settings/api/{api_key}, lets the user edit,
   POSTs the FULL settings object back. No partial updates (per backend spec). */

const SETTINGS_BASE_URL = window.HEMS_BASE();
// Säkerhetsfix 2026-05-29: API-nyckel läses från localStorage (session-token
// sparas där efter login). Tidigare hårdkodning av Andrés Homey-nyckel gjorde
// att alla inloggade staging-användare läste/skrev mot Andrés settings när de
// öppnade /v2/settings.html. STRIKT sess_*-validering: gamla hems_*-spöktokens
// (från tidigare cutover-fönster) rensas → tvingar fram login. Saknad token →
// redirect till login.html.
// Master-gaten (user_mode_enabled) persisteras av backend sedan 2026-08-01
// (SPEC_DRIFTLAGE_UI_V2, rev 01259-kuc). localStorage-speglingen
// `hems_user_mode_enabled_<session-token>` är RIVEN — backend är sanningskälla.
// Bygg aldrig tillbaka den: ny inloggning/enhet = ny token = tom nyckel.

function _readSessionToken() {
  if (typeof localStorage === 'undefined') return '';
  let tok = localStorage.getItem('hems_session_token') || '';
  if (tok && !tok.startsWith('sess_')) {
    // Spöke från tidigare cutover — rensa och tvinga login
    localStorage.removeItem('hems_session_token');
    tok = '';
  }
  if (!tok) {
    // Ej inloggad — skicka till login (sparar request_url så vi kan komma tillbaka)
    window.location.href = 'login.html';
    return '';
  }
  return tok;
}
const SETTINGS_API_KEY = _readSessionToken();
// Babel-scripts delar inte scope: settings-ev.jsx behöver bas-URL + nyckel för
// den frivilliga live-data-koll som driver "HEMS ser en laddbox"-hinten
// (SPEC_EV_SETTINGS_UX §3). Ingen ny endpoint — /api/live-data finns redan.
window.HEMS_SETTINGS_API = { base: SETTINGS_BASE_URL, key: SETTINGS_API_KEY };

// Defaults derived from clean_settings_api.json + the live screenshots.
// Used while the real GET is in flight, and as a fallback if it fails.
// Säkerhetsfix 2026-05-29: tidigare hade defaults Andrés exakta personliga data
// (Kinnekulle-koord, 19.78 kWp sol, 25.6 kWh batteri, peak-config). När annan
// användares settings saknade ett fält visade UI Andrés värden istället. Nu är
// alla personberoende fält neutrala/0 — bara svenska standarder (SE3, moms 25%)
// och tekniska defaults (verkningsgrader). UI ska enbart visa användarens
// faktiska sparade data, aldrig "någon annans" som fallback.
const SETTINGS_DEFAULTS = {
  name: '',
  email: '',
  area: 'SE3',
  latitude: 0,
  longitude: 0,

  // Solar — up to 3 arrays (tomt = inte konfigurerat)
  solar_array_1_kwp: 0,
  solar_array_1_azimuth: 180,
  solar_array_1_tilt: 30,
  solar_array_2_kwp: 0,
  solar_array_2_azimuth: 180,
  solar_array_2_tilt: 30,
  solar_array_3_kwp: 0,
  solar_array_3_azimuth: 180,
  solar_array_3_tilt: 30,

  // Battery (0 = inte konfigurerat)
  battery_capacity_kwh: 0,
  battery_charge_rate_kw: 0,
  battery_discharge_rate_kw: 0,
  battery_soc_min_pct: 5,
  battery_soc_max_pct: 100,
  battery_efficiency_pct: 98,
  inverter_efficiency_pct: 96,
  multi_battery_enabled: false,

  // Installation
  main_fuse_a: 16,

  // Homey / inverter format
  homey_power_in_kw: false,
  ev_charger_power_in_kw: false,
  pause_battery_on_ev_charging: false,

  // Elbil & skjutbara laster (SPEC_LASTER_EV 2026-06-11) — nested objekt +
  // array, backend-namnen exakt enligt spec. Defaults speglar EV_CHARGING_DEFAULTS
  // i settings-ev.jsx.
  ev_charging: {
    enabled: false,
    battery_kwh: 0,
    max_current_a: 16,
    min_current_a: 6,
    phases: 3,
    variable_current: true,
    departure_time: '07:00',
    target_pct: 80,
  },
  // Multi-EV (§5): lista av laddboxar (max 2). Normaliseras från backend vid
  // GET (migrerar gammalt ev_charging-objekt vid behov). Skickas som
  // ev_chargers vid save; gamla ev_charging strippas ur payloaden.
  ev_chargers: [],
  deferrable_loads: [],

  negate_charge: false,
  negate_chargesolar: false,
  negate_selfconsumption: false,
  negate_peakshaving: false,
  negate_export: false,

  // Buy economy (öre/kWh except moms) — svenska standardvärden
  grid_fee_ore: 0,
  energy_tax_ore: 0,
  retailer_margin_ore: 0,
  vat_pct: 25,

  // Sell economy
  grid_benefit_ore: 0,
  sale_margin_ore: 0,
  cycle_cost_ore: 10,

  // Peak shaving (av som default)
  peak_shaving_enabled: false,
  peak_shaving_mode: 'simple',
  peak_max_grid_kw: 5,
  peak_cost_kr_per_kw: 50,
  peak_reserve_kwh: '',   // tomt = automatiskt (null i API:t, ALDRIG 0)
  peak_day_max_kw: 0,
  peak_night_max_kw: 0,
  peak_day_start_h: 6,
  peak_day_end_h: 22,
  peak_winter_high_start_h: 6,
  peak_winter_high_end_h: 21,
  peak_winter_high_max_kw: 0,
  peak_winter_high_cost_kr_per_kw: 0,
  peak_winter_low_max_kw: 0,
  peak_winter_low_cost_kr_per_kw: 0,
  peak_winter_months: [11,12,1,2,3],     // Nov-Mar (kalendermånad 1-12)
  peak_summer_max_kw: 0,
  peak_summer_cost_kr_per_kw: 0,
  peak_summer_months: [4,5,6,7,8,9,10],  // Apr-Okt (kalendermånad 1-12)

  // Driftläge (2026-07-30, SPEC_GRAVIO_USER_MODE_UI): self_sufficiency-läget är
  // rivet — operating_mode finns inte längre i UI:t eller i payloaden.
  // user_mode_enabled = master-gate. AV → flottans defaults gäller, men
  // rattvärdena raderas inte (backend ignorerar dem, UI:t minns dem).
  user_mode_enabled: false,
  // Rattar: null = OJUSTERAD (flottans standard, visas som ghost, skickas
  // aldrig). 0 = av och är ett giltigt sparat värde. Blanda aldrig ihop dem.
  traj_premie_ore_per_kwh_h: null,
  sellsolar_min_price_ore: null,
  maxprofit_import_aversion_kr: null,
  soc_planning_buffer_pct: null,
};

// ── Section colour accents (matches the gradient borders in the original) ──
/* Kategorier för SNav (2026-06-11) — id:n matchar <section>-wrapparna i main.
   Färgprickarna speglar respektive korts accent. */
const SETTINGS_SECTIONS = [
  { id: 'grp-hem',     label: 'Hem & plats',        color: '#3FCC8B' },
  { id: 'grp-drift',   label: 'Driftläge',          color: '#00BFA5' },
  { id: 'grp-sol',     label: 'Sol & batteri',      color: '#F4C84B' },
  { id: 'grp-install', label: 'Elinstallation',     color: '#5BA8FF' },
  { id: 'grp-ev',      label: 'Elbil & laster',     color: '#7AB8FF' },
  { id: 'grp-data',    label: 'Datafält & enheter', color: '#8C97AE' },
  { id: 'grp-ekonomi', label: 'Ekonomi',            color: '#FF8A47' },
  { id: 'grp-peak',    label: 'Effektavgift',       color: '#9D7BFF' },
  { id: 'grp-konto',   label: 'Konto & säkerhet',   color: '#FF5A65' },
];

/* ---- Reserv för toppar (kontrakt 1/9 punkt A) --------------------------
   Tomt fält och 0 betyder BÅDA "automatiskt" och skickas som null. 0 skrevs
   tidigare om till 1 kWh — den som skriver 0 vill inte reservera något själv,
   så klampet gav honom motsatsen. Utanför 1–50 klampas inget tyst: felet
   visas rött vid fältet och sparningen stoppas, för ett tyst klamp sparar ett
   annat värde än det användaren lämnade. */
function peakReserveOut(v){
  if (v === '' || v == null) return null;
  const n = Number(v);
  if (!isFinite(n) || n <= 0) return null;
  return n;
}
function peakReserveErr(v){
  if (v === '' || v == null) return null;
  const n = Number(v);
  if (!isFinite(n)) return 'Ange ett tal i kWh, eller lämna fältet tomt för automatiskt.';
  if (n === 0) return null;                       // 0 = automatiskt, giltigt
  /* Negativt är inte "automatiskt" — det är ett skrivfel. Utan den här raden
     föll −5 igenom båda gränskontrollerna och sparades TYST som null, så
     användaren trodde att han satt en reserv. */
  if (n < 0) return 'Reserven kan inte vara negativ. Lämna fältet tomt eller skriv 0 för automatiskt.';
  if (n < 1) return 'Reserven måste vara minst 1 kWh. Lämna fältet tomt eller skriv 0 för automatiskt.';
  if (n > 50) return 'Reserven kan högst vara 50 kWh.';
  return null;
}

/* Backendens 422 i läsbar form. Utan detta blev ett fältfel "HTTP 422 —
   {"detail":[{"type":"greater_than"…" i statusraden, och användaren fick
   gissa vilket fält som stoppade sparningen. Högst tre fel, som backend. */
const SB_FIELD_NAME = {
  deferrable_loads: 'skjutbara laster', power_kw: 'effekt', windows: 'körfönster',
  peak_reserve_kwh: 'reserv för toppar', duration_hours: 'körtid',
  earliest: 'tidigast start', latest: 'senast klar', days: 'veckodagar',
  name: 'namn', max_parts: 'max antal delar',
};
function settings422(body){
  const det = (body && Array.isArray(body.detail)) ? body.detail : [];
  if (!det.length) return null;
  const lines = det.slice(0, 3).map(d => {
    const loc = Array.isArray(d && d.loc) ? d.loc.filter(x => x !== 'body') : [];
    /* Numret hör till f\u00e4ltet FÖRE det, inte till slutet: loc
       ['deferrable_loads',0,'power_kw'] är "skjutbara laster 1 → effekt",
       inte "skjutbara laster → effekt 1". */
    const parts = [];
    loc.forEach(x => {
      if (typeof x === 'number'){ if (parts.length) parts[parts.length - 1] += ' ' + (x + 1); }
      else parts.push(SB_FIELD_NAME[x] || String(x));
    });
    const msg = String((d && d.msg) || '').replace(/^Value error,\s*/i, '');
    return parts.length ? `${parts.join(' → ')}: ${msg}` : msg;
  });
  return lines.join(' · ');
}

const ACCENTS = {
  contact:  'linear-gradient(90deg, #3FCC8B, #FF8A47)',
  area:     'linear-gradient(90deg, #5BA8FF, #00BFA5)',
  position: 'linear-gradient(90deg, #F4C84B, #FF8A47)',
  solar:    'linear-gradient(90deg, #F4C84B, #3FCC8B)',
  battery:  'linear-gradient(90deg, #9D7BFF, #5BA8FF)',
  install:  'linear-gradient(90deg, #5BA8FF, #00BFA5)',
  homey:    'linear-gradient(90deg, #5BA8FF, #9D7BFF)',
  econBuy:  'linear-gradient(90deg, #FF8A47, #FF5A65)',
  econSell: 'linear-gradient(90deg, #3FCC8B, #00BFA5)',
  peak:     'linear-gradient(90deg, #FF5A65, #9D7BFF)',
  selfSuf:  'linear-gradient(90deg, #F4C84B, #FF8A47)',
  password: 'linear-gradient(90deg, #3FCC8B, #5BA8FF)',
  api:      'linear-gradient(90deg, #9D7BFF, #5BA8FF)',
};

// ── Helper: deep-equal for dirty detection ──────────────────────────────
const eq = (a, b) => JSON.stringify(a) === JSON.stringify(b);

// ── Timme-väljare för höglastfönstret (2026-07-30) ─────────────────────
// "0" och "24" i ett nummerfält var obegripligt för villaägaren. Samma
// värden (heltal 0–24) skickas till backend, men UI:t säger "kl 07:00".
const HOUR_LABEL = (h) => String(h).padStart(2, '0') + ':00';
const hourOpts = (isEnd) => Array.from({length: 24}, (_, i) => {
  const h = isEnd ? i + 1 : i;
  return { value: String(h), label: 'kl ' + HOUR_LABEL(h === 24 ? 0 : h) + (h === 24 ? ' (midnatt)' : '') };
});

function PeakWindow({ start, end, onStart, onEnd, startLabel, endLabel }){
  const a = Number(start) || 0, b = Number(end) || 0;
  const wraps = b <= a;
  const hours = wraps ? (24 - a) + b : b - a;
  const allDay = hours === 0 || hours >= 24;
  return (
    <div className="full">
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
        <SSelect label={startLabel || 'Höglast börjar'} value={String(a)}
          onChange={(v)=>onStart(Number(v))} options={hourOpts(false)}/>
        <SSelect label={endLabel || 'Höglast slutar'} value={String(b)}
          onChange={(v)=>onEnd(Number(v))} options={hourOpts(true)}/>
      </div>
      <div className="sc-field-help" style={{marginTop:8}}>
        {allDay
          ? 'Höglast gäller dygnet runt — låglastgränsen används aldrig.'
          : <>Höglast gäller <strong>kl {HOUR_LABEL(a)}–{HOUR_LABEL(b === 24 ? 0 : b)}</strong>{wraps ? ' (över midnatt)' : ''} — {hours} timmar per dygn. Övrig tid räknas som låglast.</>}
      </div>
    </div>
  );
}

// ── Multi-batteri-editor ───────────────────────────────────────────
// Renderar varje batteri i `batteries`-arrayen som en redigerbar rad +
// Lägg till/Ta bort-knappar. Vid save POSTas hela arrayen tillbaka.
const MULTI_BATT_DEFAULT = {
  capacity_kwh: 0,
  charge_rate_kw: 0,
  discharge_rate_kw: 0,
  soc_min: 5,
  soc_max: 100,
  ai_controlled: false,
};

function MultiBatteryEditor({ batteries, onChange }){
  const upd = (i, patch) => {
    const next = batteries.map((b, j) => j === i ? { ...b, ...patch } : b);
    onChange(next);
  };
  const add = () => {
    if (batteries.length >= 3) return;
    onChange([...batteries, { ...MULTI_BATT_DEFAULT }]);
  };
  const remove = (i) => onChange(batteries.filter((_, j) => j !== i));

  if (batteries.length === 0){
    return (
      <div>
        <div className="sc-field-help" style={{marginBottom: 10, fontStyle:'italic'}}>
          Inga batterier konfigurerade än. Klicka på knappen nedan för att lägga till.
        </div>
        <button type="button" className="btn-secondary" onClick={add}>
          + Lägg till batteri
        </button>
      </div>
    );
  }

  return (
    <div>
      {batteries.map((b, i) => (
        <div key={i} style={{
          marginBottom: 12, padding: 12,
          border: '1px solid rgba(255,255,255,.08)', borderRadius: 8,
        }}>
          <div style={{display:'flex', justifyContent:'space-between',
            alignItems:'center', marginBottom: 8}}>
            <strong>Batteri {i+1}</strong>
            <button type="button" className="btn-link" onClick={()=>remove(i)}
              style={{color:'var(--c-peak)', fontSize: 12}}>Ta bort</button>
          </div>
          <div className="sc-grid">
            <SField label="Kapacitet (kWh)" type="number"
              value={b.capacity_kwh}
              onChange={(v)=>upd(i, {capacity_kwh: parseFloat(v) || 0})}/>
            <SField label="Laddeffekt (kW)" type="number"
              value={b.charge_rate_kw}
              onChange={(v)=>upd(i, {charge_rate_kw: parseFloat(v) || 0})}/>
            <SField label="Urladdningseffekt (kW)" type="number"
              value={b.discharge_rate_kw}
              onChange={(v)=>upd(i, {discharge_rate_kw: parseFloat(v) || 0})}/>
            <SField label="Min SOC (%)" type="number"
              value={b.soc_min}
              onChange={(v)=>upd(i, {soc_min: parseFloat(v) || 0})}/>
            <SField label="Max SOC (%)" type="number"
              value={b.soc_max}
              onChange={(v)=>upd(i, {soc_max: parseFloat(v) || 100})}/>
          </div>
          <SCheck label="AI-styrt batteri (HEMS observerar bara)"
            value={!!b.ai_controlled}
            onChange={(v)=>upd(i, {ai_controlled: v})}/>
        </div>
      ))}
      {batteries.length < 3 && (
        <button type="button" className="btn-secondary" onClick={add}>
          + Lägg till batteri ({batteries.length}/3)
        </button>
      )}
    </div>
  );
}

function SettingsApp(){
  const [original, setOriginal] = React.useState(SETTINGS_DEFAULTS);
  const [s, setS] = React.useState(SETTINGS_DEFAULTS);
  const [loading, setLoading] = React.useState(true);
  const [loadErr, setLoadErr] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const [status, setStatus] = React.useState(null);   // {kind:'ok'|'err'|'info', msg}

  // Load real settings on mount
  // Engångsstädning av den rivna bil-skuggan (2026-07-30).
  React.useEffect(() => { window.evModel?.purgeLegacyCarShadow?.(); }, []);

  /* Automatiska reservvärdet till placeholder (kontrakt 1/9): visar vad
     "tomt" betyder i praktiken. Tyst vid fel — placeholdern blir generisk.

     RAW FETCH, inte window.hems: fasaden konfigureras aldrig med en
     sessionsnyckel på den här sidan (settings.html använder SETTINGS_API_KEY
     överallt), så getPeak() kastade "ingen sessionsnyckel satt än" och
     catch:en svalde det tyst — placeholdern kunde ALDRIG bli annat än
     fallbacken. Samma mönster som den frivilliga live-data-hinten i
     settings-ev.jsx:552. */
  const [autoReserve, setAutoReserve] = React.useState(null);
  React.useEffect(() => {
    (async () => {
      try {
        const r = await fetch(`${SETTINGS_BASE_URL}/api/peak-insights?api_key=${encodeURIComponent(SETTINGS_API_KEY)}`,
          { headers: { 'Accept': 'application/json' } });
        if (!r.ok) return;
        const p = await r.json();
        const sr = p?.peak_shaving?.soc_reserve;
        if (sr?.kwh != null) setAutoReserve(sr);
      } catch(e){}
    })();
  }, []);

  React.useEffect(() => {
    (async () => {
      try {
        const url = `${SETTINGS_BASE_URL}/settings/api/${SETTINGS_API_KEY}`;
        const r = await fetch(url);
        // #294: död session → rensa token + tillbaka till login (aldrig felloop)
        if (r.status === 401) {
          localStorage.removeItem('hems_session_token');
          window.location.href = 'login.html?expired=1';
          return;
        }
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        const data = await r.json();
        // Säkerhetsfix 2026-05-29: backend skickar solar_arrays: [{kwp, azimuth,
        // tilt}, ...] som array, men UI har flata fält solar_array_1_kwp etc.
        // Mappar arrayen → flata fält så Lennies riktiga sol-config visas
        // istället för defaults (= Andrés värden i föregående bug).
        const arr = Array.isArray(data.solar_arrays) ? data.solar_arrays : [];
        const flatSolar = {};
        for (let i = 0; i < 3; i++) {
          const a = arr[i] || {};
          flatSolar[`solar_array_${i+1}_kwp`]     = a.kwp ?? 0;
          flatSolar[`solar_array_${i+1}_azimuth`] = a.azimuth ?? 180;
          flatSolar[`solar_array_${i+1}_tilt`]    = a.tilt ?? 30;
        }
        // Backend-namn → frontend-namn-mapping för fält som heter olika.
        // Bygger på fullständig audit 2026-05-29 av staging-users Lennie + André.
        // Använder ?? istället för || så 0 (giltigt värde) inte ersätts av default.
        const renamed = {
          // Position
          latitude: data.lat ?? data.latitude ?? 0,
          longitude: data.lon ?? data.longitude ?? 0,
          // SOC + moms
          battery_soc_min_pct: data.soc_min ?? data.battery_soc_min_pct ?? 5,
          battery_soc_max_pct: data.soc_max ?? data.battery_soc_max_pct ?? 100,
          vat_pct: data.vat_percent ?? data.vat_pct ?? 25,
          // Versionsnumret följer med orört genom hela rundgången (se toBackend).
          settings_rev: data.settings_rev ?? null,
          // Batteri-verkningsgrader
          battery_efficiency_pct: data.battery_efficiency ?? data.battery_efficiency_pct ?? 98,
          inverter_efficiency_pct: data.inverter_efficiency ?? data.inverter_efficiency_pct ?? 96,
          // EV-pause
          pause_battery_on_ev_charging: data.ev_pause_battery ?? data.pause_battery_on_ev_charging ?? false,
          // Elbil & skjutbara laster — nested objekt + array rakt från backend;
          // saknade nycklar får form från defaults så UI:t aldrig kraschar.
          ev_charging: { ...SETTINGS_DEFAULTS.ev_charging, ...(data.ev_charging || {}) },
          // Multi-EV (§5): normalisera till lista (migrerar singular vid behov).
          ev_chargers: (window.evModel ? window.evModel.normalize(data) : []),
          deferrable_loads: Array.isArray(data.deferrable_loads) ? data.deferrable_loads : [],
          // Ekonomi köp (öre/kWh — backend skickar samma siffra med _kwh-suffix)
          grid_fee_ore: data.grid_fee_kwh ?? data.grid_fee_ore ?? 0,
          energy_tax_ore: data.energy_tax_kwh ?? data.energy_tax_ore ?? 0,
          retailer_margin_ore: data.elhandel_margin_kwh ?? data.retailer_margin_ore ?? 0,
          // Ekonomi sälj
          grid_benefit_ore: data.grid_benefit_kwh ?? data.grid_benefit_ore ?? 0,
          sale_margin_ore: data.sell_margin_kwh ?? data.sale_margin_ore ?? 0,
          cycle_cost_ore: data.cycle_cost_kwh ?? data.cycle_cost_ore ?? 10,
          // Multi-batteri (backend skickar batteries-array när multi)
          multi_battery_enabled: Array.isArray(data.batteries) && data.batteries.length > 1,
          /* Peak shaving. enabled/mode lästes ALDRIG in (kritiskt, backend
             31/8): kortet visade alltid av + "Enkel" och aktivering sparades
             aldrig. mode BEVARAS ordagrant även när värdet är okänt —
             klubbas det till default skriver nästa spara sönder användarens
             läge (punkt 5). */
          peak_shaving_enabled: data.peak_shaving_enabled === true,
          peak_shaving_mode: data.peak_shaving_mode || 'simple',
          peak_max_grid_kw: data.peak_shaving_max_grid_kw ?? 5,
          peak_cost_kr_per_kw: data.peak_shaving_cost_kr_per_kw ?? 50,
          peak_reserve_kwh: data.peak_reserve_kwh ?? '',
          peak_day_max_kw: data.peak_shaving_day_max_kw ?? 0,
          peak_night_max_kw: data.peak_shaving_night_max_kw ?? 0,
          peak_day_start_h: data.peak_shaving_day_start ?? 6,
          peak_day_end_h: data.peak_shaving_day_end ?? 22,
          // period1 = vinter (high/low), period2 = sommar
          peak_winter_high_start_h: data.peak_shaving_period1_day_start ?? 6,
          peak_winter_high_end_h: data.peak_shaving_period1_day_end ?? 21,
          peak_winter_high_max_kw: data.peak_shaving_period1_day_max_kw ?? 0,
          peak_winter_high_cost_kr_per_kw: data.peak_shaving_period1_day_cost_kr ?? 0,
          peak_winter_low_max_kw: data.peak_shaving_period1_night_max_kw ?? 0,
          peak_winter_low_cost_kr_per_kw: data.peak_shaving_period1_night_cost_kr ?? 0,
          peak_winter_months: Array.isArray(data.peak_shaving_period1_months) ? data.peak_shaving_period1_months : [],
          peak_summer_max_kw: data.peak_shaving_period2_max_kw ?? 0,
          peak_summer_cost_kr_per_kw: data.peak_shaving_period2_cost_kr ?? 0,
          peak_summer_months: Array.isArray(data.peak_shaving_period2_months) ? data.peak_shaving_period2_months : [],
          // Driftläge (2026-07-30): operating_mode läses INTE längre.
          // Master-gate + rattar: fältet saknas i svaret ⇒ ojusterat (null),
          // inte 0 — därför `in`-koll och inte ?? mot flottans default.
          // Master-gate = TRESTAT (SPEC_DRIFTLAGE_UI_V2 §2.2). Läs ALDRIG
          // `!!data.user_mode_enabled`: null ⇒ false vore fel för legacy-users
          // med satta rattar. true/false används rakt av; null/saknas =
          // användaren har aldrig sparat sedan backend-fixen — motorn kör då
          // rattarna, så UI:t härleds ur dem (någon ratt satt ⇒ Egna inställningar).
          user_mode_enabled: (data.user_mode_enabled === true || data.user_mode_enabled === false)
            ? data.user_mode_enabled
            : (window.MODE_KNOB_FIELDS || []).some(f =>
                data[f] !== null && data[f] !== undefined && data[f] !== ''),
          traj_premie_ore_per_kwh_h: ('traj_premie_ore_per_kwh_h' in data) ? data.traj_premie_ore_per_kwh_h : null,
          sellsolar_min_price_ore: ('sellsolar_min_price_ore' in data) ? data.sellsolar_min_price_ore : null,
          maxprofit_import_aversion_kr: ('maxprofit_import_aversion_kr' in data) ? data.maxprofit_import_aversion_kr : null,
          soc_planning_buffer_pct: ('soc_planning_buffer_pct' in data) ? data.soc_planning_buffer_pct : null,
        };
        // Filtrera bort password_hash och api_key_hash — ingen frontend ska se dem
        const safeData = { ...data };
        delete safeData.password_hash; delete safeData.password_set_at; delete safeData.api_key_hash;
        // Merge defaults så saknade nycklar har form
        const merged = { ...SETTINGS_DEFAULTS, ...safeData, ...flatSolar, ...renamed };
        setOriginal(merged);
        setS(merged);
      } catch (e){
        console.warn('Settings load failed, using defaults', e);
        setLoadErr(String(e.message || e));
      }
      setLoading(false);
    })();
  }, []);

  // Update a single field
  const u = (key, val) => setS(prev => ({...prev, [key]: val}));
  const isDirty = !eq(s, original);

  // Reverse-mapping UI-fält → backend-namn. Speglar GET-mappingen ovan så
  // Lennies sparade ändringar når rätt fält i Firestore. Skickar BÅDA namnen
  // (UI + backend) för felräddande — backend väljer det den känner igen.
  const toBackend = (ui) => {
    const arrs = [0,1,2].map(i => ({
      kwp: ui[`solar_array_${i+1}_kwp`] ?? 0,
      azimuth: ui[`solar_array_${i+1}_azimuth`] ?? 180,
      tilt: ui[`solar_array_${i+1}_tilt`] ?? 30,
    })).filter(a => a.kwp > 0);
    // Driftläge (2026-07-30): self_sufficiency är rivet. operating_mode och de
    // gamla MSC/självförsörjnings-fälten destruktureras ut så de ALDRIG följer
    // med via ...ui (backend tolererar men skriver aldrig operating_mode).
    // Rattfälten plockas också ut här och läggs tillbaka villkorligt nedan —
    // ett ojusterat fält får inte skickas alls.
    const {
      operating_mode: _deadMode,
      maximize_self_consumption, maximize_self_consumption_enabled,
      self_sufficiency_mode, self_sufficiency_threshold_pct,
      self_sufficiency_penalty_ore, minimum_export_profit_ore,
      msc_export_min_profit_ore,
      traj_premie_ore_per_kwh_h: _k1, sellsolar_min_price_ore: _k2,
      maxprofit_import_aversion_kr: _k3, soc_planning_buffer_pct: _k4,
      ev_charging: _legacyEvCharging,
      settings_rev: _rev,
      ...uiClean
    } = ui;
    // Rattar (§3.3): satt värde skickas; ojusterat utelämnas; en ratt som VAR
    // satt och nu är återställd skickas som explicit null (backend har
    // None-pop-skydd — nollställningsvägen är koordinerad OCH driftsatt 1/8:
    // `null` når databasen på riktigt, ghost-läget efter omladdning är korrekt).
    const knobs = {};
    for (const f of (window.MODE_KNOB_FIELDS || [])){
      const v = ui[f];
      const wasSet = original[f] !== null && original[f] !== undefined && original[f] !== '';
      if (v !== null && v !== undefined && v !== '') knobs[f] = Number(v);
      else if (wasSet) knobs[f] = null;
    }
    return {
      ...uiClean,
      ...knobs,
      // Master-gate: skickas alltid (bool, inget ghost-begrepp)
      user_mode_enabled: !!ui.user_mode_enabled,
      // Position
      lat: ui.latitude,
      lon: ui.longitude,
      // SOC + moms
      soc_min: ui.battery_soc_min_pct,
      soc_max: ui.battery_soc_max_pct,
      vat_percent: ui.vat_pct,
      // Skickas tillbaka så backend kan se om någon annan hann skriva emellan.
      // Utelämnas när dokumentet inte bar något (äldre backend).
      ...(_rev != null ? { settings_rev: _rev } : {}),
      // Batteri-verkningsgrader
      battery_efficiency: ui.battery_efficiency_pct,
      inverter_efficiency: ui.inverter_efficiency_pct,
      // EV-pause
      ev_pause_battery: ui.pause_battery_on_ev_charging,
      // Multi-EV (§5): skicka ev_chargers-array (backend läser den när den finns);
      // gamla singular ev_charging strippades ur payloaden ovan. id skickas
      // ALLTID när det finns — även för nya boxar: UI:t genererar ett id som är
      // unikt mot listan (evModel.nextChargerId) och det är kontraktsnyckeln.
      // Id-lösa rader skulle tvinga backend att koppla på positionsordning,
      // vilket går sönder vid borttagning/omordning.
      ev_chargers: (Array.isArray(ui.ev_chargers) ? ui.ev_chargers : [])
        .map(c => { const rest = { ...(c || {}) }; const id = rest.id; delete rest.id; delete rest._new;
          return (id != null && id !== '') ? { id, ...rest } : rest; }),
      // Bilprofiler (SPEC_BILPROFILER_PER_BOX): bilar ≠ boxar. Skickas bara när
      // användaren faktiskt har rört dem — härledda rader (som bara speglar
      // boxarnas battery_kwh) ska inte skapa profiler i backend i förtid.
      // SPEC_EV_FASER_PER_BIL §5.4: `phases` bärs bara när användaren valt
      // 1 eller 3 — vid "Som laddboxen" utelämnas nyckeln HELT (inte null,
      // inte 0, inte ""). Vakten här är sista ledet; UI:t deletar redan.
      ...(Array.isArray(ui.ev_cars) ? { ev_cars: ui.ev_cars
        .map(c => { const rest = { ...(c || {}) }; delete rest._derived; delete rest._new;
          if (Number(rest.phases) !== 1 && Number(rest.phases) !== 3) delete rest.phases;
          else rest.phases = Number(rest.phases);
          return rest; })
        .filter(c => c.id != null && c.id !== '') } : {}),
      /* Skjutbara laster: id sätts av backend — skicka ALDRIG id för nya laster
         (tomt/saknat), behåll orört för befintliga. Radering = borta ur arrayen.

         lwToPayload är OBLIGATORISK här, inte en finess: en legacy-last utan
         `windows` visas som en fönsterrad i editorn, och spec §2 kräver att
         raden SKRIVS som `windows` vid nästa spar. Ändrade användaren bara
         namnet gick lasten tidigare tillbaka i legacy-form härifrån — tyst,
         eftersom V5 uppfylls av toppnivåns duration_hours. Rörde han ett
         fönster på en last men bara namnet på en annan migrerade den ena och
         inte den andra, i samma POST, och båda såg likadana ut i UI:t.
         Samma normalisering som gc-last.jsx och ev-loads.jsx. */
      deferrable_loads: (Array.isArray(ui.deferrable_loads) ? ui.deferrable_loads : [])
        .map(l => {
          const rest = window.lwToPayload ? window.lwToPayload(l || {}) : { ...(l || {}) };
          const id = rest.id; delete rest.id;
          return id != null && id !== '' ? { id, ...rest } : rest;
        }),
      // Ekonomi
      grid_fee_kwh: ui.grid_fee_ore,
      energy_tax_kwh: ui.energy_tax_ore,
      elhandel_margin_kwh: ui.retailer_margin_ore,
      grid_benefit_kwh: ui.grid_benefit_ore,
      sell_margin_kwh: ui.sale_margin_ore,
      cycle_cost_kwh: ui.cycle_cost_ore,
      // Sol — flata UI-fält → array
      solar_arrays: arrs,
      // Peak shaving — enabled/mode ingick inte i payloaden (kritiskt 31/8).
      peak_shaving_enabled: ui.peak_shaving_enabled,
      peak_shaving_mode: ui.peak_shaving_mode,
      /* SANERING vid varje Enkel-sparning (backend 1/9): fyra dolda legacy-
         fält (months/weekdays/start/end) gate:ar NÄR gränsen gäller. Två
         testanvändare hade gamla vinter/vardag/dagtid-värden kvar i dokumentet
         — "en gräns hela året" var i praktiken avstängd hela september utan
         att något syntes. simple ⇒ hela året/alla dagar/hela dygnet, exakt vad
         etiketten lovar (månader 1–12 som build 189, veckodagar 0=mån).
         Övriga lägen skickar dem INTE — de har egna periodfält, och medvetet
         sparade filter från gamla systemet får inte skrivas över. */
      ...(ui.peak_shaving_mode === 'simple' ? {
        peak_shaving_months: [1,2,3,4,5,6,7,8,9,10,11,12],
        peak_shaving_weekdays: [0,1,2,3,4,5,6],
        peak_shaving_start_hour: 0,
        peak_shaving_end_hour: 24,
      } : {}),
      /* Dag/Natt sanerar samma months/weekdays (backend 1/9): SOC-reserven
         grindas på dem, så gamla vinter/vardag-värden tog bort beredskaps-
         bufferten sommartid och helger. start/end skickas INTE — Dag/Natt har
         egna dag-/nattfönster. */
      ...(ui.peak_shaving_mode === 'day_night' ? {
        peak_shaving_months: [1,2,3,4,5,6,7,8,9,10,11,12],
        peak_shaving_weekdays: [0,1,2,3,4,5,6],
      } : {}),
      peak_shaving_max_grid_kw: ui.peak_max_grid_kw,
      peak_shaving_cost_kr_per_kw: ui.peak_cost_kr_per_kw,
      /* Reserv för toppar (kontrakt 1/9 punkt A): tomt fält ELLER 0 ⇒ null
         (automatik), ALDRIG 0 i payloaden. "0" skrevs tidigare om till 1 kWh,
         alltså raka motsatsen till vad användaren menade — den som skriver 0
         vill inte reservera något själv och låter HEMS räkna. Talet klampas
         INTE längre tyst: ligger det utanför 1–50 står det rött vid fältet och
         sparningen stoppas innan den går i vägen, för ett tyst klamp gav
         användaren ett annat värde än det han lämnade. */
      peak_reserve_kwh: peakReserveOut(ui.peak_reserve_kwh),
      peak_shaving_day_max_kw: ui.peak_day_max_kw,
      peak_shaving_night_max_kw: ui.peak_night_max_kw,
      peak_shaving_day_start: ui.peak_day_start_h,
      peak_shaving_day_end: ui.peak_day_end_h,
      // UI-namn → period1/period2
      peak_shaving_period1_day_start: ui.peak_winter_high_start_h,
      peak_shaving_period1_day_end: ui.peak_winter_high_end_h,
      peak_shaving_period1_day_max_kw: ui.peak_winter_high_max_kw,
      peak_shaving_period1_day_cost_kr: ui.peak_winter_high_cost_kr_per_kw,
      peak_shaving_period1_night_max_kw: ui.peak_winter_low_max_kw,
      peak_shaving_period1_night_cost_kr: ui.peak_winter_low_cost_kr_per_kw,
      peak_shaving_period1_months: ui.peak_winter_months,
      peak_shaving_period2_max_kw: ui.peak_summer_max_kw,
      peak_shaving_period2_cost_kr: ui.peak_summer_cost_kr_per_kw,
      peak_shaving_period2_months: ui.peak_summer_months,
    };
  };

  // Save (POST full object back)
  const save = async () => {
    // Spärr: dubblett-id bland laddboxar skulle låta två bilar dela
    // sessionsnyckel i backend (SOC hoppar mellan bilarna). Blockera POST.
    const dupIds = window.evModel?.duplicateChargerIds
      ? window.evModel.duplicateChargerIds(s.ev_chargers) : [];
    if (dupIds.length) {
      setStatus({kind:'err', msg:`Kunde inte spara: två laddboxar har samma id (${dupIds.join(', ')}). Ta bort och lägg till bilen igen.`});
      return;
    }
    // Samma spärr för bilprofiler — car_id är nyckeln sessionen pekar på.
    const dupCars = window.evModel?.duplicateChargerIds
      ? window.evModel.duplicateChargerIds(s.ev_cars) : [];
    if (dupCars.length) {
      setStatus({kind:'err', msg:`Kunde inte spara: två bilar har samma id (${dupCars.join(', ')}). Ta bort och lägg till bilen igen.`});
      return;
    }
    /* Reserven stoppas HÄR i stället för att klampas tyst (kontrakt 1/9 A).
       Backend 422:ar utanför 1–50, och ett tyst klamp hade sparat ett annat
       värde än det som står i fältet. */
    const resErr = peakReserveErr(s.peak_reserve_kwh);
    if (resErr) {
      setStatus({kind:'err', msg:`Kunde inte spara: ${resErr}`});
      return;
    }
    /* Effekten på en skjutbar last måste vara > 0 — backend avvisar hela
       dokumentet annars, och då ser det ut som att inget alls fastnade
       (Andrés fall 2/9). Namnet på lasten pekas ut, inte fältnumret. */
    const badLoad = (Array.isArray(s.deferrable_loads) ? s.deferrable_loads : [])
      .find(l => l && l.enabled !== false && !(Number(l.power_kw) > 0));
    if (badLoad) {
      setStatus({kind:'err', msg:`Kunde inte spara: lasten "${badLoad.name || 'utan namn'}" har ingen effekt. Ange effekt i kW större än 0.`});
      return;
    }
    /* Fönsterreglerna speglas också här: ett överlapp byggt på
       inställningssidan gick annars till backend och kom tillbaka som 422 —
       läsbart sedan settings422, men en onödig rundtur. */
    if (window.lwValidate && window.lwFromLoad) {
      const loadsArr = Array.isArray(s.deferrable_loads) ? s.deferrable_loads : [];
      for (let i = 0; i < loadsArr.length; i++) {
        const e = window.lwValidate(window.lwFromLoad(loadsArr[i]));
        const k = Object.keys(e)[0];
        if (k != null) {
          const nm = (loadsArr[i] && loadsArr[i].name) || `Last ${i + 1}`;
          setStatus({kind:'err', msg:`Kunde inte spara: ${nm}, fönster ${Number(k) + 1} — ${e[k]}`});
          return;
        }
      }
    }
    setSaving(true);
    setStatus({kind:'info', msg:'Sparar…'});
    try {
      const url = `${SETTINGS_BASE_URL}/settings/api/${SETTINGS_API_KEY}`;
      const payload = toBackend(s);
      const r = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      // #294: död session → rensa token + tillbaka till login
      if (r.status === 401) {
        localStorage.removeItem('hems_session_token');
        window.location.href = 'login.html?expired=1';
        return;
      }
      if (r.status === 409){
        setStatus({kind:'err', msg:'Inställningarna ändrades på annat håll medan du redigerade. Läs in sidan igen så du inte skriver över den ändringen.'});
        setSaving(false);
        return;
      }
      if (!r.ok){
        /* 422 är ett fältsvar, inte ett tekniskt fel: läs body:n och peka ut
           fältet i klartext i stället för att klistra in rå JSON. */
        if (r.status === 422){
          const b = await r.json().catch(()=>null);
          const txt = settings422(b);
          setStatus({kind:'err', msg: txt ? `Kunde inte spara — ${txt}` : 'Kunde inte spara: ett fält avvisades av HEMS.'});
          setSaving(false);
          return;
        }
        const t = await r.text().catch(()=>String(r.status));
        throw new Error(`HTTP ${r.status} — ${t.slice(0, 80)}`);
      }
      const result = await r.json();
      // Nytt versionsnummer ur svaret — annars spar man bara en gång per
      // sidladdning innan numret är inaktuellt.
      const next = result && result.settings_rev != null ? { ...s, settings_rev: result.settings_rev } : s;
      if (next !== s) setS(next);
      setOriginal(next);
      setStatus({kind:'ok', msg: result.status === 'saved' ? 'Sparat' : 'OK'});
      setTimeout(()=>setStatus(null), 4000);
    } catch(e){
      setStatus({kind:'err', msg: `Kunde inte spara: ${e.message}`});
    }
    setSaving(false);
  };

  const reset = () => setS(original);

  // Flik-läge (2026-06-11): vald kategori i SNav visar BARA den sektionen.
  // Hash i URL:en så en sidladdning/delning landar på samma kategori.
  const [activeSec, setActiveSec] = React.useState(() => {
    const h = (window.location.hash || '').slice(1);
    return SETTINGS_SECTIONS.some(sec => sec.id === h) ? h : 'grp-hem';
  });
  const selectSec = (id) => {
    setActiveSec(id);
    try { history.replaceState(null, '', '#' + id); } catch(e){}
    window.scrollTo(0, 0);
  };

  if (loading){
    return (
      <div className="settings-app">
        <header className="settings-topbar">
          <a className="back" href="index.html"><Icon name="chevron" size={16}/></a>
          <div className="title-block">
            <a className="title-icon" href="index.html"
              onClick={() => { try { localStorage.setItem('gc.page', 'oversikt'); } catch(e){} }}>
              <img src="gravio-logo.jpg" alt="Gravio"/>
            </a>
            <div><h1>Inställningar</h1><div className="sub">Systemkonfiguration</div></div>
          </div>
        </header>
        <div className="settings-loading">Laddar inställningar…</div>
      </div>
    );
  }

  return (
    <div className="settings-app">
      <header className="settings-topbar">
        <a className="back" href="index.html" title="Tillbaka till översikten">
          <Icon name="chevron" size={16}/>
        </a>
        <div className="title-block">
          {/* Logotypen går hem till Översikt (André 1/9): gc.page sätts före
              navigeringen, annars öppnar index senast besökta fliken. */}
          <a className="title-icon" href="index.html" title="Till översikten"
            onClick={() => { try { localStorage.setItem('gc.page', 'oversikt'); } catch(e){} }}>
            <img src="gravio-logo.jpg" alt="Gravio"/>
          </a>
          <div>
            <h1>Inställningar</h1>
            <div className="sub">Systemkonfiguration</div>
          </div>
        </div>

        <div className="spacer"/>

        {status && (
          <span className={`save-toast ${status.kind}`}>
            <span className="dot"/>{status.msg}
          </span>
        )}
        {loadErr && !status && (
          <span className="save-toast info" title={loadErr}>
            <span className="dot" style={{background:'var(--c-unchanged)'}}/>
            Mockdata · ej anslutet
          </span>
        )}
        {isDirty && !status && (
          <span className="save-toast info">
            <span className="dot" style={{background:'var(--c-unchanged)'}}/>
            Osparade ändringar
          </span>
        )}
        <button className="btn-secondary" onClick={reset} disabled={!isDirty || saving}>
          Återställ
        </button>
        <button className="btn-primary" onClick={save} disabled={!isDirty || saving}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="14" height="14"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
          {saving ? 'Sparar…' : 'Spara'}
        </button>
      </header>

      <div className="settings-body">
      <SNav sections={SETTINGS_SECTIONS} active={activeSec} onSelect={selectSec}/>
      <main className="settings-main" data-sec={activeSec}>

        <section id="grp-hem" className="s-group">

        {/* ── Kontaktuppgifter ─────────────────────────────────────── */}
        <SCard accent={ACCENTS.contact}
          iconBg="rgba(63,204,139,.12)" iconColor="var(--c-sell)"
          iconName="home" title="Ditt hem">
          <div className="sc-grid">
            <SField label="Installationsnamn" placeholder="Mitt hem"
              value={s.name} onChange={(v)=>u('name', v)}
              help="Vad anläggningen ska kallas i appen"/>
            <SField label="E-postadress (valfritt)" type="email" placeholder="din@email.se"
              value={s.email} onChange={(v)=>u('email', v)}
              help="Används för aviseringar och framtida inloggning"/>
          </div>
        </SCard>

        {/* ── Elområde ─────────────────────────────────────────────── */}
        <SCard accent={ACCENTS.area}
          iconBg="rgba(91,168,255,.12)" iconColor="var(--blue)"
          iconName="bolt" title="Elområde">
          <SSelect label="Prisområde"
            value={s.area} onChange={(v)=>u('area', v)}
            help="Styr vilka spotpriser HEMS planerar mot"
            options={[
              {value:'SE1', label:'SE1 — Luleå'},
              {value:'SE2', label:'SE2 — Sundsvall'},
              {value:'SE3', label:'SE3 — Södra Mellansverige'},
              {value:'SE4', label:'SE4 — Malmö'},
            ]}/>
        </SCard>

        {/* ── Position ─────────────────────────────────────────────── */}
        <SCard accent={ACCENTS.position}
          iconBg="rgba(244,200,75,.12)" iconColor="var(--c-charge-sol)"
          iconName="eye" title="Plats"
          subtitle="Klicka på kartan eller använd din nuvarande position.">
          <PositionMap lat={s.latitude} lng={s.longitude}
            onChange={(lat, lng) => { u('latitude', +lat.toFixed(4)); u('longitude', +lng.toFixed(4)); }}/>
          <div className="sc-grid" style={{marginTop: 14}}>
            <SField label="Latitud" type="number" unit="°"
              value={s.latitude} onChange={(v)=>u('latitude', v)}/>
            <SField label="Longitud" type="number" unit="°"
              value={s.longitude} onChange={(v)=>u('longitude', v)}/>
          </div>
          <div style={{marginTop: 12}}>
            <button className="btn-ghost-sm" onClick={() => {
              if (!navigator.geolocation) return;
              navigator.geolocation.getCurrentPosition(
                (pos) => { u('latitude', +pos.coords.latitude.toFixed(4)); u('longitude', +pos.coords.longitude.toFixed(4)); },
                () => alert('Kunde inte hämta position')
              );
            }}>
              <Icon name="eye" size={12}/>Använd min nuvarande position
            </button>
            <div className="sc-field-help" style={{marginTop: 8}}>
              Positionen används för att hämta väder och beräkna solvinklar.
            </div>
          </div>
        </SCard>

        {/* ── Solcellsanläggning ───────────────────────────────────── */}
        </section>

        <section id="grp-drift" className="s-group">
        {/* Driftläge (2026-07-30): automatisk drift vs egna inställningar */}
        <RunModeCard s={s} u={u}/>
        </section>

        <section id="grp-sol" className="s-group">
        <SCard accent={ACCENTS.solar}
          iconBg="rgba(244,200,75,.12)" iconColor="var(--c-charge-sol)"
          iconName="sun" title="Solpaneler"
          subtitle="Lägg in upp till 3 takytor med olika riktning eller lutning. Sätt effekten till 0 om en yta inte finns.">
          {[1, 2, 3].map((i) => (
            <div key={i}>
              <div className="sc-row-title">Fält {i}</div>
              <div className="sc-grid-3">
                <SField label="Effekt (kWp)" type="number"
                  value={s[`solar_array_${i}_kwp`]} onChange={(v)=>u(`solar_array_${i}_kwp`, v)}/>
                <SField label="Riktning (°)" type="number"
                  value={s[`solar_array_${i}_azimuth`]} onChange={(v)=>u(`solar_array_${i}_azimuth`, v)}
                  help="0=N, 90=Ö, 180=S, 270=V"/>
                <SField label="Lutning (°)" type="number"
                  value={s[`solar_array_${i}_tilt`]} onChange={(v)=>u(`solar_array_${i}_tilt`, v)}/>
              </div>
            </div>
          ))}
          <div className="sc-field-help" style={{marginTop: 12, fontStyle: 'italic'}}>
            Riktning: Söder (180°) är optimalt i Sverige. Lutning: 30–40° är optimalt för årsproduktion.
          </div>
        </SCard>

        {/* ── Batteri ──────────────────────────────────────────────── */}
        <SCard accent={ACCENTS.battery}
          iconBg="rgba(157,123,255,.12)" iconColor="var(--violet)"
          iconName="battery" title="Batteri"
          right={<SToggle label="Flera batterier"
            value={s.multi_battery_enabled}
            onChange={(v)=>u('multi_battery_enabled', v)}/>}>
          <SField label="Batterikapacitet (kWh)" type="number"
            value={s.battery_capacity_kwh}
            onChange={(v)=>u('battery_capacity_kwh', v)}
            help="Total kapacitet (brutto, innan SOC-gränser)"/>
          <div className="sc-grid" style={{marginTop: 14}}>
            <SField label="Laddeffekt (kW)" type="number"
              value={s.battery_charge_rate_kw}
              onChange={(v)=>u('battery_charge_rate_kw', v)}/>
            <SField label="Urladdningseffekt (kW)" type="number"
              value={s.battery_discharge_rate_kw}
              onChange={(v)=>u('battery_discharge_rate_kw', v)}/>
            <SField label="Min SOC (%)" type="number"
              value={s.battery_soc_min_pct}
              onChange={(v)=>u('battery_soc_min_pct', v)}/>
            <SField label="Max SOC (%)" type="number"
              value={s.battery_soc_max_pct}
              onChange={(v)=>u('battery_soc_max_pct', v)}/>
            <SField label="Verkningsgrad (%)" type="number"
              value={s.battery_efficiency_pct}
              onChange={(v)=>u('battery_efficiency_pct', v)}
              help="Förlust vid laddning + urladdning (typiskt 85–95%)"/>
            <SField label="Växelriktare (%)" type="number"
              value={s.inverter_efficiency_pct}
              onChange={(v)=>u('inverter_efficiency_pct', v)}
              help="Hur mycket av elen som blir kvar efter växelriktning"/>
          </div>
          {/* Multi-batteri: visar varje batteri som en redigerbar rad. Backend
              skickar batteries: [{capacity_kwh, charge_rate_kw, discharge_rate_kw,
              soc_min, soc_max, ai_controlled}, ...] när användaren har flera. */}
          {s.multi_battery_enabled && (
            <div style={{marginTop: 18, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,.06)'}}>
              <div className="sc-field-help" style={{marginBottom: 10}}>
                Per batteri — kapacitet, laddhastigheter och AI-styrning. Lägg till eller
                ta bort batterier nedan (max 3 stycken).
              </div>
              <MultiBatteryEditor batteries={Array.isArray(s.batteries) ? s.batteries : []}
                onChange={(arr) => u('batteries', arr)}/>
            </div>
          )}
        </SCard>

        {/* ── Elinstallation ───────────────────────────────────────── */}
        </section>

        <section id="grp-install" className="s-group">
        <SCard accent={ACCENTS.install}
          iconBg="rgba(91,168,255,.12)" iconColor="var(--blue)"
          iconName="gear" title="Elinstallation"
          subtitle="Husets huvudsäkring vid elmätaren">
          <SField label="Huvudsäkring (A, 3-fas)" type="number"
            value={s.main_fuse_a} onChange={(v)=>u('main_fuse_a', v)}
            help="16A ≈ 11 kW · 20A ≈ 14 kW · 25A ≈ 17 kW · 35A ≈ 24 kW · 50A ≈ 35 kW · 63A ≈ 44 kW"/>
          <div className="sc-field-help" style={{fontStyle:'italic', marginTop:8}}>
            Sätter taket för effekt vid elmätaren (import + export). Påverkar inte sol-laddning av batteriet — det går direkt i huset.
          </div>
        </SCard>

        {/* ── Effektformat (Homey) ─────────────────────────────────── */}
        {/* ── Elbil & skjutbara laster (SPEC_LASTER_EV 2026-06-11) ── */}
        </section>

        <section id="grp-ev" className="s-group">
        <EvLoadsCard s={s} u={u}/>

        </section>

        <section id="grp-data" className="s-group">
        <SCard accent={ACCENTS.homey}
          iconBg="rgba(91,168,255,.12)" iconColor="var(--blue)"
          iconName="gear" title="Datafält & enheter"
          subtitle="Avancerat — rör bara om något beter sig fel">
          <div className="sc-field-help" style={{margin:'0 0 16px', lineHeight:1.5}}>
            <b style={{color:'var(--ink-2)'}}>Avancerat.</b> Rör bara dessa om något beter sig fel —
            fel effekt-enhet, eller att batteriet gör tvärtom mot vad HEMS säger. Annars: lämna allt som det är.
          </div>

          <div className="sc-field-help" style={{margin:'0 0 8px', color:'var(--ink-2)', fontWeight:600, letterSpacing:'.04em', textTransform:'uppercase', fontSize:11}}>
            Enheter & laddbox
          </div>
          <SCheck label="Skicka batterieffekt i kW istället för W"
            help="De flesta växelriktare vill ha W. Bocka bara i om din växelriktar-app förväntar sig kilowatt."
            value={s.homey_power_in_kw} onChange={(v)=>u('homey_power_in_kw', v)}/>
          {/* EV-kryssrutorna (ev_charger_power_in_kw, pause_battery_on_ev_charging)
              har flyttat till "Elbil & skjutbara laster" (spec §1) — mappningen oförändrad. */}

          <div className="sc-field-help" style={{margin:'18px 0 6px', color:'var(--ink-2)', fontWeight:600, letterSpacing:'.04em', textTransform:'uppercase', fontSize:11}}>
            Teckenvändning
          </div>
          <div className="sc-field-help" style={{margin:'0 0 12px', lineHeight:1.5}}>
            Vissa växelriktare vill ha effekten som ett minus-tal. Bocka i ett kommando bara om din växelriktare
            gör tvärtom när HEMS skickar det — t.ex. laddar när HEMS säger "ladda ur", eller att effekten visas
            med fel tecken. <b style={{color:'var(--ink-2)'}}>Vet du inte? Lämna alla tomma.</b> De allra flesta behöver inte detta.
          </div>
          <SCheck label="Ladda (charge)" value={s.negate_charge} onChange={(v)=>u('negate_charge', v)}/>
          <SCheck label="Ladda enbart med sol (chargesolar)" value={s.negate_chargesolar} onChange={(v)=>u('negate_chargesolar', v)}/>
          <SCheck label="Täck huset (selfconsumption)" value={s.negate_selfconsumption} onChange={(v)=>u('negate_selfconsumption', v)}/>
          <SCheck label="Undvik effekttopp (peak shaving)" value={s.negate_peakshaving} onChange={(v)=>u('negate_peakshaving', v)}/>
          <SCheck label="Sälj till elnätet (export)" value={s.negate_export} onChange={(v)=>u('negate_export', v)}/>
        </SCard>

        {/* ── Ekonomi - Köp ────────────────────────────────────────── */}
        </section>

        <section id="grp-ekonomi" className="s-group">
        <SCard accent={ACCENTS.econBuy}
          iconBg="rgba(255,138,71,.12)" iconColor="var(--c-cover)"
          iconName="wallet" title="Köppris">
          <div className="formula">
            <div className="f">Köppris = (Spotpris + alla avgifter) × moms</div>
            <div className="h">Ange alla avgifter <strong style={{color:'var(--ink-1)'}}>utan moms</strong> — momsen läggs på automatiskt.</div>
          </div>
          <div className="sc-grid">
            <SField label="Nätavgift (öre/kWh)" type="number"
              value={s.grid_fee_ore} onChange={(v)=>u('grid_fee_ore', v)}
              help="Vad nätbolaget tar för att leverera elen"/>
            <SField label="Energiskatt (öre/kWh)" type="number"
              value={s.energy_tax_ore} onChange={(v)=>u('energy_tax_ore', v)}
              help="Statlig skatt"/>
            <SField label="Elhandlarmarginal (öre/kWh)" type="number"
              value={s.retailer_margin_ore} onChange={(v)=>u('retailer_margin_ore', v)}
              help="Påslag från elhandlaren"/>
            <SField label="Moms (%)" type="number"
              value={s.vat_pct} onChange={(v)=>u('vat_pct', v)}
              help="Normalt 25 %"/>
          </div>
        </SCard>

        {/* ── Ekonomi - Försäljning ────────────────────────────────── */}
        <SCard accent={ACCENTS.econSell}
          iconBg="rgba(63,204,139,.12)" iconColor="var(--c-sell)"
          iconName="wallet" title="Säljpris">
          <div className="formula">
            <div className="f">Säljpris = Spotpris + nätnytta − marginal</div>
            <div className="h">Ingen moms vid försäljning av el.</div>
          </div>
          <div className="sc-grid">
            <SField label="Nätnytta (öre/kWh)" type="number"
              value={s.grid_benefit_ore} onChange={(v)=>u('grid_benefit_ore', v)}
              help="Ersättning från nätbolaget för el du matar ut"/>
            <SField label="Försäljningsmarginal (öre/kWh)" type="number"
              value={s.sale_margin_ore} onChange={(v)=>u('sale_margin_ore', v)}
              help="Vad elhandlaren tar för att förmedla din försäljning"/>
            {/* Cykelkostnad (batterislitage) flyttad till Driftläge → "Gäller alltid"
                (SPEC_GRAVIO_USER_MODE_UI §3.2). Samma fält cycle_cost_ore →
                cycle_cost_kwh, mappningen oförändrad — inga värden nollställs. */}
          </div>
        </SCard>

        {/* ── Effektavgift — EGEN meny (André 31/8): eget ämne med eget kort
            på Översikt, inte en prisparameter under Ekonomi. ── */}
        </section>

        <section id="grp-peak" className="s-group">
        <SCard accent={ACCENTS.peak}
          iconBg="rgba(157,123,255,.12)" iconColor="var(--violet)"
          iconName="lightning" title="Effektavgift" right={<SBeta title="Beta — skyddet är nytt och inte färdigtestat"/>}
          subtitle="Begränsa nätimporten under valda timmar för att hålla ner effekttariffen. Batteriet täcker det som överstiger gränsen.">
          <SBetaNote>
            Effektavgiftshanteringen är ny och ännu inte färdigtestad av oss. Skyddet kan missa en
            topp, och våra tal kan avvika från nätfakturan. Sätt gränsen med egen marginal till
            abonnemangets, och följ upp mot fakturan de första månaderna.
          </SBetaNote>
          <div style={{marginBottom: 14}}>
            <SCheck label="Aktivera effektavgiftshantering"
              value={s.peak_shaving_enabled} onChange={(v)=>u('peak_shaving_enabled', v)}/>
          </div>

          {s.peak_shaving_enabled && (<>
            {/* Lägesvärdena är backendens EXAKTA strängar — seasonal_daynight
                gav 422 (rätt: seasonal_day_night). day_night tillagt: 4 prod-
                användare kör det. Okänt mode-värde från GET bevaras som eget
                val i listan i stället för att klubbas — annars skriver nästa
                spara sönder läget (punkt 5, backend 31/8). */}
            <SSelect label="Läge" value={s.peak_shaving_mode}
              onChange={(v)=>u('peak_shaving_mode', v)}
              options={[
                {value:'simple',            label:'Enkel — en gräns hela året'},
                {value:'day_night',         label:'Dag/Natt — olika gräns dag och natt'},
                {value:'seasonal',          label:'Säsong — vinter/sommar'},
                {value:'seasonal_day_night',label:'Säsong + Dag/Natt (t.ex. Bjäre)'},
                ...(['simple','day_night','seasonal','seasonal_day_night'].includes(s.peak_shaving_mode)
                  ? [] : [{value: s.peak_shaving_mode, label:`Okänt läge (${s.peak_shaving_mode}) — bevaras`}]),
              ]}/>

            {/* Fältsektionerna följer VALT läge (punkt 4, backend 31/8) —
                tidigare visades Bjäre-layouten oavsett val. */}
            {s.peak_shaving_mode === 'simple' && (
              <div className="sc-grid" style={{marginTop:14}}>
                <SField label="Gräns (kWh/h, timsnitt)" type="number"
                  value={s.peak_max_grid_kw}
                  onChange={(v)=>u('peak_max_grid_kw', v)}/>
                <SField label="Avgift (kr/kW)" type="number"
                  value={s.peak_cost_kr_per_kw}
                  onChange={(v)=>u('peak_cost_kr_per_kw', v)}/>
              </div>
            )}
            {s.peak_shaving_mode === 'day_night' && (
              <div className="sc-grid" style={{marginTop:14}}>
                {/* Egna etiketter: "höglast" är säsongslägenas begrepp och
                    finns inte i Dag/Natt. */}
                <PeakWindow start={s.peak_day_start_h} end={s.peak_day_end_h}
                  onStart={(v)=>u('peak_day_start_h', v)}
                  onEnd={(v)=>u('peak_day_end_h', v)}
                  startLabel="Dag börjar" endLabel="Dag slutar"/>
                <SField label="Dag-gräns (kWh/h)" type="number"
                  value={s.peak_day_max_kw}
                  onChange={(v)=>u('peak_day_max_kw', v)}/>
                <SField label="Natt-gräns (kWh/h)" type="number"
                  value={s.peak_night_max_kw}
                  onChange={(v)=>u('peak_night_max_kw', v)}/>
                {/* En gemensam avgift för båda lägena (peak_shaving_cost_kr_per_kw)
                    — bara besparingsvisning, styr inget. */}
                <SField label="Avgift (kr/kW)" type="number"
                  value={s.peak_cost_kr_per_kw}
                  onChange={(v)=>u('peak_cost_kr_per_kw', v)}/>
              </div>
            )}
            {s.peak_shaving_mode === 'seasonal' && (<React.Fragment>
              <div style={{
                border:'1px solid var(--line)', borderRadius:11, padding:'16px 18px',
                background:'rgba(91,168,255,.02)', margin:'14px 0',
              }}>
                <div style={{fontSize:13, fontWeight:600, marginBottom:12}}>Vinter</div>
                <div className="sc-grid">
                  <SField label="Max (kWh/h)" type="number"
                    value={s.peak_winter_high_max_kw}
                    onChange={(v)=>u('peak_winter_high_max_kw', v)}/>
                  <SField label="Avgift (kr/kW)" type="number"
                    value={s.peak_winter_high_cost_kr_per_kw}
                    onChange={(v)=>u('peak_winter_high_cost_kr_per_kw', v)}/>
                  <div className="full">
                    <label className="sc-field-label">Vintermånader</label>
                    <SMonthPicker value={s.peak_winter_months}
                      onChange={(v)=>u('peak_winter_months', v)}/>
                  </div>
                </div>
              </div>
              <div style={{
                border:'1px solid var(--line)', borderRadius:11, padding:'16px 18px',
                background:'rgba(244,200,75,.02)',
              }}>
                <div style={{fontSize:13, fontWeight:600, marginBottom:12}}>Sommar</div>
                <div className="sc-grid">
                  <SField label="Max (kWh/h)" type="number"
                    value={s.peak_summer_max_kw}
                    onChange={(v)=>u('peak_summer_max_kw', v)}/>
                  <SField label="Avgift (kr/kW)" type="number"
                    value={s.peak_summer_cost_kr_per_kw}
                    onChange={(v)=>u('peak_summer_cost_kr_per_kw', v)}/>
                  <div className="full">
                    <label className="sc-field-label">Sommarmånader</label>
                    <SMonthPicker value={s.peak_summer_months}
                      onChange={(v)=>u('peak_summer_months', v)}/>
                  </div>
                </div>
              </div>
            </React.Fragment>)}
            {s.peak_shaving_mode === 'seasonal_day_night' && (<React.Fragment>
              <div className="sc-active-chip" style={{marginTop:14}}>
                <div>
                  <div className="l">Aktiv gräns just nu</div>
                  <div className="v">{s.peak_winter_high_max_kw} kW</div>
                </div>
                <div className="h">Period 1 dag (månad {window.hemsDate().getMonth()+1}, kl {window.hemsDate().getHours()})</div>
              </div>
  
              <div className="sc-field-help" style={{marginBottom: 14}}>
                För nätbolag där vintern har olika höglast/låglast-tariff och sommaren har en gräns dygnet runt.
              </div>
  
              {/* Winter */}
              <div style={{
                border:'1px solid var(--line)', borderRadius:11, padding:'16px 18px',
                background:'rgba(91,168,255,.02)', marginBottom: 14,
              }}>
                <div style={{fontSize:13, fontWeight:600, marginBottom:12}}>Vinter — höglast &amp; låglast</div>
                <div className="sc-grid">
                  <PeakWindow start={s.peak_winter_high_start_h} end={s.peak_winter_high_end_h}
                    onStart={(v)=>u('peak_winter_high_start_h', v)}
                    onEnd={(v)=>u('peak_winter_high_end_h', v)}/>
                  <SField label="Höglast max (kW)" type="number"
                    value={s.peak_winter_high_max_kw}
                    onChange={(v)=>u('peak_winter_high_max_kw', v)}/>
                  <SField label="Låglast max (kW)" type="number"
                    value={s.peak_winter_low_max_kw}
                    onChange={(v)=>u('peak_winter_low_max_kw', v)}/>
                  <SField label="Höglast-avgift (kr/kW)" type="number"
                    value={s.peak_winter_high_cost_kr_per_kw}
                    onChange={(v)=>u('peak_winter_high_cost_kr_per_kw', v)}/>
                  <SField label="Låglast-avgift (kr/kW)" type="number"
                    value={s.peak_winter_low_cost_kr_per_kw}
                    onChange={(v)=>u('peak_winter_low_cost_kr_per_kw', v)}/>
                  <div className="full">
                    <label className="sc-field-label">Vintermånader</label>
                    <SMonthPicker value={s.peak_winter_months}
                      onChange={(v)=>u('peak_winter_months', v)}/>
                  </div>
                </div>
              </div>
  
              {/* Summer */}
              <div style={{
                border:'1px solid var(--line)', borderRadius:11, padding:'16px 18px',
                background:'rgba(244,200,75,.02)',
              }}>
                <div style={{fontSize:13, fontWeight:600, marginBottom:12}}>Sommar — en gräns dygnet runt</div>
                <div className="sc-grid">
                  <SField label="Max (kWh/h)" type="number"
                    value={s.peak_summer_max_kw}
                    onChange={(v)=>u('peak_summer_max_kw', v)}/>
                  <SField label="Avgift (kr/kW)" type="number"
                    value={s.peak_summer_cost_kr_per_kw}
                    onChange={(v)=>u('peak_summer_cost_kr_per_kw', v)}/>
                  <div className="full">
                    <label className="sc-field-label">Sommarmånader</label>
                    <SMonthPicker value={s.peak_summer_months}
                      onChange={(v)=>u('peak_summer_months', v)}/>
                  </div>
                </div>
              </div>
  
            </React.Fragment>)}
            {/* Reserv för toppar — ALLA lägen, INNANFÖR enabled-gaten
                (kontrakt 1/9 punkt A). Tomt = automatiskt (null, aldrig 0);
                placeholdern visar det faktiska automatiska värdet. */}
            <div className="sc-grid" style={{marginTop:14}}>
              <SField label="Reserv för toppar (kWh)" type="number"
                value={s.peak_reserve_kwh}
                onChange={(v)=>u('peak_reserve_kwh', v)}
                placeholder={autoReserve
                  ? `Automatiskt: ${(window.lwNum || window.gcNum) ? (window.lwNum || window.gcNum)(autoReserve.kwh, 1) : autoReserve.kwh} kWh (${Math.round(autoReserve.percent || 0)} %)`
                  : 'Tomt = automatiskt'}
                help={peakReserveErr(s.peak_reserve_kwh)
                  ? <span style={{color:'var(--c-peak)', fontWeight:600}}>{peakReserveErr(s.peak_reserve_kwh)}</span>
                  : 'Minst 1 kWh. Tomt eller 0 = HEMS räknar själv utifrån gräns och erfarenhet.'}/>
            </div>
          </>)}
        </SCard>


        {/* ── Byt lösenord ─────────────────────────────────────────── */}
        </section>

        <section id="grp-konto" className="s-group">
        <PasswordCard apiKey={SETTINGS_API_KEY} initialEmail={s.email}/>

        {/* ── Homey API-nyckel ─────────────────────────────────────── */}
        {/* Säkerhetsfix 2026-05-29: visa data.api_key (Homey-nyckeln per user) */}
        {/* från backend, INTE SETTINGS_API_KEY (sess_*-token för dashboard-auth). */}
        {/* Innan: hårdkodad Andrés hems_3694... → alla såg Andrés nyckel. */}
        <SCard accent={ACCENTS.api}
          iconBg="rgba(157,123,255,.12)" iconColor="var(--violet)"
          iconName="gear" title="Homey API-nyckel"
          subtitle="Klistra in den i Homey-appen för att ansluta din installation">
          <SCopyField value={s.api_key_plain || s.api_key || '(saknas — kontakta support)'}/>
        </SCard>

        {/* ── Logga ut ─────────────────────────────────────────────── */}
        <SCard accent="#FF5A65"
          iconBg="rgba(255,90,101,.12)" iconColor="var(--c-peak)"
          iconName="arrowr" title="Konto"
          subtitle="Avsluta sessionen på den här enheten">
          <button type="button"
            onClick={() => {
              localStorage.removeItem('hems_session_token');
              localStorage.removeItem('hems_user_email');
              localStorage.removeItem('hems_user_name');
              localStorage.removeItem('hems_user_id');
              window.location.href = 'login.html';
            }}
            style={{
              display:'inline-flex', alignItems:'center', gap:8,
              padding:'10px 18px', borderRadius:10,
              background:'rgba(255,90,101,.10)',
              border:'1px solid rgba(255,90,101,.35)',
              color:'var(--c-peak)', font:'inherit', fontSize:14, fontWeight:500,
              cursor:'pointer'
            }}>
            Logga ut
          </button>
        </SCard>

        <div className="settings-foot">
          Det kan ta upp till 5 minuter innan ändrade inställningar slår igenom i systemets beräkningar och dashboard.
        </div>
        </section>
      </main>
      </div>
    </div>
  );
}

// ── Live Leaflet map with draggable pin + click-to-set ─────────────────
function PositionMap({ lat, lng, onChange }){
  const containerRef = React.useRef(null);
  const mapRef = React.useRef(null);
  const markerRef = React.useRef(null);

  // Init once
  React.useEffect(() => {
    if (mapRef.current || !containerRef.current || !window.L) return;
    const L = window.L;
    const map = L.map(containerRef.current, {
      zoomControl: true,
      attributionControl: true,
      worldCopyJump: true,
    }).setView([lat || 59.33, lng || 18.06], 11);

    /* OSM-tiles i stället för CARTO (31/8): CARTO:s fria basemap kräver numera
       API-nyckel och vattenstämplar hela kartan "API KEY REQUIRED". OSM är
       nyckelfri; mörkret görs med CSS-filter på tile-panelen (settings.css
       .sc-map .leaflet-tile-pane) så paletten fortfarande matchar. */
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      maxZoom: 19,
    }).addTo(map);

    // Custom HTML pin so it picks up theme colour
    const pinIcon = L.divIcon({
      className: 'sc-pin-icon',
      html: `<svg viewBox="0 0 24 24" fill="#5BA8FF" stroke="#0A0F18" stroke-width="1.4" width="32" height="32" style="filter: drop-shadow(0 3px 5px rgba(91,168,255,.45));">
        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/>
      </svg>`,
      iconSize: [32, 32],
      iconAnchor: [16, 30],
    });

    const marker = L.marker([lat || 59.33, lng || 18.06], {
      icon: pinIcon, draggable: true,
    }).addTo(map);

    marker.on('dragend', () => {
      const p = marker.getLatLng();
      onChange(p.lat, p.lng);
    });
    map.on('click', (e) => {
      marker.setLatLng(e.latlng);
      onChange(e.latlng.lat, e.latlng.lng);
    });

    mapRef.current = map;
    markerRef.current = marker;

    // Help Leaflet pick up its real size after layout
    setTimeout(() => map.invalidateSize(), 60);

    return () => { map.remove(); mapRef.current = null; markerRef.current = null; };
  }, []);

  // External lat/lng changes (typed into fields, geolocation) → sync map
  React.useEffect(() => {
    if (!mapRef.current || !markerRef.current) return;
    if (typeof lat !== 'number' || typeof lng !== 'number') return;
    const p = markerRef.current.getLatLng();
    if (Math.abs(p.lat - lat) > 1e-4 || Math.abs(p.lng - lng) > 1e-4){
      markerRef.current.setLatLng([lat, lng]);
      mapRef.current.panTo([lat, lng]);
    }
  }, [lat, lng]);

  return (
    <div className="sc-map">
      <div ref={containerRef} style={{width:'100%', height:'100%'}}/>
      <span className="coords">
        {typeof lat === 'number' ? lat.toFixed(4) : '—'}, {typeof lng === 'number' ? lng.toFixed(4) : '—'}
      </span>
    </div>
  );
}

// Driftläge-kortet bor nu i settings-mode.jsx (RunModeCard, 2026-07-30).
// OperatingModeCard + self_sufficiency-valet är rivet enligt spec §2.

// ── Password change card (separate endpoint — placeholder for now) ─────
function PasswordCard({ apiKey, initialEmail }){
  // Förifyll med inloggad användares email (skickas in från settings-fetch).
  // Fältet är fortfarande redigerbart om någon byter konto.
  const [email, setEmail] = React.useState(initialEmail || '');
  React.useEffect(() => { if (initialEmail) setEmail(initialEmail); }, [initialEmail]);
  const [pw1, setPw1] = React.useState('');
  const [pw2, setPw2] = React.useState('');
  const [status, setStatus] = React.useState(null);

  const onSave = () => {
    if (pw1.length < 6){ setStatus({kind:'err', msg:'Minst 6 tecken'}); return; }
    if (pw1 !== pw2){ setStatus({kind:'err', msg:'Lösenorden matchar inte'}); return; }
    setStatus({kind:'info', msg:'Lösenordsändring kräver separat endpoint — placeholder'});
    setTimeout(()=>setStatus(null), 3500);
  };

  return (
    <SCard accent={ACCENTS.password}
      iconBg="rgba(63,204,139,.12)" iconColor="var(--c-sell)"
      iconName="gear" title="Byt lösenord"
      subtitle="Uppdatera ditt inloggningslösenord till HEMS">
      <div className="sc-grid">
        <SField label="E-post" type="email" value={email} onChange={setEmail}/>
        <div/>
        <SField label="Nytt lösenord" type="password" placeholder="Minst 6 tecken"
          value={pw1} onChange={setPw1}/>
        <SField label="Bekräfta lösenord" type="password" placeholder="Upprepa lösenordet"
          value={pw2} onChange={setPw2}/>
      </div>
      <div style={{marginTop: 14, display:'flex', gap:10, alignItems:'center'}}>
        <button className="btn-primary" onClick={onSave}
          disabled={!pw1 || !pw2}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="14" height="14"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          Spara nytt lösenord
        </button>
        {status && <span className={`save-toast ${status.kind}`}><span className="dot"/>{status.msg}</span>}
      </div>
    </SCard>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<SettingsApp/>);