/* modules.jsx — supporting dashboard modules */

/* ---- Battery card ---- */
const BatteryCard = ({ soc, action, planNext, secondBattery, soc2, home, batt1, batt2, batteries }) => {
  const cap = home?.batteryCapacityKwh || 13.5;
  const chargeKw = home?.batteryChargeKw || 5;
  const eff = home?.batteryEfficiency || 94;
  // Live power (kW): positive = charging, negative = discharging.
  const powerKw = batt1?.power_kw;
  const chargingActions = new Set(['ladda_sol','ladda_nat']);
  const dischargingActions = new Set(['tack_huset','peak','salj_sol','salj_batteri']);
  // Prefer live power direction; fall back to action vocabulary
  const state = powerKw != null
    ? (powerKw > 0.05 ? 'charging' : powerKw < -0.05 ? 'discharging' : 'idle')
    : (chargingActions.has(action) ? 'charging'
       : dischargingActions.has(action) ? 'discharging' : 'idle');
  const arc = (pct) => {
    const r = 78, cx=92, cy=92;
    const a0 = -210, a1 = 30;            // sweep from -210° to 30° (240°)
    const a  = a0 + (a1-a0) * (pct/100);
    const rad = (deg) => (deg*Math.PI/180);
    const p = (deg) => [cx + r*Math.cos(rad(deg)), cy + r*Math.sin(rad(deg))];
    const [x0,y0] = p(a0);
    const [xE,yE] = p(a);
    const [xR,yR] = p(a1);
    const large = (a - a0) > 180 ? 1 : 0;
    const largeR = 1;
    return {
      track: `M ${x0} ${y0} A ${r} ${r} 0 ${largeR} 1 ${xR} ${yR}`,
      fill:  `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${xE} ${yE}`,
    };
  };
  const a = arc(soc);

  return (
    <div className="card padded">
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <h3 style={{margin:0,fontSize:13,fontWeight:600,display:'flex',gap:8,alignItems:'center'}}>
          <Icon name="battery" size={14} color="var(--battery)"/> Batteri
        </h3>
        <span className="tag" style={{marginLeft:'auto'}}>
          <span className="dot" style={{background:
            state==='charging'?'var(--c-sell)':state==='discharging'?'var(--c-cover)':'var(--ink-3)'}}/>
          {state==='charging'?'Laddar':state==='discharging'?'Levererar':'Inaktiv'}
        </span>
      </div>

      <div style={{display:'flex',gap:18,marginTop:12,alignItems:'center'}}>
        <svg width="184" height="184" viewBox="0 0 184 184">
          <path d={a.track} stroke="rgba(180,200,240,.10)" strokeWidth="10" fill="none" strokeLinecap="round"/>
          <path d={a.fill}  stroke="var(--battery)"        strokeWidth="10" fill="none" strokeLinecap="round"/>
          <text x="92" y="92" textAnchor="middle" fontSize="36" fontWeight="600"
            fill="#E6ECF7" fontFamily="Geist Mono" style={{letterSpacing:'-0.02em'}}>
            {Math.round(soc)}<tspan fontSize="16" dy="-12" fill="rgba(180,200,240,.55)">%</tspan>
          </text>
          <text x="92" y="116" textAnchor="middle" fontSize="10.5"
            fill="rgba(180,200,240,.55)" fontFamily="Geist Mono" letterSpacing=".1em">SOC</text>
        </svg>

        <div style={{flex:1, display:'grid', gap:8}}>
          <Row k="Kapacitet"     v={`${cap.toFixed(1).replace('.',',')} kWh`} />
          <Row k="Tillgängligt"  v={`${(soc/100*cap).toFixed(1).replace('.',',')} kWh`} />
          <Row k="Effekt"        v={powerKw != null
                                      ? `${powerKw > 0 ? '+' : powerKw < 0 ? '−' : ''}${Math.abs(powerKw).toFixed(1).replace('.',',')} kW`
                                      : (state==='charging'?'+2,5 kW':state==='discharging'?'-3,1 kW':'0 kW')}
                                 c={state==='charging'?'var(--c-sell)':state==='discharging'?'var(--c-cover)':null}/>
          <Row k="Max effekt"    v={`${chargeKw.toFixed(1).replace('.',',')} kW`} />
        </div>
      </div>

      <div className="hairline" style={{marginTop:14, paddingTop:12, fontSize:11.5, color:'var(--ink-2)',
        display:'flex',alignItems:'center',gap:8}}>
        <Icon name="arrowr" size={12} color="var(--ink-3)"/>
        Nästa: <b style={{color:'var(--ink)',fontWeight:500}}>{planNext}</b>
      </div>

      {/* Sekundära batterier — dynamiskt, stödjer N batterier (2, 3, …) */}
      {(() => {
        const list = Array.isArray(batteries) ? batteries.slice(1) : (batt2 ? [batt2] : []);
        if (!list.length && !secondBattery) return null;
        const fallback = (!list.length && secondBattery) ? [{ label:'Batteri 2', soc: soc2, ai_controlled:true, capacity_kwh:null }] : list;
        return fallback.map((b, idx) => {
          const ai = !!b.ai_controlled;
          const accent = ai ? '#C4ADFF' : '#3FCC8B';
          const tint   = ai ? 'rgba(157,123,255,' : 'rgba(63,204,139,';
          const label  = b.label || `Batteri ${idx+2}`;
          return (
            <div key={idx} className="hairline" style={{marginTop:12, paddingTop:12}}>
              <div style={{display:'flex',alignItems:'center',gap:10}}>
                <span style={{width:28,height:28,borderRadius:7,
                  background:`${tint}.10)`,border:`1px solid ${tint}.28)`,
                  display:'inline-flex',alignItems:'center',justifyContent:'center',color:accent}}>
                  <Icon name="battery" size={13}/>
                </span>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:12,fontWeight:500,display:'flex',alignItems:'center',gap:6}}>
                    {label}
                    {ai && <span style={{fontSize:9,fontFamily:'Geist Mono',fontWeight:600,
                      padding:'1px 5px',borderRadius:4,
                      background:'rgba(157,123,255,.14)',color:'#C4ADFF',
                      letterSpacing:'.06em'}}>EXTERN AI</span>}
                  </div>
                  <div className="dim" style={{fontSize:11,marginTop:1}}>
                    {b.capacity_kwh != null ? `${b.capacity_kwh.toFixed(1).replace('.',',')} kWh` : '—'}
                    {ai ? ' · ej HEMS-styrt' : ''}
                  </div>
                </div>
                <div className="mono" style={{fontSize:13,fontWeight:600}}>
                  {b.soc != null ? Math.round(b.soc) : '—'}<span style={{fontSize:10,color:'var(--ink-2)',marginLeft:2}}>%</span>
                </div>
              </div>
            </div>
          );
        });
      })()}
    </div>
  );
};

