/* flow-v2.jsx — energiflöde + dagens plan, kollegans komposition mot vår data.
   ────────────────────────────────────────────────────────────────────────
   Porterat ur GravioApp.jsx OversiktView. Två skillnader mot prototypen, båda
   tvingande:

   1. NODERNA RÄKNAS UR ENHETSLISTAN. Prototypen har tre batterier och två
      laddboxar på inskrivna koordinater. Hushållet har ett batteri och en
      laddbox. Satelliterna placeras därför på bågar runt centrum: sol uppe,
      hemmet uppe till vänster, elnätet nere, batterier på höger båge,
      laddboxar på nedre vänstra. Antalet ändrar bilden, inte layoutreglerna.

   2. INGET RITAS SOM VI INTE HAR. Prototypens färg per laddbox (sol/nät/
      batteri) bygger på ett fält som bara finns live och bara summerat över
      alla boxar. Den färgen sätts inte här. Se BACKEND-BEHOV nedan.

   Färgerna är våra CSS-variabler. Prototypens slate/emerald-palett följer
   inte med — två parallella färgsystem i samma app går inte att underhålla. */

const FV_MONO = { fontFamily: '"Geist Mono", ui-monospace, monospace' };
const FV_C = { x: 340, y: 340 };
const FV_R = 235;              // avstånd centrum → satellit
const DEG = Math.PI / 180;

/* Layout: vår BEFINTLIGA flödesvys jämna cirkel (flow.jsx), inte prototypens
   inskrivna koordinater. Alla noder fördelas jämnt runt 360° oavsett antal —
   sol fixerad i topp, sedan medurs: batterier → elnät → laddboxar (baklänges)
   → hemmet. Cirkeln "andas" efter antalet enheter: 1 batteri + elnät + hem +
   1 laddbox ger en femhörning, tre batterier + två laddboxar en oktagon.
   Prototypens innehåll per nod behålls (värde, enhet, namn, status). */
const fvPos = (deg) => ({ x: FV_C.x + Math.cos(deg*DEG)*FV_R, y: FV_C.y + Math.sin(deg*DEG)*FV_R });
function fvCircle(ids){
  const step = 360 / ids.length;
  const out = {};
  ids.forEach((id, i) => { out[id] = fvPos(-90 + i*step); });
  return out;
}

const fvNum = (n, d=1) => n == null ? '—'
  : n.toLocaleString('sv-SE', { minimumFractionDigits:d, maximumFractionDigits:d });
const fvHHMM = (q) => String(Math.floor((q%96)/4)).padStart(2,'0')+':'+String(((q%96)%4)*15).padStart(2,'0');

// Orsaken (sol/nät/hus/export) kommer ur backendens beslut. Saknas den skrivs
// bara riktningen — aldrig en påhittad orsak ur effektens tecken.
const batStatusText = (bp) => {
  if (bp == null || bp.p == null) return 'okänt';
  if (bp.p > 0.05) return bp.src === 'sol' ? 'laddar · sol' : bp.src === 'nät' ? 'laddar · nät' : 'laddar';
  if (bp.p < -0.05) return bp.src === 'export' ? 'säljer' : bp.src === 'hus' ? 'täcker hus' : 'laddar ur';
  return 'vilar';
};

/* ---- Sammanhängande intervall ------------------------------------------
   Prototypens mkRanges, med en nödvändig skillnad: utjämningen får INTE
   användas på predikat som bär en orsak.

   Hålfyllningen (en avvikande kvart mitt i en körning räknas med) är rimlig
   för brusiga PROGNOSvärden — sol och förbrukning vandrar över en tröskel och
   tillbaka. Men för predikat som läser backendens `src` gör den ett positivt
   påstående om en kvart där backend angett något annat: kvart 84 säljer
   6,76 kW till nätet och fylldes in i "batteriet täcker huset" (2026-08-15).

   smooth:false → varje kvart står för sig. minLen:1 → även en enstaka kvart
   redovisas, för händelser som inte kan vara brus (8,5 kW export i 15 min). */
function fvRanges(day, pred, opts){
  const { smooth = true, minLen = 2 } = opts || {};
  const b = day.map(pred);
  if (smooth) for (let i = 1; i < day.length-1; i++) if (!b[i] && b[i-1] && b[i+1]) b[i] = true;
  const out = []; let st = null;
  for (let i = 0; i <= day.length; i++){
    const ok = i < day.length && b[i];
    if (ok && st === null) st = i;
    if (!ok && st !== null){ if (i - st >= minLen) out.push([st, i]); st = null; }
  }
  return out;
}

