/* ============================================================================
   INSTÄLLNINGAR · LASTFÖNSTER — fönsterlistan i settings-formspråket
   ----------------------------------------------------------------------------
   Samma logik som Last-fliken (lastfonster.js, lw*), samma regler, samma
   texter — men renderad med settings.css i stället för Tailwind. Två
   editorer får aldrig validera olika; därför delar de logiken och skiljer
   sig bara i utseende.
   Kravlista: DESIGN_KRAVLISTA_lastfonster_2026-09-02 p1–p3, p5.
   ========================================================================== */

const SLW_BOX = { border:'1px solid rgba(255,255,255,.07)', borderRadius:8,
  padding:'10px 10px 8px', marginBottom:8, background:'rgba(255,255,255,.015)' };
const SLW_BOX_BAD = { ...SLW_BOX, borderColor:'rgba(255,107,107,.45)', background:'rgba(255,107,107,.05)' };
const SLW_DAY = (on) => ({ font:'inherit', fontSize:11.5, fontWeight:700, flex:1,
  padding:'5px 0', cursor:'pointer', borderRadius:6,
  border: on ? '1px solid rgba(91,168,255,.55)' : '1px solid var(--line)',
  background: on ? 'rgba(91,168,255,.18)' : 'transparent',
  color: on ? '#BBD7FF' : 'var(--ink-3)' });
const SLW_PILL = (on) => ({ font:'inherit', fontSize:11.5, fontWeight:600,
  padding:'5px 10px', cursor:'pointer', borderRadius:6,
  border: on ? '1px solid rgba(244,200,75,.45)' : '1px solid var(--line)',
  background: on ? 'rgba(244,200,75,.14)' : 'transparent',
  color: on ? '#F4C84B' : 'var(--ink-2)' });
const SLW_PILL_B = (on) => ({ ...SLW_PILL(on),
  border: on ? '1px solid rgba(91,168,255,.5)' : '1px solid var(--line)',
  background: on ? 'rgba(91,168,255,.16)' : 'transparent',
  color: on ? '#BBD7FF' : 'var(--ink-2)' });

