/* schema-chart.jsx — 48h Elpris & Schema, the centerpiece */

const ElprisSchema = ({ slots, nowIdx, onScrub, onNowClick, dense, refreshCount, refreshAt }) => {
  const W = 1000, H = 320;                          // viewBox — we letterbox/stretch
  const padL = 38, padR = 12, padT = 14, padB = 28;
  const plotW = W - padL - padR;
  const plotH = H - padT - padB;
  const N = slots.length;                            // 192
  const slotW = plotW / N;

  const maxY = 260;
  const yScale = v => padT + plotH - (v / maxY) * plotH;
  const xAt   = i => padL + i * slotW;

  // Stats from slots[0..96)  (today)
  const today = slots.slice(0, 96);
  const lowest  = Math.min(...today.map(s=>s.buy));
  const highest = Math.max(...today.map(s=>s.buy));
  const mean    = today.reduce((a,s)=>a+s.buy,0)/today.length;

  // Sell-price polyline (smooth)
  const sellPath = (() => {
    const pts = slots.map((s,i)=>[xAt(i)+slotW/2, yScale(s.sell)]);
    if (!pts.length) return '';
    let d = `M ${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
    for (let i=1;i<pts.length;i++){
      const [x0,y0] = pts[i-1], [x1,y1] = pts[i];
      const cx = (x0+x1)/2;
      d += ` C ${cx.toFixed(1)} ${y0.toFixed(1)} ${cx.toFixed(1)} ${y1.toFixed(1)} ${x1.toFixed(1)} ${y1.toFixed(1)}`;
    }
    return d;
  })();

  const [hover, setHover] = React.useState(null);

  const yTicks = [0, 100, 200];        // less is more
  const xTicks = [];
  for (let h=0; h<=48; h+=6){          // every 6h instead of every 4h
    xTicks.push({ h, x: xAt(h*4) });
  }
  const dayBoundaryX = xAt(96);

  // ---- Solar + consumption forecast curves (kW) ----
  // Smooth a series with a small moving average (lighter noise)
  const smoothed = (key) => slots.map((_,i)=>{
    const a = slots[Math.max(0,i-1)][key];
    const b = slots[i][key];
    const c = slots[Math.min(slots.length-1,i+1)][key];
    return a*0.25 + b*0.5 + c*0.25;
  });
  const solarSeries = smoothed('solar');
  const consSeries  = smoothed('consumption');
  const kwMax = Math.max(1, ...solarSeries, ...consSeries) * 1.15;
  // Curves occupy ~70% of the plot height; bars still dominate vertically.
  const kwVisualRange = plotH * 0.70;
  const yKw = (kw) => padT + plotH - (kw / kwMax) * kwVisualRange;

  // Smooth bezier path through points (x already centered in slot)
  const curvePath = (vals) => {
    if (!vals.length) return '';
    const pts = vals.map((v,i)=>[xAt(i)+slotW/2, yKw(v)]);
    let d = `M ${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
    for (let i=1;i<pts.length;i++){
      const [x0,y0] = pts[i-1], [x1,y1] = pts[i];
      const mx = (x0+x1)/2;
      d += ` C ${mx.toFixed(1)} ${y0.toFixed(1)} ${mx.toFixed(1)} ${y1.toFixed(1)} ${x1.toFixed(1)} ${y1.toFixed(1)}`;
    }
    return d;
  };
  const solarLine = curvePath(solarSeries);
  const consLine  = curvePath(consSeries);
  const solarArea = solarLine
    ? solarLine + ` L ${(xAt(N-1)+slotW/2).toFixed(1)} ${(padT+plotH).toFixed(1)} L ${(xAt(0)+slotW/2).toFixed(1)} ${(padT+plotH).toFixed(1)} Z`
    : '';

  // Right-side kW ticks (a few)
  const kwTicks = [];
  const kwTickStep = kwMax > 8 ? 4 : kwMax > 4 ? 2 : 1;
  for (let v = 0; v <= kwMax; v += kwTickStep){
    kwTicks.push(v);
  }

  // Hover handlers — supports both mouse and touch (mobile tap-and-drag).
  const svgRef = React.useRef(null);
  const pickAt = (clientX) => {
    const r = svgRef.current.getBoundingClientRect();
    const x = ((clientX - r.left) / r.width) * W;
    return Math.max(0, Math.min(N-1, Math.floor((x - padL) / slotW)));
  };
  const handleMove = (e) => setHover(pickAt(e.clientX));
  const handleLeave = () => setHover(null);
  const handleClick = (e) => {
    if (hover != null && onScrub) onScrub(hover);
  };
  const handleTouchMove = (e) => {
    const t = e.touches[0];
    if (!t) return;
    e.preventDefault();
    setHover(pickAt(t.clientX));
  };
  const handleTouchEnd = () => {
    // Keep last selection visible briefly so user can read the tooltip
    setTimeout(() => setHover(null), 1800);
  };

  const cur = hover != null ? slots[hover] : (slots[nowIdx] || slots[0]);

  // Legend grouped by intent
  const legendGroups = [
    { label:'Ladda batteri',  keys:['ladda_nat','ladda_sol'] },
    { label:'Använd batteri', keys:['tack_huset','peak'] },
    // K2 (Lennie-fix 2026-06-11): salj_sol (grön) och salj_batteri (teal) har
    // varsin chip med egen nyans — etiketten "Export (batteri)" skiljer dem åt
    // så "Sälj sol" aldrig kan förväxlas med batteriexport. Exakt action per
    // stapel visas dessutom i hover-tooltipen.
    { label:'Sälj / exportera', keys:['salj_sol','salj_batteri'] },
    { label:'Pausad / annat', keys:['vanta','nollexport','ai_styrt'] },
  ];

  // Confidence track under chart — colored gradient
  const conf = [];
  for (let i=0;i<48;i++){
    conf.push(0.65 + Math.sin(i*0.37)*0.18 + (i>32?-(i-32)*0.012:0));
  }

  return (
    <div className="card schema">
      <div className="head schema-head">
        <h3><Icon name="bolt" size={16} color="var(--solar)"/> Elpris &amp; Schema <span className="dim mono" style={{fontWeight:500,marginLeft:2}}>(48h)</span></h3>
        <span className="sub">
          {(() => {
            if (refreshAt == null) return 'Schemat visar HEMS-planen per kvart.';
            const s = Math.max(0, Math.floor((Date.now()-refreshAt)/1000));
            const t = s<20?'Plan uppdaterad just nu'
                    : s<60?`Plan uppdaterad för ${s}s sedan`
                    : s<3600?`Plan uppdaterad för ${Math.floor(s/60)} min sedan`
                    : `Plan uppdaterad för ${Math.floor(s/3600)} h sedan`;
            return t;
          })()}
          {refreshCount != null && <span key={refreshCount} className="refresh-pulse" aria-hidden/>}
        </span>
        <div className="right">
          <div className="schema-cur">
            <span className="ct mono">{fmt.hhmm(cur.i % 96)} {cur.day===0?'idag':'imorgon'}</span>
            <span className="cv mono"><b>{cur.buy.toFixed(1)}</b> öre</span>
            <span className="ca">
              <span className="dot" style={{background:ACTION_META[cur.action].color}}/>
              {ACTION_META[cur.action].label}
            </span>
          </div>
          <button className="btn-ghost" onClick={onNowClick}><Icon name="bolt" size={12}/> NU</button>
        </div>
      </div>

      <div className="schema-stats">
        <Stat label="LÄGSTA"  value={Math.round(lowest)}  accent="var(--c-sell)"  hint="03:15 idag"/>
        <Stat label="SNITT"   value={Math.round(mean)}    accent="var(--ink)"     hint="48 timmar"/>
        <Stat label="HÖGSTA"  value={Math.round(highest)} accent="var(--c-cover)" hint="18:30 idag"/>
        <Stat label="SPREAD"  value={Math.round(highest-lowest)} accent="var(--violet)" hint="hög ÷ låg"/>
      </div>

      <div className="schema-wrap">
        <span className="edgelbl left">IDAG</span>
        <span className="edgelbl right">IMORGON →</span>

        <svg ref={svgRef} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none"
             onMouseMove={handleMove} onMouseLeave={handleLeave} onClick={handleClick}
             onTouchStart={handleTouchMove} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}
             className="schema-svg"
             style={{touchAction:'none'}}>
          <defs>
            {/* Per-action vertical gradient — top a touch lighter, bottom saturated. */}
            {Object.entries(ACTION_META).map(([k, m]) => (
              <linearGradient key={k} id={`bar-${k}`} x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor={m.color} stopOpacity=".55"/>
                <stop offset="1" stopColor={m.color} stopOpacity="1"/>
              </linearGradient>
            ))}

            {/* Subtle stripe for "vänta" only — much finer than before */}
            <pattern id="str-wait" width="5" height="5" patternUnits="userSpaceOnUse">
              <rect width="5" height="5" fill="var(--c-wait)" fillOpacity=".85"/>
              <path d="M0 5 L5 0" stroke="rgba(255,255,255,.08)" strokeWidth="0.6"/>
            </pattern>

            {/* NU vertical line gradient */}
            <linearGradient id="now-line" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0"  stopColor="#FF5A65" stopOpacity=".9"/>
              <stop offset="1"  stopColor="#FF5A65" stopOpacity=".05"/>
            </linearGradient>

            {/* Säljpris line gradient + glow */}
            <linearGradient id="sellFade" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0"  stopColor="#ECEFF7" stopOpacity=".55"/>
              <stop offset=".5" stopColor="#ECEFF7" stopOpacity=".95"/>
              <stop offset="1"  stopColor="#ECEFF7" stopOpacity=".55"/>
            </linearGradient>
            <filter id="sell-glow" x="-2%" y="-50%" width="104%" height="200%">
              <feGaussianBlur stdDeviation="1.4" result="b"/>
              <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
            </filter>

            {/* Soft chart background */}
            <linearGradient id="bg-fade" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0"  stopColor="rgba(91,168,255,.04)"/>
              <stop offset="1"  stopColor="rgba(91,168,255,0)"/>
            </linearGradient>

            {/* Solar forecast area fill */}
            <linearGradient id="sol-area-schema" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0"   stopColor="#F4C84B" stopOpacity=".30"/>
              <stop offset=".55" stopColor="#F4C84B" stopOpacity=".08"/>
              <stop offset="1"   stopColor="#F4C84B" stopOpacity="0"/>
            </linearGradient>
          </defs>

          {/* Background tint */}
          <rect x={padL} y={padT} width={W-padR-padL} height={plotH}
            fill="url(#bg-fade)" rx="6"/>

          {/* y grid — only 100, 200 */}
          {yTicks.map(t => (
            <g key={t}>
              <line x1={padL} x2={W-padR} y1={yScale(t)} y2={yScale(t)}
                stroke="rgba(180,200,240,.06)" strokeWidth="1" strokeDasharray={t===0?'0':'2 3'}/>
              <text x={padL-8} y={yScale(t)+3} textAnchor="end"
                fill="rgba(180,200,240,.32)" fontSize="9.5" fontFamily="Geist Mono"
                style={{letterSpacing:'.04em'}}>{t}</text>
            </g>
          ))}

          {/* Day boundary — soft vertical fade */}
          <line x1={dayBoundaryX} x2={dayBoundaryX} y1={padT} y2={padT+plotH}
            stroke="rgba(180,200,240,.16)" strokeDasharray="2 4"/>

          {/* Bars — rounded top, gradient fill */}
          {slots.map((s,i) => {
            const x = xAt(i);
            const y = yScale(s.buy);
            const h = padT + plotH - y;
            let fill = `url(#bar-${s.action})`;
            if (s.action === 'vanta') fill = 'url(#str-wait)';
            const w = Math.max(0.8, slotW - 0.6);
            const r = Math.min(1.2, w/2.2);
            // path with rounded top corners only
            const x0 = x + 0.3;
            const x1 = x0 + w;
            const yB = padT + plotH;
            const d = `M ${x0} ${yB}
                       L ${x0} ${y+r}
                       Q ${x0} ${y} ${x0+r} ${y}
                       L ${x1-r} ${y}
                       Q ${x1} ${y} ${x1} ${y+r}
                       L ${x1} ${yB} Z`;
            return (
              <path key={i} d={d} fill={fill}
                opacity={hover==null || hover===i ? 1 : 0.7}
                style={{transition:'opacity .2s'}}/>
            );
          })}

          {/* Imorgon dim */}
          <rect x={dayBoundaryX} y={padT} width={W-padR-dayBoundaryX} height={plotH}
            fill="#0A0F18" opacity=".22" pointerEvents="none"/>

          {/* === Solar + consumption forecast overlay === */}
          {solarArea && <path d={solarArea} fill="url(#sol-area-schema)" pointerEvents="none"/>}
          {solarLine && <path d={solarLine} fill="none" stroke="#F4C84B"
            strokeWidth="1.6" strokeOpacity=".9" strokeLinejoin="round"
            pointerEvents="none"/>}
          {consLine && <path d={consLine} fill="none" stroke="#E6ECF7"
            strokeWidth="1.4" strokeOpacity=".82" strokeLinejoin="round"
            pointerEvents="none"/>}

          {/* Right-side kW axis (faint) */}
          {kwTicks.map(t => (
            <text key={`kw-${t}`} x={W-padR-3} y={yKw(t)-2} textAnchor="end"
              fill="rgba(244,200,75,.40)" fontSize="9" fontFamily="Geist Mono"
              style={{letterSpacing:'.04em'}}>{t}</text>
          ))}
          <text x={W-padR-3} y={padT+8} textAnchor="end"
            fill="rgba(244,200,75,.55)" fontSize="9" fontFamily="Geist Mono"
            style={{letterSpacing:'.06em'}}>kW</text>

          {/* Säljpris line — soft glow underlay + clean main */}
          <path d={sellPath} fill="none" stroke="#ECEFF7" strokeOpacity=".25"
            strokeWidth="3" filter="url(#sell-glow)"
            strokeLinejoin="round" strokeLinecap="round"/>
          <path d={sellPath} fill="none" stroke="url(#sellFade)" strokeWidth="1.4"
            strokeLinejoin="round" strokeLinecap="round"/>

          {/* x ticks every 6h */}
          {xTicks.map(t => (
            <g key={t.h}>
              <text x={t.x} y={padT+plotH+18} textAnchor="middle"
                fill="rgba(180,200,240,.38)" fontSize="9.5" fontFamily="Geist Mono"
                style={{letterSpacing:'.06em'}}>
                {String((t.h%24)).padStart(2,'0')}:00
              </text>
            </g>
          ))}

          {/* NOW marker — soft glowing dot + vertical fade line */}
          {nowIdx != null && (() => {
            const xN = xAt(nowIdx)+slotW/2;
            return (
              <g style={{pointerEvents:'none'}}>
                <line x1={xN} x2={xN} y1={padT-2} y2={padT+plotH}
                  stroke="url(#now-line)" strokeWidth="1.5"/>
                <circle cx={xN} cy={padT-2} r="8" fill="#FF5A65" opacity=".18">
                  <animate attributeName="r" values="6;11;6" dur="2.4s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" values=".25;.05;.25" dur="2.4s" repeatCount="indefinite"/>
                </circle>
                <circle cx={xN} cy={padT-2} r="4" fill="#FF5A65"/>
                <circle cx={xN} cy={padT-2} r="1.6" fill="#fff"/>
              </g>
            );
          })()}

          {/* hover crosshair */}
          {hover != null && hover !== nowIdx && (
            <line x1={xAt(hover)+slotW/2} x2={xAt(hover)+slotW/2}
              y1={padT} y2={padT+plotH}
              stroke="rgba(230,236,247,.4)" strokeWidth="1" strokeDasharray="2 3"/>
          )}
        </svg>

        {/* Mouse-following tooltip */}
        {hover != null && (() => {
          const svg = svgRef.current;
          if (!svg) return null;
          const r = svg.getBoundingClientRect();
          const xPx = ((xAt(hover) + slotW/2) / W) * r.width;
          const right = xPx > r.width * 0.6;
          return (
            <div className="schema-tip" style={{
              left: right ? null : xPx + 14,
              right: right ? r.width - xPx + 14 : null,
              top: 30,
            }}>
              <div className="t mono">{fmt.hhmm(slots[hover].i % 96)} <span className="dim">{slots[hover].day===0?'idag':'imorgon'}</span></div>
              <div className="p mono"><b>{slots[hover].buy.toFixed(1)}</b> <span className="u">öre/kWh köp</span></div>
              <div className="s mono dim">Sälj: {slots[hover].sell.toFixed(1)} öre</div>
              <div className="a">
                <span className="dot" style={{background:ACTION_META[slots[hover].action].color}}/>
                {ACTION_META[slots[hover].action].label}
              </div>
            </div>
          );
        })()}
      </div>

      {/* Grouped legend chips */}
      <div className="schema-legend">
        <div className="lg-group">
          <div className="lg-h">Prognos · kW</div>
          <div className="lg-chips">
            <span className="lg-chip"><span className="d sol-sw"/>Solproduktion</span>
            <span className="lg-chip"><span className="d cons-sw"/>Förbrukning</span>
            <span className="lg-chip"><span className="d sell-sw"/>Säljpris</span>
          </div>
        </div>
        {legendGroups.map(g => (
          <div className="lg-group" key={g.label}>
            <div className="lg-h">{g.label}</div>
            <div className="lg-chips">
              {g.keys.map(k => (
                <span key={k} className="lg-chip">
                  <span className="d" style={{background: ACTION_META[k].color}}/>
                  {ACTION_META[k].label}
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const Stat = ({label, value, accent, hint}) => (
  <div className="schema-stat">
    <div className="l">{label}</div>
    <div className="v mono"><b style={{color:accent}}>{value}</b><span className="u">öre</span></div>
    <div className="h dim mono">{hint}</div>
  </div>
);

/* styles inlined here so we don't fragment the css file */
const __schemaStyles = document.createElement('style');
__schemaStyles.textContent = `
.card.schema{border-color:var(--line-2)}
.card.schema .schema-head{padding:18px 22px}
.card.schema .schema-head h3{font-size:15px;letter-spacing:-.01em}
.card.schema .schema-head h3 .ico{width:16px;height:16px}

.schema-cur{
  display:inline-flex;align-items:center;gap:10px;
  padding:4px 12px 4px 8px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.02);
  font-size:11.5px;
}
.schema-cur .ct{color:var(--ink-2);font-size:11px}
.schema-cur .cv b{color:var(--ink);font-weight:600}
.schema-cur .cv .u{color:var(--ink-3);margin-left:2px}
.schema-cur .ca{display:inline-flex;align-items:center;gap:6px;color:var(--ink-1);
  padding-left:10px;border-left:1px solid var(--line-2)}
.schema-cur .ca .dot{width:7px;height:7px;border-radius:50%}

.schema .schema-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-bottom:1px solid var(--line);
}
.schema-stat{padding:16px 22px;position:relative;text-align:left}
.schema-stat::after{content:"";position:absolute;right:0;top:24%;bottom:24%;
  width:1px;background:var(--line)}
.schema-stat:last-child::after{display:none}
.schema-stat .l{font-size:10px;letter-spacing:.10em;color:var(--ink-3);font-weight:600}
.schema-stat .v{margin-top:8px;font-size:30px;line-height:1;display:flex;align-items:baseline;gap:4px}
.schema-stat .v b{font-weight:600;letter-spacing:-.02em}
.schema-stat .v .u{font-size:11.5px;color:var(--ink-2)}
.schema-stat .h{margin-top:6px;font-size:10.5px;letter-spacing:.04em}

.schema-wrap{position:relative;padding:22px 22px 14px}
.schema-wrap .edgelbl{
  position:absolute;top:22px;font-size:10px;letter-spacing:.12em;color:var(--ink-3);font-weight:600;
}
.schema-wrap .edgelbl.left{left:46px}
.schema-wrap .edgelbl.right{right:22px}

.schema-svg{display:block;width:100%;height:340px;cursor:crosshair;border-radius:8px}

.schema-tip{
  position:absolute; pointer-events:none;
  background:rgba(14,21,36,.94); border:1px solid var(--line-2);
  border-radius:12px; padding:10px 14px; min-width:190px;
  box-shadow:0 14px 36px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:Geist; z-index:5;
}
.schema-tip .t{font-size:11px;color:var(--ink-2)}
.schema-tip .p{font-size:17px;margin-top:3px}
.schema-tip .p b{font-weight:600}
.schema-tip .p .u{font-size:10.5px;color:var(--ink-3);margin-left:4px}
.schema-tip .s{font-size:11px;margin-top:1px}
.schema-tip .a{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;color:var(--ink-1);
  padding-top:7px;border-top:1px solid var(--line)}
.schema-tip .a .dot{width:8px;height:8px;border-radius:2px}

.schema-legend{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:0;
  padding:14px 22px 18px;
  border-top:1px solid var(--line);
}
.schema-legend .lg-group{padding:0 16px;position:relative}
.schema-legend .lg-group + .lg-group::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line);
}
.schema-legend .lg-group:first-child{padding-left:0}
.schema-legend .lg-h{
  font-size:9.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin-bottom:8px;
}
.schema-legend .lg-chips{display:flex;flex-direction:column;gap:5px}
.schema-legend .lg-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;color:var(--ink-1);
}
.schema-legend .lg-chip .d{width:8px;height:8px;border-radius:2px;flex:none}
.schema-legend .lg-chip .d.sol-sw{
  width:14px;height:0;border-top:1.8px solid #F4C84B;border-radius:0;
}
.schema-legend .lg-chip .d.cons-sw{
  width:14px;height:0;border-top:1.6px solid #E6ECF7;border-radius:0;opacity:.85;
}
.schema-legend .lg-chip .d.sell-sw{
  width:14px;height:0;border-top:1.4px solid #ECEFF7;border-radius:0;opacity:.6;
}
.schema-legend .lg-chip .ln{width:14px;height:0;border-top:1.5px dashed var(--c-sellprice);flex:none}
`;
document.head.appendChild(__schemaStyles);

Object.assign(window, { ElprisSchema });