/* ============================================================================
   GC · LASTFÖNSTER (vy) — fönsterlistan på Last-fliken
   ----------------------------------------------------------------------------
   All logik ligger i lastfonster.js (lw*) och delas med inställningssidan.
   Den här filen är bara Tailwind-renderingen i GC-formspråket.
   Kravlista: DESIGN_KRAVLISTA_lastfonster_2026-09-02 p1–p3, p5.
   ========================================================================== */

const LW_F = 'w-full rounded-lg border border-slate-700 bg-slate-800/70 px-2 py-1.5 text-sm font-bold text-slate-100 outline-none focus:border-slate-500';
const LW_L = 'mb-1 text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-500';
const LW_PILL = (on) => `rounded-lg border px-2 py-1 text-[11px] font-bold transition-colors ${
  on ? 'border-lime-400 bg-lime-500/15 text-lime-300'
     : 'border-slate-700 bg-slate-800/70 text-slate-400 hover:text-slate-200'}`;

function GcWindowRow({ 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 [open, setOpen] = React.useState(false);
  const toggleDay = (d) => {
    const next = days.indexOf(d) >= 0 ? days.filter(x => x !== d) : days.concat([d]).sort((a, b) => a - b);
    onChange({ days: next });
  };
  const hist = (measured && Array.isArray(measured.history)) ? measured.history.slice(0, 10) : [];
  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);

  return (
    <div className={`rounded-xl border px-3 py-2.5 ${err ? 'border-rose-500/60 bg-rose-500/5' : 'border-slate-800 bg-slate-900/50'}`}>
      <div className="flex items-center justify-between gap-2">
        <span className="text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-500">Fönster {idx + 1}</span>
        {count > 1 && (
          <button onClick={onRemove} aria-label={`Ta bort fönster ${idx + 1}`}
            className="px-1 text-[11px] font-semibold text-slate-600 hover:text-rose-400">Ta bort</button>
        )}
      </div>

      <div className="mt-1.5 flex gap-1">
        {window.LW_DAY_SHORT.map((s, d) => (
          <button key={d} onClick={() => toggleDay(d)} aria-label={window.LW_DAY_NAME[d]}
            aria-pressed={days.indexOf(d) >= 0}
            className={`h-7 flex-1 rounded-md border text-[11px] font-bold transition-colors ${
              days.indexOf(d) >= 0 ? 'border-sky-400 bg-sky-500/20 text-sky-200'
                                   : 'border-slate-700 bg-slate-800/60 text-slate-500 hover:text-slate-300'}`}>
            {s}
          </button>
        ))}
      </div>

      <div className="mt-2 grid grid-cols-3 gap-2">
        <div>
          <div className={LW_L}>Tidigast</div>
          <input type="time" value={w.earliest} step="900"
            onChange={(e) => onChange({ earliest: e.target.value })}
            className={LW_F} style={{ ...window.GC_MONO, colorScheme: 'dark' }}/>
        </div>
        <div>
          <div className={LW_L}>Senast klar</div>
          <input type="time" value={w.latest} step="900"
            onChange={(e) => onChange({ latest: e.target.value })}
            className={LW_F} style={{ ...window.GC_MONO, colorScheme: 'dark' }}/>
        </div>
        <div>
          <div className={LW_L}>Körtid (h)</div>
          <input type="number" min="0.25" max="24" step="0.25" value={w.duration_hours}
            onChange={(e) => onChange({ duration_hours: Math.max(0.25, Number(e.target.value) || 0.25) })}
            className={LW_F} style={{ ...window.GC_MONO, colorScheme: 'dark' }}/>
        </div>
      </div>

      <div className="mt-2 flex flex-wrap items-center gap-1.5">
        <button onClick={() => onChange({ solar_only: !w.solar_only })} className={LW_PILL(w.solar_only === true)}>
          ☀ Bara sol
        </button>
        <button onClick={() => onChange({ mode: w.mode === 'split' ? 'consecutive' : 'split' })}
          className={LW_PILL(w.mode === 'split')}>
          Får delas upp
        </button>
        {w.mode === 'split' && (
          <select value={String(w.max_parts || 2)} onChange={(e) => onChange({ max_parts: Number(e.target.value) })}
            aria-label="Max antal delar"
            className="rounded-lg border border-slate-700 bg-slate-800/70 px-1.5 py-1 text-[11px] font-bold text-slate-100"
            style={{ ...window.GC_MONO, colorScheme: 'dark' }}>
            {[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="mt-1.5 text-[11px] leading-relaxed text-slate-500">{window.LW_HELP_SOLAR}</div>}
      {span && span.wrap && <div className="mt-1 text-[11px] text-slate-500">{window.LW_HELP_WRAP}</div>}
      {err && <div className="mt-1.5 text-[11px] font-semibold leading-relaxed text-rose-300">{err}</div>}

      {/* Vad HEMS planerar med (p5, Andrés beslut 3/9). Blocket finns bara
          när backend svarar med enabled:true — är flaggan av (eller endpointen
          inte deployad) visas INGENTING enligt spec §5. */}
      {showMeasured && (
      <div className="mt-2 border-t border-slate-800/80 pt-2">
        {!reportsPower ? (
          <div className="text-[11px] text-slate-500">Slå på förbrukningsläsning för att mäta</div>
        ) : (
          <React.Fragment>
            {planned ? (
              <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
                <span className="text-[10px] font-semibold uppercase tracking-[0.15em] text-slate-500">Planerar med</span>
                <span className="text-sm font-bold text-slate-100" style={window.GC_MONO}>
                  {window.lwNum(planned.kwh, planned.kwh < 10 ? 2 : 1)} kWh
                </span>
                <span className={`text-[11px] ${planned.src === 'specified' ? 'text-slate-500' : 'text-lime-300'}`}>
                  {window.LW_SRC_TXT[planned.src] || planned.src}
                </span>
              </div>
            ) : (
              <div className="text-[11px] text-slate-500">HEMS planerar efter inlärt värde</div>
            )}
            {prog && (
              <div className="mt-1 flex items-center gap-2">
                <div className="h-1 w-16 overflow-hidden rounded-full bg-slate-800">
                  <div className="h-full rounded-full bg-sky-400/70"
                    style={{ width: Math.round(100 * prog.n / prog.need) + '%' }}/>
                </div>
                <span className="text-[11px] text-slate-500">
                  Inlärning {prog.n} av {prog.need} körningar{running ? ' · mäter nu' : ''}
                </span>
              </div>
            )}
            <div className="mt-1 text-[11px] leading-relaxed text-slate-500">
              {mTxt || (running ? 'Mäter körningen just nu…' : 'Ingen körning mätt ännu')}
              {hist.length > 0 && (
                <button onClick={() => setOpen(!open)} className="ml-1.5 underline decoration-dotted underline-offset-2 hover:text-slate-300">
                  {open ? 'Dölj körningar' : `Visa körningar (${hist.length})`}
                </button>
              )}
            </div>
          </React.Fragment>
        )}
      </div>
      )}
      {showMeasured && open && hist.length > 0 && (
        <div className="mt-1 flex flex-col gap-0.5">
          {hist.map((h, i) => {
            const ex = h && h.excluded ? String(h.excluded) : null;
            return (
              <div key={i} className={`flex items-baseline gap-2 text-[11px] ${ex ? 'text-slate-600' : 'text-slate-400'}`}
                style={window.GC_MONO}>
                <span className="w-12 shrink-0">{h && h.day_key ? String(h.day_key).slice(5) : '—'}</span>
                <span className="w-20 shrink-0 text-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 GcWindowList({ 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)])); };
  /* Minst ett fönster krävs (V6): backend avvisar windows: []. Sista raden
     går därför inte att ta bort — knappen finns inte, i stället för att
     finnas och ge 422. */
  const del = (i) => { if (list.length <= 1) return; onChange(list.filter((_, k) => k !== i)); };

  return (
    <div className="flex flex-col gap-2">
      {list.map((w, i) => (
        <GcWindowRow 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 onClick={add}
          className="rounded-lg border border-dashed border-slate-700 py-1.5 text-xs font-semibold text-slate-400 hover:border-slate-600 hover:text-slate-200">
          + Lägg till fönster
        </button>
      ) : (
        <div className="rounded-lg border border-dashed border-slate-800 py-1.5 text-center text-xs text-slate-600">
          Max {max} fönster
        </div>
      )}
    </div>
  );
}

Object.assign(window, { GcWindowRow, GcWindowList });