function SettingsWindowRow({ win, idx, count, err, measured, reportsPower, showMeasured, load, onChange, onRemove }){
  const w = { ...window.LW_WIN_DEFAULT, ...(win || {}) };
  const days = Array.isArray(w.days) ? w.days : [];
  const span = window.lwSpan(w);
  const mTxt = window.lwRunsText(measured);
  const planned = showMeasured && reportsPower ? window.lwPlanned(measured, load, w) : null;
  const prog = showMeasured && reportsPower ? window.lwProgress(measured) : null;
  const running = !!(measured && measured.running === true);
  const hist = (measured && Array.isArray(measured.history)) ? measured.history.slice(0, 10) : [];
  const [open, setOpen] = React.useState(false);
  const toggleDay = (d) => onChange({ days: days.indexOf(d) >= 0
    ? days.filter(x => x !== d) : days.concat([d]).sort((a, b) => a - b) });

  return (
    <div style={err ? SLW_BOX_BAD : SLW_BOX}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:6}}>
        <span className="sc-seg-label" style={{margin:0}}>Fönster {idx + 1}</span>
        {count > 1 && (
          <button type="button" onClick={onRemove}
            style={{font:'inherit', fontSize:11.5, color:'var(--ink-3)', background:'none', border:0, padding:0, cursor:'pointer'}}>
            Ta bort
          </button>
        )}
      </div>

      <div style={{display:'flex', gap:4, marginBottom:8}}>
        {window.LW_DAY_SHORT.map((s, d) => (
          <button key={d} type="button" onClick={() => toggleDay(d)}
            aria-label={window.LW_DAY_NAME[d]} aria-pressed={days.indexOf(d) >= 0}
            style={SLW_DAY(days.indexOf(d) >= 0)}>{s}</button>
        ))}
      </div>

      <div className="sc-grid">
        <SField label="Tidigast start" type="time"
          value={w.earliest} onChange={(v)=>onChange({earliest: v})}/>
        <SField label="Senast klar" type="time"
          value={w.latest} onChange={(v)=>onChange({latest: v})}/>
        <SField label="Körtid (timmar)" type="number"
          value={w.duration_hours} onChange={(v)=>onChange({duration_hours: v})}
          help="Körtid för DETTA fönster — HEMS lägger den på de billigaste kvartarna inom fönstret"/>
        <div/>
      </div>

      <div style={{display:'flex', flexWrap:'wrap', gap:6, alignItems:'center', marginTop:8}}>
        <button type="button" style={SLW_PILL(w.solar_only === true)}
          onClick={()=>onChange({solar_only: !(w.solar_only === true)})}>☀ Bara sol</button>
        <button type="button" style={SLW_PILL_B(w.mode === 'split')}
          onClick={()=>onChange({mode: w.mode === 'split' ? 'consecutive' : 'split'})}>Får delas upp</button>
        {w.mode === 'split' && (
          <select value={String(w.max_parts || 2)} aria-label="Max antal delar"
            onChange={(e)=>onChange({max_parts: Number(e.target.value)})}
            style={{font:'inherit', fontSize:11.5, padding:'5px 8px', borderRadius:6,
              border:'1px solid var(--line)', background:'transparent', color:'var(--ink-2)'}}>
            {[2,3,4,5,6,7,8].map(n => <option key={n} value={String(n)}>max {n} delar</option>)}
          </select>
        )}
      </div>

      {w.solar_only === true && <div className="sc-field-help" style={{marginTop:6}}>{window.LW_HELP_SOLAR}</div>}
      {span && span.wrap && <div className="sc-field-help" style={{marginTop:4}}>{window.LW_HELP_WRAP}</div>}
      {err && <div className="sc-field-help" style={{marginTop:6, color:'var(--c-peak)', fontWeight:600}}>{err}</div>}

      {/* Vad HEMS planerar med (Andrés beslut 3/9) — blocket finns bara när
          backend svarar med enabled:true. Flagga av eller endpoint saknas ⇒
          ingenting (spec §5). */}
      {showMeasured && (
      <div style={{marginTop:8, paddingTop:6, borderTop:'1px solid rgba(255,255,255,.05)'}}>
        {!reportsPower ? (
          <div className="sc-field-help">Slå på förbrukningsläsning för att mäta</div>
        ) : (
          <React.Fragment>
            {planned ? (
              <div style={{display:'flex', flexWrap:'wrap', alignItems:'baseline', gap:'0 8px'}}>
                <span className="sc-seg-label" style={{margin:0}}>Planerar med</span>
                <strong style={{fontSize:13}}>{window.lwNum(planned.kwh, planned.kwh < 10 ? 2 : 1)} kWh</strong>
                <span style={{fontSize:11.5, color: planned.src === 'specified' ? 'var(--ink-3)' : '#C6E86B'}}>
                  {window.LW_SRC_TXT[planned.src] || planned.src}
                </span>
              </div>
            ) : (
              <div className="sc-field-help">HEMS planerar efter inlärt värde</div>
            )}
            {prog && (
              <div style={{display:'flex', alignItems:'center', gap:8, marginTop:5}}>
                <span style={{display:'inline-block', width:64, height:4, borderRadius:99, background:'rgba(255,255,255,.08)', overflow:'hidden'}}>
                  <span style={{display:'block', height:'100%', borderRadius:99, background:'rgba(91,168,255,.7)',
                    width: Math.round(100 * prog.n / prog.need) + '%'}}/>
                </span>
                <span className="sc-field-help" style={{margin:0}}>
                  Inlärning {prog.n} av {prog.need} körningar{running ? ' · mäter nu' : ''}
                </span>
              </div>
            )}
            <div className="sc-field-help" style={{marginTop:5}}>
              {mTxt || (running ? 'Mäter körningen just nu…' : 'Ingen körning mätt ännu')}
              {hist.length > 0 && (
                <button type="button" onClick={()=>setOpen(!open)}
                  style={{marginLeft:6, font:'inherit', fontSize:11.5, color:'var(--ink-3)', background:'none', border:0, padding:0, cursor:'pointer', textDecoration:'underline dotted', textUnderlineOffset:2}}>
                  {open ? 'Dölj körningar' : `Visa körningar (${hist.length})`}
                </button>
              )}
            </div>
          </React.Fragment>
        )}
      </div>
      )}
      {showMeasured && open && hist.length > 0 && (
        <div style={{marginTop:4}}>
          {hist.map((h, i) => {
            const ex = h && h.excluded ? String(h.excluded) : null;
            return (
              <div key={i} className="sc-field-help"
                style={{display:'flex', gap:10, opacity: ex ? .55 : 1}}>
                <span style={{minWidth:44}}>{h && h.day_key ? String(h.day_key).slice(5) : '—'}</span>
                <span style={{minWidth:66, textAlign:'right'}}>{h && h.kwh != null ? window.lwNum(h.kwh, 2) + ' kWh' : '—'}</span>
                {ex && <span>{window.LW_EXCL_TXT[ex] || 'räknas ej'}</span>}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function SettingsWindowList({ load, wins, errs, rowErrs, runs, onChange }){
  const list = Array.isArray(wins) ? wins : [];
  const max = window.LW_MAX_ROWS;
  const reportsPower = load && load.reports_power === true;
  const showMeasured = !!(runs && runs.enabled === true);
  const upd = (i, patch) => onChange(list.map((w, k) => k === i ? { ...w, ...patch } : w));
  const add = () => { if (list.length >= max) return;
    onChange(list.concat([window.lwNextFreeWindow(list)])); };
  // V6: backend avvisar windows: []. Sista raden går därför inte att ta bort.
  const del = (i) => { if (list.length <= 1) return; onChange(list.filter((_, k) => k !== i)); };

  return (
    <div style={{marginTop:12}}>
      <div className="sc-seg-label">Körfönster</div>
      {list.map((w, i) => (
        <SettingsWindowRow key={w._k || i} win={w} idx={i} count={list.length}
          err={(rowErrs && rowErrs[i]) || (errs && errs[i]) || null}
          measured={window.lwRunsFor(runs, load, i)} reportsPower={reportsPower}
          showMeasured={showMeasured} load={load}
          onChange={(p)=>upd(i, p)} onRemove={()=>del(i)}/>
      ))}
      {list.length < max ? (
        <button type="button" className="btn-secondary" onClick={add}>+ Lägg till fönster</button>
      ) : (
        <div className="sc-field-help">Max {max} fönster per last.</div>
      )}
    </div>
  );
}

Object.assign(window, { SettingsWindowRow, SettingsWindowList });