const Row = ({k, v, c}) => (
  <div style={{display:'flex',justifyContent:'space-between',fontSize:12}}>
    <span style={{color:'var(--ink-2)'}}>{k}</span>
    <span className="mono" style={{color:c||'var(--ink)',fontWeight:500}}>{v}</span>
  </div>
);

/* ---- Bil & Laddbox (sammanslagen) ---- */
const EVCard = ({ laddbox, evCharging, cur }) => {
  const soc = 64, target = 80;
  const power = evCharging ? 7.0 : 0;
  const state = !laddbox ? 'no-laddbox'
              : evCharging ? 'charging'
              : 'connected';

  if (!laddbox){
    return (
      <div className="card padded">
        <div style={{display:'flex',alignItems:'center',gap:10}}>
          <h3 style={{margin:0,fontSize:13,fontWeight:600,display:'flex',gap:8,alignItems:'center'}}>
            <Icon name="car" size={14} color="var(--ink-3)"/> Bil &amp; laddbox
          </h3>
          <span className="tag" style={{marginLeft:'auto',color:'var(--ink-3)'}}>
            <span className="dot" style={{background:'var(--ink-4)'}}/>Inte ansluten
          </span>
        </div>
        <div className="dim" style={{fontSize:11.5,marginTop:10,lineHeight:1.5}}>
          Ingen laddbox registrerad. Anslut en Easee, Charge Amps eller annan kompatibel laddbox
          för smartladdning, peak shaving och prisstyrning.
        </div>
        <button className="btn-ghost" style={{marginTop:12}}>+ Lägg till laddbox</button>
      </div>
    );
  }

  return (
    <div className="card padded">
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <h3 style={{margin:0,fontSize:13,fontWeight:600,display:'flex',gap:8,alignItems:'center'}}>
          <Icon name="car" size={14} color="var(--blue)"/> Bil &amp; laddbox
        </h3>
        <span className="tag" style={{marginLeft:'auto'}}>
          <span className="dot" style={{background: state==='charging'?'var(--c-charge-net)':'var(--ink-2)'}}/>
          {state==='charging' ? 'Laddar' : 'Ansluten · väntar'}
        </span>
      </div>

      {/* Car ↔ Laddbox visualization */}
      <div style={{display:'flex',alignItems:'center',gap:10,marginTop:14}}>
        <div className="ev-pill">
          <Icon name="car" size={14} color="var(--blue)"/>
          <div>
            <div style={{fontSize:12,fontWeight:500}}>ID.4 GTX</div>
            <div className="dim" style={{fontSize:10.5,marginTop:1}}>{soc}% · mål {target}%</div>
          </div>
        </div>
        <div className="ev-link" data-active={state==='charging'?'1':'0'}>
          {state==='charging' && (<>
            <span className="ev-bolt"><Icon name="bolt" size={10} color="var(--c-charge-net)"/></span>
          </>)}
        </div>
        <div className="ev-pill">
          <Icon name="plug" size={14} color="var(--violet)"/>
          <div>
            <div style={{fontSize:12,fontWeight:500}}>Easee Home</div>
            <div className="dim" style={{fontSize:10.5,marginTop:1}}>
              {power>0 ? power.toFixed(1).replace('.',',')+' kW' : 'vilande · 11 kW max'}
            </div>
          </div>
        </div>
      </div>

      {/* SOC bar */}
      <div style={{marginTop:14}}>
        <div style={{position:'relative',height:8,
          background:'rgba(180,200,240,.08)',borderRadius:999,overflow:'hidden'}}>
          <div style={{position:'absolute',inset:0,width:`${soc}%`,
            background:'linear-gradient(90deg, var(--blue), var(--violet))',borderRadius:999,
            transition:'width .4s'}}/>
          <div style={{position:'absolute',top:-3,left:`${target}%`,width:2,height:14,
            background:'rgba(230,236,247,.6)',transform:'translateX(-50%)'}}/>
        </div>
        <div style={{marginTop:6,display:'flex',justifyContent:'space-between',fontSize:11,color:'var(--ink-3)'}}>
          <span className="mono">{soc}%</span><span className="mono">mål {target}%</span>
        </div>
      </div>

      <div className="hairline" style={{marginTop:14,paddingTop:12,
        display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,fontSize:11.5}}>
        <div>
          <div className="dim">Smartladdning</div>
          <div className="mono" style={{marginTop:2,color:'var(--c-sell)',fontWeight:500}}>03:00–05:30</div>
        </div>
        <div>
          <div className="dim">Sparar</div>
          <div className="mono" style={{marginTop:2,color:'var(--ink)',fontWeight:500}}>27 kr ikväll</div>
        </div>
      </div>
    </div>
  );
};