const FvTimes = ({ rs }) => (
  <span className="fv-t" style={FV_MONO}>
    {rs.map(([a,b]) => `${fvHHMM(a)}–${fvHHMM(b)}`).join(', ')}
  </span>
);

function FlowV2({ day, units, nowIdx }){
  const s = day && day[nowIdx] ? day[nowIdx] : null;
  if (!s) return null;
  const mode = window.GRAVIO_MODES[s.mode] || window.GRAVIO_MODES.vanta;

  /* Noder. Sol/hem/elnät alltid; batterier och laddboxar ur enhetslistan.
     Positionerna kommer ur den jämna cirkeln, aldrig ur fasta koordinater. */
  const nodes = React.useMemo(() => {
    const batIds = units.bats.map((_, k) => 'bat'+k);
    const evIds  = units.evs.map((_, k) => 'ev'+k);
    // Medurs från toppen: sol → batterier → elnät → laddboxar baklänges → hem.
    const order = ['sol', ...batIds, 'grid', ...evIds.slice().reverse(), 'home'];
    const P = fvCircle(order);

    /* Adaptern löser live/utfall/plan per kvart — den här vyn läste tidigare
       live själv, men GcOversikt skickar inget live-objekt och avläsningen föll
       tyst tillbaka på planen. Nu bär s.sol/s.cons redan mätvärdet vid NU. */
    const solKw = s.sol, consKw = s.cons;
    const gIn = s.gridIn || 0, gOut = s.gridOut || 0;
    const out = [];

    out.push({ id:'sol', ...P.sol, r:54, col:'var(--c-charge-sol)', icon:'sol',
      val: fvNum(solKw), unit:'kW', name:'Sol',
      status: solKw > 0.05 ? 'producerar' : 'vilar', active: solKw > 0.05, dir:'in' });

    units.bats.forEach((u, k) => {
      const bp = s.bat[k] || s.bat[0];
      /* Per enhet bara när backend mäter per enhet. Ett banktal utslaget på
         varje nod hade sett ut som tre mätvärden. */
      const pct = s.socPerUnit ? (s.socPct[k] ?? null)
        : (units.bats.length === 1 ? s.socPct[0] : null);
      // #3FCC8B = HEMS-styrt batteri i vår befintliga flödesvy. Samma färg här
      // så de två vyerna inte ger batteriet olika identitet.
      out.push({ id:'bat'+k, ...P['bat'+k], r:52, col:'#3FCC8B',
        /* Samma regel som gc-oversikt: SoC som huvudtal, effekt som andra rad.
           Båda behövs — nivån svarar "hur mycket finns kvar", effekten "vad gör
           det just nu". Tecknet följer gamla designen: minus = lämnar batteriet.
           De två kopiorna av flödet får inte ge batteriet olika huvudtal. */
        val: pct != null ? String(Math.round(pct)) : '—', unit:'%',
        sub: !bp || bp.p == null || Math.abs(bp.p) <= 0.05 ? null
          : ((bp.p > 0 ? '+' : '−') + fvNum(Math.abs(bp.p)) + ' kW'),
        subCol: (bp && bp.p || 0) > 0 ? '#4ade80' : '#7dd3fc',
        name: bp?.aggregate ? 'Batterier (summa)' : u.name,
        status: batStatusText(bp),
        active: bp && bp.p != null && Math.abs(bp.p) > 0.05,
        dir: bp && bp.p > 0 ? 'out' : 'in' });
    });

    out.push({ id:'grid', ...P.grid, r:54, icon:'grid',
      col: gOut > 0.05 ? 'var(--c-sell)' : 'var(--c-charge-net)',
      val: fvNum(gOut > 0.05 ? gOut : gIn), unit:'kW', name:'Elnät',
      status: gOut > 0.05 ? 'säljer' : gIn > 0.05 ? 'köper' : 'vilar',
      active: gOut > 0.05 || gIn > 0.05, dir: gOut > 0.05 ? 'out' : 'in' });

    units.evs.forEach((u, k) => {
      const e = s.ev[k];
      const on = e && e.p != null && e.p > 0.05;
      /* V2X: negativ ev_power = bilen matar huset/husbatteriet (teckenbärande
         från sensorn hela vägen ut i /api/live-data). Då är boxen en KÄLLA,
         ekern vetter inåt och beloppet är absolutvärdet. Färgen är --c-cover,
         samma token som när batteriet täcker huset — samma innebörd. */
      const feed = e && e.p != null && e.p < -0.05;
      // Källan finns nu per box (ev_source_split_list, 15/8) och färgar noden
      // som i prototypen. Utan källa: ingen påhittad färg, ingen påhittad text.
      const srcCol = { sol:'var(--c-charge-sol)', 'nät':'var(--c-charge-net)', batteri:'var(--c-cover)' };
      out.push({ id:'ev'+k, ...P['ev'+k], r:48, icon:'ev',
        col: feed ? 'var(--c-cover)' : on ? (srcCol[e.src] || 'var(--c-charge-net)') : 'var(--line)',
        /* TECKNET FÖLJER MED (foto 27/8: ringen sa 15,0 medan beslutsraden sa
           −14,99 kW). Samma regel som batterinoden intill: minus = effekten
           LÄMNAR enheten. Ett obetecknat tal i ringen läste som laddning. */
        val: e && e.p != null ? (feed ? '−' : '') + fvNum(Math.abs(e.p)) : '—', unit:'kW', name: u.name,
        status: e && e.p == null ? 'ingen plan'
              : feed ? 'matar huset'
              : on ? (e.src ? 'laddar · '+e.src : 'laddar') : 'ingen laddning',
        active: on || feed, dir: feed ? 'in' : 'out' });
    });

    out.push({ id:'home', ...P.home, r:52, col:'var(--ink-2)', icon:'home',
      val: fvNum(consKw), unit:'kW', name:'Hemmet',
      status:'förbrukar', active:true, dir:'out' });

    return out;
  }, [s, units]);

  /* Dagens plan i klartext. Varje rad läser bara vad som är planerat. */
  const plan = React.useMemo(() => {
    // Urladdning MED angiven orsak. Samma regel som batStatusText: en orsak
    // får bara skrivas ut när backend gett den. Utan src-kravet renderades
    // kvartar med action 'vanta' som "batteriet täcker huset" (2026-08-15).
    const covers = (x) => x.bat.some(b => b.p != null && b.p < -0.05 && b.src === 'hus');
    const disch = (x) => x.bat.some(b => b.p != null && b.p < -0.05);
    const chg = (x, src) => x.bat.some(b => b.p != null && b.p > 0.05 && b.src === src);
    const gq = day.filter(x => chg(x, 'nät'));
    // ORSAKSBUNDNA predikat: ingen utjämning (CAUSE). PROGNOSBUNDNA: utjämning.
    const CAUSE = { smooth:false };
    return {
      gridAvg: gq.length ? Math.round(gq.reduce((a,x)=>a+(x.buy||0),0)/gq.length) : null,
      solCh:  fvRanges(day, x => chg(x, 'sol'), CAUSE),
      gridCh: fvRanges(day, x => chg(x, 'nät'), CAUSE),
      solCov: fvRanges(day, x => x.sol != null && x.cons != null && x.sol >= x.cons - 0.05),
      batCov: fvRanges(day, x => x.sol != null && x.cons != null && x.sol < x.cons - 0.05 && covers(x), CAUSE),
      // Planerad försäljning till nätet. minLen 1: en 15-minuters export på
      // 8,5 kW är dygnets största händelse, inte brus — den får inte kastas.
      batSell: fvRanges(day, x => x.bat.some(b => b.p != null && b.p < -0.05 && b.src === 'export'),
                        { smooth:false, minLen:1 }),
      // "Varken sol eller batteri" måste utesluta ALL urladdning, inte bara den
      // med orsak 'hus' — annars kan en kvart hamna i båda raderna.
      none:   fvRanges(day, x => x.sol != null && x.cons != null && x.sol < x.cons - 0.05
                                 && !disch(x) && !chg(x, 'nät')),
      evR:   units.evs.map((_, k) => fvRanges(day, x => x.ev[k]?.p != null && x.ev[k].p > 0.05, CAUSE)),
      loadR: units.loads.map((_, k) => fvRanges(day, x => x.loads[k]?.p != null && x.loads[k].p > 0.05, CAUSE)),
      // solar_kwh/energy_kwh → sol / nät / blandat. Saknas fälten: ingen parentes.
      loadSrc: units.loads.map((_, k) => day.find(x => x.loads[k]?.src)?.loads[k]?.src || null),
    };
  }, [day, units]);

  return (
    <div className="fv-wrap">
      <section className="fv-now">
        <div className="fv-label">HEMS just nu</div>
        <div className="fv-now-hd">
          <span className="fv-dot" style={{background:mode.color}}/>
          <span className="fv-now-label">{mode.label}</span>
        </div>
        <p className="fv-now-desc">{window.gcReason(s.reason, mode.desc)}</p>
        <div className="fv-now-list">
          {units.bats.map((u, k) => {
            const bp = s.bat[k] || s.bat[0];
            return (
              <div className="fv-row" key={u.id} style={FV_MONO}>
                <span>{bp?.aggregate ? 'Batterier (summa)' : u.name} · {batStatusText(bp)}</span>
                <b>{bp?.p == null ? '—' : (bp.p >= 0 ? '' : '−') + fvNum(Math.abs(bp.p), 2) + ' kW'}</b>
              </div>
            );
          })}
          {units.evs.map((u, k) => {
            const e = s.ev[k];
            return (
              <div className="fv-row" key={u.id} style={FV_MONO}>
                <span>{u.name} · {e?.p == null ? 'ingen plan' : e.p < -0.05 ? 'matar huset'
                  : e.p > 0.05 ? 'laddar' : 'ingen laddning'}</span>
                <b>{e?.p == null ? '—' : (e.p >= 0 ? '' : '−') + fvNum(Math.abs(e.p), 2) + ' kW'}</b>
              </div>
            );
          })}
        </div>
      </section>

      <section className="fv-flow">
        <div className="fv-flow-hd">
          <span className="fv-flow-title">Energiflöde just nu</span>
          <span className="fv-chip" style={{...FV_MONO, color:mode.color, borderColor:mode.color}}>
            <span className="fv-dot sm" style={{background:mode.color}}/>{mode.label}
          </span>
        </div>
        <svg viewBox="0 0 680 680" className="fv-svg">
          <defs>
            <filter id="fvGlow" x="-60%" y="-60%" width="220%" height="220%">
              <feGaussianBlur stdDeviation="7" result="b"/>
              <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
            </filter>
            <filter id="fvGlowSoft" x="-80%" y="-80%" width="260%" height="260%">
              <feGaussianBlur stdDeviation="12" result="b"/>
              <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
            </filter>
            <filter id="fvDrop" x="-40%" y="-40%" width="180%" height="200%">
              <feDropShadow dx="0" dy="5" stdDeviation="6" floodColor="#000" floodOpacity="0.55"/>
            </filter>
            <radialGradient id="fvOrb" cx="35%" cy="28%" r="78%">
              <stop offset="0%" stopColor="#1B2436"/><stop offset="55%" stopColor="#111A2B"/><stop offset="100%" stopColor="#070C16"/>
            </radialGradient>
            <radialGradient id="fvCore" cx="35%" cy="28%" r="80%">
              <stop offset="0%" stopColor="#232E48"/><stop offset="60%" stopColor="#131C30"/><stop offset="100%" stopColor="#080D18"/>
            </radialGradient>
            <radialGradient id="fvHaze" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#5BA8FF" stopOpacity="0.16"/>
              <stop offset="60%" stopColor="#5BA8FF" stopOpacity="0.04"/>
              <stop offset="100%" stopColor="#5BA8FF" stopOpacity="0"/>
            </radialGradient>
            <linearGradient id="fvGloss" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#fff" stopOpacity="0.12"/><stop offset="100%" stopColor="#fff" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <circle cx={FV_C.x} cy={FV_C.y} r="265" fill="url(#fvHaze)"/>
          {nodes.map(n => (
            <g key={'l'+n.id}>
              {n.active && <line x1={FV_C.x} y1={FV_C.y} x2={n.x} y2={n.y} stroke={n.col}
                strokeWidth="7" strokeOpacity="0.13" strokeLinecap="round" filter="url(#fvGlowSoft)"/>}
              <line x1={FV_C.x} y1={FV_C.y} x2={n.x} y2={n.y} stroke={n.active ? n.col : 'var(--line)'}
                strokeWidth={n.active ? 2.2 : 1.2} strokeOpacity={n.active ? 0.8 : 0.7} strokeLinecap="round"/>
            </g>
          ))}
          {nodes.filter(n => n.active).map(n => {
            const path = n.dir === 'in' ? `M${n.x},${n.y} L${FV_C.x},${FV_C.y}` : `M${FV_C.x},${FV_C.y} L${n.x},${n.y}`;
            return (
              <g key={'d'+n.id}>
                <circle r="8" fill={n.col} opacity="0.18" filter="url(#fvGlowSoft)">
                  <animateMotion dur="2.2s" repeatCount="indefinite" path={path}/></circle>
                <circle r="3.6" fill={n.col} filter="url(#fvGlow)">
                  <animateMotion dur="2.2s" repeatCount="indefinite" path={path}/></circle>
                <circle r="1.4" fill="#fff" opacity="0.9">
                  <animateMotion dur="2.2s" repeatCount="indefinite" path={path}/></circle>
              </g>
            );
          })}
          {nodes.map(n => (
            <g key={n.id}>
              <circle cx={n.x} cy={n.y} r={n.r} fill="url(#fvOrb)" filter="url(#fvDrop)"/>
              {n.active && <circle cx={n.x} cy={n.y} r={n.r} fill="none" stroke={n.col}
                strokeWidth="3" strokeOpacity="0.35" filter="url(#fvGlowSoft)"/>}
              <circle cx={n.x} cy={n.y} r={n.r} fill="none" stroke={n.col}
                strokeWidth={n.active ? 2.2 : 1.3} strokeOpacity={n.active ? 0.95 : 0.4}/>
              <ellipse cx={n.x} cy={n.y - n.r*0.42} rx={n.r*0.68} ry={n.r*0.36} fill="url(#fvGloss)"/>
              {/* Ikonen ligger i gc-core, inte här: flödet finns i två kopior och
                  de har redan drivit isär en gång på batteriets huvudtal. */}
              <window.GcNodeIcon kind={n.icon} x={n.x} y={n.y - n.r*0.54} s={(n.r/54)*0.72}
                col={n.active ? n.col : 'var(--ink-3)'}/>
              <text x={n.x} y={n.y-2} textAnchor="middle" dominantBaseline="middle" fill="var(--ink)"
                fontSize="24" fontWeight="700" style={FV_MONO}>{n.val}</text>
              <text x={n.x} y={n.y+17} textAnchor="middle" dominantBaseline="middle" fill="var(--ink-3)"
                fontSize="11" style={FV_MONO}>{n.unit}</text>
              {/* Effektraden måste ligga INOM ringen (foto 27/8: "+12,8 kW"
                  skar rakt genom kanten). En cirkels bredd krymper mot botten:
                  vid y = 34 av r = 52 är halva bredden bara √(52²−34²) ≈ 39,
                  och 12,5 px mono à 8 tecken mäter ~66. Raden ligger nu på
                  y+29 med 11 px (~53 px bred mot ~86 tillgängliga) — och
                  fontSize skalas ner ytterligare på små noder (r < 50, dvs
                  bilarna) där utrymmet är mindre. */}
              {n.sub && (
                <text x={n.x} y={n.y+29} textAnchor="middle" dominantBaseline="middle" fill={n.subCol}
                  fontSize={n.r >= 50 ? 11 : 10} fontWeight="700" style={FV_MONO}>{n.sub}</text>
              )}
              <text x={n.x} y={n.y+n.r+17} textAnchor="middle" dominantBaseline="middle" fill="var(--ink-2)"
                fontSize="14" fontWeight="600">{n.name}</text>
              <text x={n.x} y={n.y+n.r+32} textAnchor="middle" dominantBaseline="middle" fill="var(--ink-3)"
                fontSize="10" style={FV_MONO} letterSpacing="1.5">{n.status.toUpperCase()}</text>
            </g>
          ))}
          <circle cx={FV_C.x} cy={FV_C.y} r="62" fill="none" stroke={mode.color} strokeWidth="1.5" opacity="0.5">
            <animate attributeName="r" values="62;92;62" dur="3.6s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.45;0;0.45" dur="3.6s" repeatCount="indefinite"/>
          </circle>
          <circle cx={FV_C.x} cy={FV_C.y} r="62" fill="none" stroke={mode.color} strokeWidth="1.5" opacity="0.35">
            <animate attributeName="r" values="62;92;62" dur="3.6s" begin="1.8s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.35;0;0.35" dur="3.6s" begin="1.8s" repeatCount="indefinite"/>
          </circle>
          <circle cx={FV_C.x} cy={FV_C.y} r="62" fill="url(#fvCore)" filter="url(#fvDrop)"/>
          <circle cx={FV_C.x} cy={FV_C.y} r="62" fill="none" stroke={mode.color} strokeWidth="3" strokeOpacity="0.3" filter="url(#fvGlowSoft)"/>
          <circle cx={FV_C.x} cy={FV_C.y} r="62" fill="none" stroke="var(--c-observe)" strokeWidth="1.8" strokeOpacity="0.75"/>
          <ellipse cx={FV_C.x} cy={FV_C.y-26} rx="42" ry="22" fill="url(#fvGloss)"/>
          <text x={FV_C.x} y={FV_C.y-20} textAnchor="middle" dominantBaseline="middle" fill="var(--c-observe)"
            fontSize="10" style={FV_MONO} letterSpacing="3">HEMS</text>
          <circle cx={FV_C.x} cy={FV_C.y-3} r="3.5" fill={mode.color} filter="url(#fvGlow)"/>
          {/* Långa lägesnamn ("Peak shaving", "Sälj batteri") får inte gå utanför
              centernoden — storleken följer namnets längd. */}
          <text x={FV_C.x} y={FV_C.y+15} textAnchor="middle" dominantBaseline="middle" fill="var(--ink)"
            fontSize={mode.label.length > 11 ? 12 : 14} fontWeight="700">{mode.label}</text>
          <text x={FV_C.x} y={FV_C.y+32} textAnchor="middle" dominantBaseline="middle" fill="var(--ink-3)"
            fontSize="9" style={FV_MONO} letterSpacing="2">styrcentral</text>
        </svg>
      </section>

      <section className="fv-plan">
        <div className="fv-label">Dagens plan</div>
        <div className="fv-sub">Hus &amp; batteri</div>
        <div className="fv-p">
          {(plan.solCh.length > 0 || plan.gridCh.length > 0) && (
            <p>Batteriet laddas
              {plan.solCh.length > 0 && <> av sol <FvTimes rs={plan.solCh}/></>}
              {plan.solCh.length > 0 && plan.gridCh.length > 0 && <> och</>}
              {plan.gridCh.length > 0 && <> från nät när elen är som billigast <FvTimes rs={plan.gridCh}/>
                {plan.gridAvg != null && <span className="fv-dim"> (snittpris {plan.gridAvg} öre)</span>}</>}.
            </p>
          )}
          {(plan.solCov.length > 0 || plan.batCov.length > 0) && (
            <p>
              {plan.solCov.length > 0 && <>Solen täcker huset <FvTimes rs={plan.solCov}/></>}
              {plan.solCov.length > 0 && plan.batCov.length > 0 && <> och </>}
              {plan.batCov.length > 0 && <>{plan.solCov.length > 0 ? 'batteriet' : 'Batteriet'} täcker huset <FvTimes rs={plan.batCov}/></>}.
            </p>
          )}
          {plan.batSell.length > 0 && (
            <p>Batteriet säljer till nätet <FvTimes rs={plan.batSell}/> — då är säljpriset som bäst.</p>
          )}
          {plan.none.length > 0 && (
            <p>Varken sol eller batteri kan täcka huset <FvTimes rs={plan.none}/> — då köper vi från nätet.</p>
          )}
        </div>

        {plan.loadR.some(rs => rs.length > 0) && (
          <React.Fragment>
            <div className="fv-sub div">Laster</div>
            <div className="fv-p">
              {plan.loadR.map((rs, k) => rs.length > 0 && (
                <p key={k}>{units.loads[k].name} körs <FvTimes rs={rs}/>
                  {plan.loadSrc[k] && <> ({plan.loadSrc[k]})</>}.</p>
              ))}
            </div>
          </React.Fragment>
        )}

        {plan.evR.some(rs => rs.length > 0) && (
          <React.Fragment>
            <div className="fv-sub div">Bilar</div>
            <div className="fv-p">
              {plan.evR.map((rs, k) => rs.length > 0 && (
                <p key={k}>{units.evs[k].name} laddas <FvTimes rs={rs}/>
                  {units.evs[k].cfg?.solar_mode === true && <> — inställd på sol</>}
                  {day.some(x => x.ev[k]?.shared) && <span className="fv-dim"> (planen gäller all billaddning, inte just denna box)</span>}.
                </p>
              ))}
            </div>
          </React.Fragment>
        )}
      </section>
    </div>
  );
}

Object.assign(window, { FlowV2, fvRanges });