/* ---- Next actions list (replaces old PlanStrip) ---- */
const PlanStrip = ({ slots, nowIdx, now }) => {
  // Walk forward from nowIdx and collect upcoming action transitions.
  // Also compute remaining time within the current action.
  const cur = slots[nowIdx];
  const minutesIntoQ = now ? (now.getMinutes() % 15) : 0;

  const upcoming = [];
  let i = nowIdx + 1;
  while (i < slots.length && upcoming.length < 4){
    if (slots[i].action !== (upcoming.length === 0 ? cur.action : upcoming[upcoming.length-1].action)){
      // find end of this new run
      let end = i+1;
      while (end < slots.length && slots[end].action === slots[i].action) end++;
      upcoming.push({ start:i, end, action:slots[i].action });
      i = end;
    } else i++;
  }

  const timeFromNow = (q) => {
    const minutes = (q - nowIdx) * 15 - minutesIntoQ;
    if (minutes < 60) return `om ${minutes}\u00A0min`;
    const h = Math.floor(minutes/60), m = minutes % 60;
    return m === 0 ? `om ${h}\u00A0h` : `om ${h}\u00A0h ${m}\u00A0min`;
  };

  // current action remaining
  let curEnd = nowIdx+1;
  while (curEnd < slots.length && slots[curEnd].action === cur.action) curEnd++;
  const curRemMin = (curEnd - nowIdx) * 15 - minutesIntoQ;
  const curMeta = ACTION_META[cur.action];

  return (
    <div className="card">
      <div className="head">
        <h3><Icon name="chart" size={14} color="var(--violet)"/> Nästa åtgärder</h3>
        <span className="sub">enligt HEMS-plan</span>
        <div className="right">
          <span className="tag mono">Spar idag: <b style={{color:'var(--c-sell)',marginLeft:4}}>+47 kr</b></span>
        </div>
      </div>

      <div className="plan-now">
        <div className="plan-now-l">
          <span className="dot" style={{background:curMeta.color}}/>
          <div>
            <div className="lbl">NU</div>
            <div className="action">{curMeta.label}</div>
          </div>
        </div>
        <div className="plan-now-r mono dim">
          {curRemMin >= 60
            ? `${Math.floor(curRemMin/60)}\u00A0h ${curRemMin%60}\u00A0min kvar`
            : `${curRemMin}\u00A0min kvar`}
        </div>
      </div>

      <div className="plan-list">
        {upcoming.map((r,idx)=>{
          const meta = ACTION_META[r.action];
          const dur = ((r.end-r.start)*15)/60;
          return (
            <div key={idx} className="plan-item">
              <span className="bullet" style={{background:meta.color}}/>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:12.5,fontWeight:500}}>{meta.label}</div>
                <div className="dim mono" style={{fontSize:10.5,marginTop:2}}>
                  {fmt.hhmm(r.start)}–{fmt.hhmm(r.end)} · {dur.toFixed(1).replace('.',',')} h
                </div>
              </div>
              <div className="mono" style={{fontSize:11.5,color:'var(--ink-2)',textAlign:'right'}}>
                {timeFromNow(r.start)}
              </div>
            </div>
          );
        })}
        {upcoming.length === 0 && (
          <div className="dim" style={{padding:'14px 16px',fontSize:12}}>
            Inga fler ändringar planerade idag.
          </div>
        )}
      </div>
    </div>
  );
};

/* ---- Savings panel ---- */
const SavingsCard = ({ liveSavings }) => {
  const monthNames = ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'];

  const t = liveSavings?.total || {};
  const daysRunning = t.days ?? 0;
  const startDate   = t.start_date;
  const discharge   = t.discharge_value_kr ?? 0;
  const charge      = t.charge_cost_kr ?? 0;
  const opportunity = t.opportunity_cost_kr ?? 0;   // may be missing on cold start
  const cycle       = t.cycle_cost_kr ?? 0;          // may be missing on cold start
  const netProfit   = t.net_profit_kr ?? 0;
  const apiAvg      = t.avg_profit_per_day_kr;
  let   co2Avoided  = t.co2_avoided_kg;

  // SPEC: practical savings = discharge − charge. Round source values first so
  // headline equals breakdown rows visually (no off-by-one rounding diff).
  const dischargeR = Math.round(discharge);
  const chargeR    = Math.round(charge);
  const practical  = dischargeR - chargeR;
  const avgPerDay  = daysRunning > 0 ? practical / daysRunning : (apiAvg ?? 0);

  // Monthly list — practical per month for consistency with headline.
  const rawMonthly = Array.isArray(liveSavings?.monthly) ? liveSavings.monthly : [];
  const sorted = [...rawMonthly].sort((a, b) => String(a.month).localeCompare(String(b.month)));
  const months = sorted.map((m, i, a) => {
    const monthIdx = parseInt(String(m.month).slice(-2)) - 1;
    const practicalMonth = (m.discharge_value_kr ?? 0) - (m.charge_cost_kr ?? 0);
    return {
      m: monthNames[monthIdx] || m.month,
      ym: m.month,
      days: m.days ?? 0,
      v: practicalMonth,
      partial: i === a.length - 1,
    };
  });

  // Derive CO₂ if backend doesn't provide it (~3 kg/kr Swedish-grid heuristic).
  if (co2Avoided == null && practical > 0) co2Avoided = practical * 3;

  // Friendly date label
  let startLabel = '';
  if (startDate){
    const d = new Date(startDate);
    if (!isNaN(d)) startLabel = `Sedan ${d.getDate()} ${monthNames[d.getMonth()].toLowerCase()} · ${daysRunning} dagar`;
  } else if (daysRunning > 0){
    startLabel = `${daysRunning} dagars drift`;
  }

  const [showDetails, setShowDetails]   = React.useState(false);
  const [showInternal, setShowInternal] = React.useState(false);

  // ── Cold-start state ────────────────────────────────────────────────
  if (daysRunning === 0 || (practical === 0 && months.length === 0)){
    return (
      <div className="card padded">
        <SavingsHeader/>
        <div style={{marginTop:14, display:'flex', alignItems:'baseline', gap:10, flexWrap:'wrap'}}>
          <div className="mono" style={{fontSize:30,fontWeight:600,letterSpacing:'-0.02em',color:'var(--ink-2)'}}>
            +0 <span style={{fontSize:13,color:'var(--ink-3)'}}>kr</span>
          </div>
        </div>
        <div className="dim" style={{marginTop:8, fontSize:12, lineHeight:1.5}}>
          Besparing visas här när HEMS samlat data. Vanligen efter 3–7 dagars drift.
        </div>
      </div>
    );
  }

  // ── Preliminary (< 7 days) ──────────────────────────────────────────
  const preliminary = daysRunning > 0 && daysRunning < 7;

  return (
    <div className="card padded">
      <SavingsHeader/>

      {/* Headline — practical savings */}
      <div style={{marginTop:10, display:'flex', alignItems:'baseline', gap:10, flexWrap:'wrap'}}>
        <div className="mono" style={{fontSize:30,fontWeight:600,letterSpacing:'-0.02em',
          color: practical >= 0 ? 'var(--c-sell)' : 'var(--c-peak)'}}>
          {practical>=0?'+':''}{fmt.kr(Math.round(practical))} <span style={{fontSize:13,color:'var(--ink-2)'}}>kr</span>
        </div>
        {!preliminary && avgPerDay > 0 && (
          <span className="tag" style={{color:'var(--c-sell)',borderColor:'rgba(63,204,139,.25)',
            background:'rgba(63,204,139,.08)'}}>
            ø {avgPerDay.toFixed(1).replace('.',',')} kr/dag
          </span>
        )}
        {preliminary && (
          <span className="tag" style={{color:'var(--c-unchanged)',borderColor:'rgba(255,158,69,.30)',
            background:'rgba(255,158,69,.08)'}}>
            preliminär · {daysRunning} dagars data
          </span>
        )}
      </div>

      <div className="dim" style={{marginTop:4, fontSize:11.5}}>
        Praktisk besparing{startLabel ? ` · ${startLabel}` : ''}
      </div>

      {/* Monthly chart (≥ 2 months) */}
      {months.length >= 2 && (() => {
        const max = Math.max(1, ...months.map(m => Math.abs(m.v)));
        // A partial month with essentially no accrued savings yet (e.g. the 1st
        // of the month) gets a clearer "just startad" treatment instead of a
        // confusing flat dashed nub that reads as "missing".
        const isFresh = (m) => m.partial && Math.abs(m.v) < max * 0.04;
        return (
          <div style={{marginTop:14, display:'grid',
            gridTemplateColumns:`repeat(${months.length}, 1fr)`, gap:4, alignItems:'end', height:80}}>
            {months.map((m,i)=>{
              const fresh = isFresh(m);
              return (
                <div key={i} style={{display:'flex',flexDirection:'column',alignItems:'center',gap:4}}
                  title={fresh
                    ? `${m.ym} · ny månad — samlar data (${m.days} ${m.days===1?'dag':'dagar'})`
                    : `${m.ym} · ${m.days} dagar · ${m.v>=0?'+':''}${fmt.kr(Math.round(m.v))} kr`}>
                  <div style={{
                    width:'100%',
                    height: fresh ? '70px' : Math.max(2, Math.abs(m.v)/max*70) + 'px',
                    background: fresh
                      ? 'repeating-linear-gradient(45deg, rgba(140,151,174,.16) 0 4px, transparent 4px 8px)'
                      : m.partial
                        ? 'repeating-linear-gradient(45deg, rgba(63,204,139,.4) 0 3px, rgba(63,204,139,.1) 3px 6px)'
                        : 'linear-gradient(180deg, var(--c-sell), rgba(63,204,139,.4))',
                    borderRadius:3,
                    border: fresh
                      ? '1px dashed rgba(140,151,174,.35)'
                      : m.partial ? '1px dashed rgba(63,204,139,.5)':'none',
                    display: fresh ? 'flex' : 'block',
                    alignItems: 'center', justifyContent: 'center',
                  }}>
                    {fresh && (
                      <span style={{fontSize:8.5, color:'var(--ink-3)', writingMode:'vertical-rl',
                        transform:'rotate(180deg)', letterSpacing:'.08em', fontFamily:'Geist Mono',
                        textTransform:'uppercase'}}>ny månad</span>
                    )}
                  </div>
                  <span style={{fontSize:9.5,
                    color: fresh ? 'var(--ink-2)' : 'var(--ink-3)',
                    fontFamily:'Geist Mono'}}>{m.m}</span>
                </div>
              );
            })}
          </div>
        );
      })()}

      {/* Sparkline / cumulative growth for 1 month or sub-month data */}
      {months.length < 2 && practical > 0 && (
        <CumulativeGrowthChart days={daysRunning} total={practical} avgPerDay={avgPerDay}/>
      )}

      {/* Toggle to show breakdown */}
      <button className="btn-ghost" onClick={()=>setShowDetails(s=>!s)}
        style={{marginTop:14, width:'100%', justifyContent:'center', display:'flex', gap:6}}>
        <Icon name="chevron" size={11} style={{transform: showDetails ? 'rotate(90deg)' : 'rotate(0deg)', transition:'transform .15s'}}/>
        {showDetails ? 'Dölj detaljer' : 'Visa detaljer'}
      </button>

      {showDetails && (
        <div className="hairline" style={{marginTop:14, paddingTop:12, fontSize:12}}>
          <div className="dim" style={{fontSize:10.5,letterSpacing:'.08em',textTransform:'uppercase',marginBottom:8}}>
            Nedbrytning
          </div>
          <BreakdownRow label="Sol &amp; batteri sålt"   value={dischargeR}  kind="profit"
            desc="värdet av el som batteriet levererat"/>
          <BreakdownRow label="Nätladdning"               value={-chargeR}    kind="cost"
            desc="el som batteriet köpt billigt från nätet"/>
          <BreakdownRow label="Praktisk besparing"        value={practical}   kind="total"
            desc="vad batteriet sparat på din elräkning"/>

          {/* Internal cost section — collapsed by default */}
          {(opportunity > 0 || cycle > 0) && (
            <>
              <button className="btn-ghost"
                onClick={()=>setShowInternal(s=>!s)}
                title="Detta är HEMS interna optimeringsparametrar — inte direkta kostnader på din elräkning. Batterislitage är avskrivning på batteriet du redan äger. Offrad solförsäljning är teoretisk vinst som missades eftersom solen laddade batteriet istället för att säljas direkt."
                style={{marginTop:12, padding:'6px 10px', width:'100%',
                  justifyContent:'flex-start', display:'flex', gap:6, alignItems:'center',
                  background:'rgba(157,123,255,.06)', borderColor:'rgba(157,123,255,.20)'}}>
                <Icon name="eye" size={11} color="var(--violet)"/>
                <span>Information om interna kostnader</span>
                <Icon name="chevron" size={10} style={{marginLeft:'auto', transform: showInternal ? 'rotate(90deg)' : 'rotate(0deg)', transition:'transform .15s'}}/>
              </button>
              {showInternal && (
                <div style={{marginTop:10, paddingLeft:14, borderLeft:'2px solid rgba(157,123,255,.20)'}}>
                  <BreakdownRow label="Batterislitage"        value={-cycle}       kind="cost"
                    desc="avskrivning på batteriet du redan äger — ingen faktura"/>
                  <BreakdownRow label="Offrad solförsäljning" value={-opportunity} kind="cost"
                    desc="sol som laddade batteriet istället för att säljas direkt"/>
                  <BreakdownRow label="Netto efter slitage"   value={netProfit}    kind="total"
                    desc="praktisk besparing minus interna kostnader"/>
                </div>
              )}
            </>
          )}
        </div>
      )}

      {/* CO₂ footer removed — origin of grid kWh isn't reliably known */}
    </div>
  );
};

const SavingsHeader = () => (
  <div style={{display:'flex',alignItems:'baseline'}}>
    <h3 style={{margin:0,fontSize:13,fontWeight:600,display:'flex',gap:8,alignItems:'center'}}>
      <Icon name="wallet" size={14} color="var(--c-sell)"/> Besparingar
    </h3>
  </div>
);

const BreakdownRow = ({label, value, kind, desc}) => {
  // kind: 'profit' (green +), 'cost' (orange −), 'total' (white, bold).
  const color = kind === 'profit' ? 'var(--c-sell)'
              : kind === 'cost'   ? 'var(--c-cover)'
                                  : 'var(--ink)';
  const bold = kind === 'total';
  const sign = value > 0 ? '+' : value < 0 ? '−' : '';
  const abs  = Math.round(Math.abs(value));
  const borderTop = kind === 'total'
    ? '1px solid var(--line)'
    : 'none';
  const paddingTop = kind === 'total' ? 6 : 3;
  return (
    <div style={{paddingTop, paddingBottom:3, borderTop,
      marginTop: kind === 'total' ? 4 : 0}}>
      <div style={{display:'flex',alignItems:'baseline',gap:10}}>
        <span className="dim" style={{flex:1, color: bold?'var(--ink-1)':undefined}}>{label}</span>
        <span className="mono" style={{color, fontWeight:bold?600:500}}>
          {sign}{fmt.kr(abs)} kr
        </span>
      </div>
      {desc && (
        <div style={{fontSize:10.5, color:'var(--ink-3)', lineHeight:1.4, marginTop:1}}>{desc}</div>
      )}
    </div>
  );
};

/* ── Cumulative-growth line used when only a few monthly entries exist ── */
const CumulativeGrowthChart = ({ days, total, avgPerDay }) => {
  const W = 320, H = 80;
  const padL = 4, padR = 4, padT = 6, padB = 14;
  const plotW = W - padL - padR;
  const plotH = H - padT - padB;

  const N = Math.max(2, Math.min(days, 200));
  const perDay = avgPerDay ?? total / days;

  const pts = [];
  for (let i = 0; i <= N; i++){
    const t = i / N;
    const ease = 0.5 - Math.cos(Math.PI * t) / 2;
    const variance = (Math.sin(i * 0.6) + Math.sin(i * 0.21)) * perDay * 0.6;
    const v = total * ease + variance * (1 - Math.abs(t - 0.5) * 2);
    pts.push(Math.max(0, v));
  }
  const maxV = total * 1.05;
  const x = (i) => padL + (i / N) * plotW;
  const y = (v) => padT + plotH - (v / maxV) * plotH;

  const line = pts.map((v, i) => `${i ? 'L' : 'M'} ${x(i).toFixed(1)} ${y(v).toFixed(1)}`).join(' ');
  const area = line + ` L ${x(N).toFixed(1)} ${(padT+plotH).toFixed(1)} L ${x(0).toFixed(1)} ${(padT+plotH).toFixed(1)} Z`;

  return (
    <div style={{marginTop:14, position:'relative'}}>
      <svg viewBox={`0 0 ${W} ${H}`} style={{display:'block', width:'100%', height:H}}>
        <defs>
          <linearGradient id="cumgrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#3FCC8B" stopOpacity=".45"/>
            <stop offset="1" stopColor="#3FCC8B" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d={area} fill="url(#cumgrad)"/>
        <path d={line} fill="none" stroke="#3FCC8B" strokeWidth="1.6"
          strokeLinejoin="round" strokeLinecap="round"/>
        <circle cx={x(N)} cy={y(pts[N])} r="3.5" fill="#3FCC8B"
          stroke="#0A0F18" strokeWidth="1.2"/>
        <text x={padL} y={H-2} fill="rgba(180,200,240,.42)"
          fontSize="9.5" fontFamily="Geist Mono">dag 1</text>
        <text x={W-padR} y={H-2} textAnchor="end" fill="rgba(180,200,240,.55)"
          fontSize="9.5" fontFamily="Geist Mono">dag {days}</text>
      </svg>
    </div>
  );
};

/* ---- Device list ---- */
const DEVICES = [
  {name:'Värmepump',   icon:'thermo', state:'Auto · 21°C', kw:1.2, color:'var(--c-cover)'},
  {name:'Bil (ID.4)',  icon:'car',    state:'Smartladdar 03:00', kw:0, color:'var(--blue)'},
  {name:'Solpaneler',  icon:'sun',    state:'12 paneler · syd',  kw:2.4, color:'var(--solar)'},
  {name:'Batteri',     icon:'battery',state:'Inaktiv · 68%',     kw:0,   color:'var(--battery)'},
  {name:'Bastu',       icon:'flash',  state:'Schemalagd 19:00',  kw:0,   color:'var(--violet)'},
];

const DeviceList = ({ home }) => (
  <div className="card compact">
    <div className="head">
      <h3><Icon name="plug" size={14} color="var(--violet)"/> Enheter</h3>
      <span className="sub">{home?.solarArrays?.length ? `${home.solarArrays.length + 3} anslutna` : '5 anslutna'}</span>
      <div className="right">
        <button className="btn-ghost">Hantera</button>
      </div>
    </div>
    <div>
      {DEVICES.map((d,i)=>(
        <div key={i} className="row-compact">
          <span className="row-ic" style={{color:d.color}}>
            <Icon name={d.icon} size={12}/>
          </span>
          <div style={{flex:1,minWidth:0}}>
            <div className="row-t">{d.name}</div>
            <div className="dim row-s">{d.state}</div>
          </div>
          <div className="mono row-v" style={{color: d.kw>0?'var(--ink)':'var(--ink-3)'}}>
            {d.kw>0 ? d.kw.toFixed(1).replace('.',',')+' kW' : '—'}
          </div>
        </div>
      ))}
    </div>
  </div>
);

/* ---- Activity log ---- */
const Activity = () => {
  const items = [
    {t:'10:42', txt:'Bytte till "Sälj sol" — överskott exporterades', c:'var(--c-sell)', a:'sell'},
    {t:'09:15', txt:'Batteri fulladdat (98%)', c:'var(--battery)', a:'batt'},
    {t:'07:30', txt:'Peak shaving aktiverat — sparade 4,80 kr', c:'var(--c-peak)', a:'peak'},
    {t:'03:00', txt:'Bilen började ladda till 80%', c:'var(--blue)', a:'ev'},
    {t:'01:45', txt:'Laddning från nät — kostnad 38 öre/kWh', c:'var(--c-charge-net)', a:'grid'},
  ];
  return (
    <div className="card compact">
      <div className="head">
        <h3><Icon name="bell" size={14} color="var(--c-unchanged)"/> Aktivitet</h3>
        <span className="sub">idag</span>
        <div className="right"><button className="btn-ghost">Allt</button></div>
      </div>
      <div>
        {items.map((it,i)=>(
          <div key={i} className="row-compact log">
            <span className="mono dim" style={{fontSize:10.5,minWidth:32,paddingTop:1}}>{it.t}</span>
            <span style={{width:5,height:5,borderRadius:50,background:it.c,marginTop:5,flex:'none'}}/>
            <span style={{fontSize:11.5,lineHeight:1.4,color:'var(--ink-1)'}}>{it.txt}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { BatteryCard, EVCard, PlanStrip, SavingsCard, DeviceList, Activity, PeakShavingCard, WhyPanel, PlanWhy });

/* ---- "Därför ser dagen ut så här" (#60) ----
   Renderar plan_explanation från /ml/analysis — en färdig, teknik-neutral
   mening från backend som besvarar "varför säljer systemet min sol?".
   Texten visas rakt av (ingen tolkning). Saknas/tomt fält → ingen ruta alls. */
function PlanWhy({ text, ctx }){
  const hasText = text && typeof text === 'string' && text.trim();
  // Beslutsunderlag-siffrorna (tidigare eget kort) bor nu här — en enda
  // "varför + underlag"-yta i stället för två staplade öga-kort.
  const chips = [];
  if (ctx && Object.keys(ctx).length > 0){
    const ore = (kr) => kr != null ? `${Math.round(kr*100)} öre` : '—';
    const pad = (h) => String(h).padStart(2,'0');
    if (ctx.current_buy_kr != null)   chips.push(['Köp nu', ore(ctx.current_buy_kr)]);
    if (ctx.current_sell_kr != null)  chips.push(['Sälj nu', ore(ctx.current_sell_kr)]);
    if (ctx.daily_avg_buy_kr != null) chips.push(['Snitt köp', ore(ctx.daily_avg_buy_kr)]);
    if (ctx.daily_avg_sell_kr != null)chips.push(['Snitt sälj', ore(ctx.daily_avg_sell_kr)]);
    if (ctx.min_future_buy_kr != null)chips.push(['Billigast', `${ore(ctx.min_future_buy_kr)}${ctx.min_future_buy_hour!=null?` kl ${pad(ctx.min_future_buy_hour)}`:''}`]);
    if (ctx.max_future_sell_kr != null)chips.push(['Dyrast sälj', `${ore(ctx.max_future_sell_kr)}${ctx.max_future_sell_hour!=null?` kl ${pad(ctx.max_future_sell_hour)}`:''}`]);
  }
  if (!hasText && chips.length === 0) return null;
  return (
    <div className="card plan-why">
      <span className="pw-ic"><Icon name="eye" size={15}/></span>
      <div className="pw-body">
        <div className="pw-l">Därför ser dagen ut så här</div>
        {hasText && <div className="pw-t">{text.trim()}</div>}
        {chips.length > 0 && (
          <div className="pw-chips">
            {chips.map(([k,v],i)=>(
              <span key={i} className="pw-chip">
                <span className="pw-chip-k">{k}</span>
                <span className="pw-chip-v mono">{v}</span>
              </span>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

const __planWhyStyles = document.createElement('style');
__planWhyStyles.textContent = `
.plan-why{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 18px;
}
.plan-why .pw-ic{
  flex:none; width:30px; height:30px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--blue);
  background:color-mix(in srgb, var(--blue) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--blue) 25%, transparent);
  margin-top:1px;
}
.plan-why .pw-l{
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:4px;
}
.plan-why .pw-t{
  font-size:13px; line-height:1.55; color:var(--ink-1); text-wrap:pretty;
}
.plan-why .pw-chips{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;
}
.plan-why .pw-chip{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.025); border:1px solid var(--line);
}
.plan-why .pw-chip-k{ font-size:11px; color:var(--ink-3); }
.plan-why .pw-chip-v{ font-size:13px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
`;
document.head.appendChild(__planWhyStyles);

/* ---- "Varför?" panel — renders decision_context facts, no interpretation ---- */
function WhyPanel({ ctx }){
  const [open, setOpen] = React.useState(false);
  if (!ctx || Object.keys(ctx).length === 0) return null;

  const kr = (v) => v == null ? '—' : v.toFixed(2).replace('.',',') + ' kr/kWh';
  const tomorrowMissing = ctx.tomorrow_available === false;

  const rows = [
    { k: 'Säljpris nu',     v: kr(ctx.current_sell_kr) },
    { k: 'Dygnssnitt sälj', v: kr(ctx.daily_avg_sell_kr) },
    { k: 'Köppris nu',      v: kr(ctx.current_buy_kr) },
    { k: 'Dygnssnitt köp',  v: kr(ctx.daily_avg_buy_kr) },
  ];
  if (ctx.min_future_buy_kr != null){
    rows.push({
      k: 'Billigaste köp',
      v: `${kr(ctx.min_future_buy_kr)} ${ctx.min_future_buy_day || ''} kl ${String(ctx.min_future_buy_hour).padStart(2,'0')}`,
      future: true,
    });
  }
  if (ctx.max_future_sell_kr != null){
    rows.push({
      k: 'Dyrast sälj',
      v: `${kr(ctx.max_future_sell_kr)} ${ctx.max_future_sell_day || ''} kl ${String(ctx.max_future_sell_hour).padStart(2,'0')}`,
      future: true,
    });
  }
  if (ctx.soc_pct != null){
    rows.push({ k: 'Batteri', v: `${Math.round(ctx.soc_pct)}%` });
  }

  return (
    <div className="why-panel">
      <button className="why-toggle" onClick={()=>setOpen(o=>!o)} aria-expanded={open}>
        <Icon name="eye" size={12}/>
        Varför?
        <Icon name="chevron" size={11} className="why-chev"
          style={{transform: open ? 'rotate(90deg)' : 'rotate(0deg)'}}/>
      </button>
      {open && (
        <div className="why-body">
          {rows.map((r,i)=>(
            <div key={i} className="why-row">
              <span className="k">{r.k}{r.future && tomorrowMissing ? ' *' : ''}</span>
              <span className="v mono">{r.v}</span>
            </div>
          ))}
          {tomorrowMissing && (
            <div className="why-note">* morgondagens priser saknas (publiceras ca 13:00)</div>
          )}
        </div>
      )}
    </div>
  );
}

const __whyStyles = document.createElement('style');
__whyStyles.textContent = `
.why-panel{ margin-top: 8px; }
.why-toggle{
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--ink-2); cursor: pointer;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 11px;
  transition: background .15s, color .15s, border-color .15s;
}
.why-toggle:hover{ background: rgba(91,168,255,.06); color: var(--ink); border-color: rgba(91,168,255,.25); }
.why-toggle .why-chev{ transition: transform .2s; }
.why-body{
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.015);
}
.why-row{
  display: flex; justify-content: space-between; gap: 14px;
  padding: 5px 0; font-size: 12.5px;
  border-top: 1px solid var(--line);
}
.why-row:first-child{ border-top: 0; }
.why-row .k{ color: var(--ink-2); }
.why-row .v{ color: var(--ink); font-weight: 500; }
.why-note{ margin-top: 8px; font-size: 11px; color: var(--ink-3); font-style: italic; }
`;
document.head.appendChild(__whyStyles);

/* ---- Peak shaving card ----
   Shows: current-hour grid consumption (kWh), projected hour mean (kWh/h),
   the user-set peak limit (kWh/h), and what the system is doing about it.
   ENHETEN ÄR kWh/h, INTE kW (André 3/9): effektavgiften mäter energi över en
   timme, inte momentan effekt. Korta effektspikar är ofarliga så länge
   timsumman håller. */
function PeakShavingCard({ now, cur, slots, limit, setLimit, soc, scenario, livePeak }){
  // Build "this hour so far" by summing grid draw of the 4 quarters of the current hour.
  const hour = now.getHours();
  const minuteOfHour = now.getMinutes();
  const fracHour = (minuteOfHour) / 60;
  const hourSlots = slots.slice(hour*4, hour*4 + 4);

  // Grid draw per quarter — derived from action: any quarter that pulls from grid
  // contributes home + (any battery charging from grid).
  const gridPerSlot = (s) => {
    if (s.action === 'ladda_nat')                          return s.consumption + 2.5;
    if (s.action === 'nollexport' || s.action === 'vanta' || s.action === 'observera')
                                                            return Math.max(0, s.consumption - s.solar);
    if (s.action === 'tack_huset' || s.action === 'peak')   return 0;       // battery covers
    return 0;
  };

  // Already-consumed this hour (kWh)  = sum of completed quarters + fraction of current
  const currentQ = Math.min(3, Math.floor(minuteOfHour/15));
  let consumed = 0;
  for (let q=0; q<currentQ; q++) consumed += gridPerSlot(hourSlots[q]) * 0.25;
  const inProgressFrac = (minuteOfHour - currentQ*15) / 15;
  consumed += gridPerSlot(hourSlots[currentQ]) * 0.25 * inProgressFrac;

  // Projected hour mean (kW) = (consumed + remaining draw) / 1h
  let projected = consumed;
  projected += gridPerSlot(hourSlots[currentQ]) * 0.25 * (1 - inProgressFrac);
  for (let q=currentQ+1; q<4; q++) projected += gridPerSlot(hourSlots[q]) * 0.25;

  // Override with live data if present and meaningful. Early in the hour the
  // API reports 0.0 / 0 with samples=1; we keep the slot-derived projection
  // in that case so the user has something useful to look at.
  if (livePeak?.current_hour){
    const live = livePeak.current_hour;
    if ((live.accumulated_kwh ?? 0) > 0.001) consumed = live.accumulated_kwh;
    if ((live.grid_avg_kw     ?? 0) > 0.001) projected = live.grid_avg_kw;
  }

  const pctOfLimit = Math.min(120, (projected / limit) * 100);
  const status = projected > limit ? 'over'
               : projected > limit*0.85 ? 'near'
               : 'safe';

  const statusMeta = {
    safe: { l:'Inom gräns',     c:'var(--c-sell)'  },
    near: { l:'Närmar sig',     c:'var(--c-unchanged)' },
    over: { l:'Peak shaving',   c:'var(--c-peak)'  },
  }[status];

  const peakActive = cur.action === 'peak' || status === 'over';

  return (
    <div className="card padded">
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <h3 style={{margin:0,fontSize:13,fontWeight:600,display:'flex',gap:8,alignItems:'center'}}>
          <Icon name="lightning" size={14} color="var(--c-peak)"/> Peak shaving
        </h3>
        <span className="tag" style={{marginLeft:'auto',color:statusMeta.c,
          borderColor:'color-mix(in srgb,'+statusMeta.c+' 35%, transparent)',
          background:'color-mix(in srgb,'+statusMeta.c+' 10%, transparent)'}}>
          <span className="dot" style={{background:statusMeta.c,
            boxShadow:peakActive?`0 0 0 3px color-mix(in srgb,${statusMeta.c} 25%, transparent)`:'none'}}/>
          {statusMeta.l}
        </span>
      </div>

      {/* Headline numbers */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,marginTop:14}}>
        <div>
          <div className="dim" style={{fontSize:10.5,letterSpacing:'.06em',textTransform:'uppercase'}}>Hittills · {String(hour).padStart(2,'0')}:00–{String(hour).padStart(2,'0')}:59</div>
          <div className="mono" style={{fontSize:24,fontWeight:600,marginTop:4,letterSpacing:'-.02em'}}>
            {consumed.toFixed(2).replace('.',',')} <span style={{fontSize:12,color:'var(--ink-2)'}}>kWh</span>
          </div>
        </div>
        <div>
          <div className="dim" style={{fontSize:10.5,letterSpacing:'.06em',textTransform:'uppercase'}}>Timsnitt · prognos</div>
          <div className="mono" style={{fontSize:24,fontWeight:600,marginTop:4,letterSpacing:'-.02em',
            color: status==='over'?'var(--c-peak)':status==='near'?'var(--c-unchanged)':'var(--ink)'}}>
            {projected.toFixed(2).replace('.',',')} <span style={{fontSize:12,color:'var(--ink-2)'}}>kWh/h</span>
          </div>
        </div>
      </div>

      {/* Bar with limit marker */}
      <div style={{marginTop:14}}>
        <div style={{position:'relative',height:14,borderRadius:7,overflow:'hidden',
          background:'rgba(180,200,240,.06)',border:'1px solid var(--line)'}}>
          {/* threshold zones */}
          <div style={{position:'absolute',inset:0,
            background:'linear-gradient(90deg, rgba(63,204,139,.18) 0%, rgba(63,204,139,.18) 70%, rgba(255,158,69,.22) 85%, rgba(255,90,101,.28) 100%)',
            opacity:.6}}/>
          {/* projected fill */}
          <div style={{position:'absolute',top:0,left:0,bottom:0,
            width:`${Math.min(100, pctOfLimit)}%`,
            background: status==='over'
              ? 'linear-gradient(90deg, var(--c-cover), var(--c-peak))'
              : status==='near'
              ? 'linear-gradient(90deg, var(--c-sell), var(--c-unchanged))'
              : 'linear-gradient(90deg, var(--c-sell), #6fd9a8)',
            transition:'width .4s'
          }}/>
          {/* consumed (so far) — darker overlay on same bar */}
          <div style={{position:'absolute',top:0,left:0,bottom:0,
            width:`${Math.min(100, (consumed/limit)*100)}%`,
            background:'rgba(0,0,0,.35)',
            mixBlendMode:'multiply'}}/>
          {/* limit marker */}
          <div style={{position:'absolute',top:-3,bottom:-3,left:'100%',
            width:2,background:'rgba(230,236,247,.85)',transform:'translateX(-2px)'}}/>
        </div>
        <div style={{display:'flex',justifyContent:'space-between',marginTop:6,fontSize:10.5,
          color:'var(--ink-3)',fontFamily:'Geist Mono'}}>
          <span>0 kWh/h</span>
          <span style={{color:'var(--ink-1)'}}>Gräns {limit.toFixed(1).replace('.',',')} kWh/h</span>
        </div>
      </div>

      {/* Limit setter */}
      <div className="hairline" style={{marginTop:14,paddingTop:12}}>
        <div style={{display:'flex',alignItems:'center',gap:10,fontSize:12}}>
          <span style={{color:'var(--ink-2)'}}>Effektgräns</span>
          <div style={{flex:1,display:'flex',alignItems:'center',gap:8}}>
            <input type="range" min="3" max="11" step=".5" value={limit}
              onChange={e=>setLimit(parseFloat(e.target.value))}
              style={{flex:1, accentColor:'var(--blue)'}}/>
            <span className="mono" style={{minWidth:54,textAlign:'right',color:'var(--ink)',fontWeight:500}}>
              {limit.toFixed(1).replace('.',',')} kWh/h
            </span>
          </div>
        </div>
        <div className="dim" style={{fontSize:11,marginTop:8,display:'flex',alignItems:'center',gap:6}}>
          {peakActive
            ? <><Icon name="bolt" size={11} color="var(--c-peak)"/> Batteri täcker överuttag · sparar effekttariff</>
            : status==='near'
            ? <><Icon name="eye" size={11} color="var(--c-unchanged)"/> Övervakar — batteri kan ta över om gränsen nås</>
            : <><Icon name="leaf" size={11} color="var(--c-sell)"/> God marginal till effektgränsen</>
          }
        </div>
      </div>

      {/* Månadens topp — den sätter effektavgiften. "timsnitt" i etiketten:
          gränsen och topparna är ENERGI PER TIMME (kWh/h); korta effektspikar
          är ofarliga så länge timsumman håller (backend 31/8). Pågående timme
          som egen DÄMPAD rad, preliminär — aldrig inbakad i toppen
          (mellanvärdet visade 8,1 där sanna toppen var 6,05). */}
      {livePeak?.monthly_peak?.max_hourly_avg_kw != null && (
        <div className="hairline" style={{marginTop:14,paddingTop:12,fontSize:12}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
            <span style={{color:'var(--ink-2)'}} title="Energi per timme (kWh/h) — korta effekttoppar är ofarliga så länge timsumman håller gränsen">Högsta topp i månaden · timsnitt</span>
            <span className="mono" style={{fontWeight:600}}>
              {livePeak.monthly_peak.max_hourly_avg_kw.toFixed(2).replace('.',',')} kWh/h
              {livePeak.monthly_peak.timestamp ? <span style={{color:'var(--ink-3)',fontWeight:400,marginLeft:6,fontSize:10.5}}>
                {new Date(livePeak.monthly_peak.timestamp).toLocaleDateString('sv-SE',{day:'numeric',month:'short'})}
              </span> : null}
            </span>
          </div>
          {livePeak.monthly_peak.current_hour_avg_kw != null && (
            <div style={{display:'flex',justifyContent:'space-between',marginTop:5,color:'var(--ink-3)',fontSize:11}}>
              <span>Pågående timme</span>
              <span className="mono">{livePeak.monthly_peak.current_hour_avg_kw.toFixed(2).replace('.',',')} kWh/h (preliminärt)</span>
            </div>
          )}
        </div>
      )}

      {/* Mini history — last 4 hours grid mean */}
      <div className="hairline" style={{marginTop:14,paddingTop:12}}>
        <div className="dim" style={{fontSize:10.5,letterSpacing:'.06em',textTransform:'uppercase',marginBottom:8}}>
          Senaste 6 timmar · snitteffekt
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(6, 1fr)',gap:4,alignItems:'end',height:46}}>
          {[...Array(6)].map((_,i)=>{
            const h = (hour - 5 + i + 24) % 24;
            const hs = slots.slice(h*4, h*4+4);
            let avg = 0; for (const s of hs) avg += gridPerSlot(s)*0.25;
            const pct = Math.min(1.05, avg / limit);
            const isOver = pct >= 1;
            const isCur = i === 5;
            return (
              <div key={i} style={{display:'flex',flexDirection:'column',alignItems:'center',gap:4}}>
                <div style={{
                  width:'100%',
                  height: Math.max(2, pct*40) + 'px',
                  background: isOver ? 'var(--c-peak)' : isCur ? 'linear-gradient(180deg, var(--blue), rgba(91,168,255,.35))'
                    : 'linear-gradient(180deg, rgba(180,200,240,.45), rgba(180,200,240,.15))',
                  borderRadius:2,
                }}/>
                <span style={{fontSize:9.5,fontFamily:'Geist Mono',
                  color:isCur?'var(--ink-1)':'var(--ink-3)'}}>
                  {String(h).padStart(2,'0')}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}