// Sparkline — small SVG line for trend in KPIs / cards
const Sparkline = ({ data, color = "var(--text-2)", w = 80, h = 20, fill = false }) => {
  if (!data || data.length === 0) return null;
  const min = Math.min(...data), max = Math.max(...data);
  const range = max - min || 1;
  const step = w / (data.length - 1);
  const points = data.map((v, i) => [i * step, h - ((v - min) / range) * (h - 2) - 1]);
  const d = points.map((p, i) => `${i===0?"M":"L"}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(" ");
  const area = fill ? `${d} L ${w} ${h} L 0 ${h} Z` : null;
  return (
    <svg width={w} height={h} style={{display:"block"}}>
      {fill && <path d={area} fill={color} opacity="0.12"/>}
      <path d={d} fill="none" stroke={color} strokeWidth="1.2" strokeLinejoin="round" strokeLinecap="round"/>
    </svg>
  );
};

// Mini load-history bar strip used inside cards
const LoadStrip = ({ data, status = "running", h = 22 }) => {
  const w = 100;
  const bw = w / data.length;
  const color = status === "warn" ? "var(--warn)" : status === "alarm" ? "var(--alarm)" : status === "offline" ? "var(--off)" : "var(--ok)";
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      {data.map((v, i) => {
        const bh = (v / 100) * (h - 1);
        return <rect key={i} x={i*bw+0.2} y={h-bh} width={bw-0.4} height={bh} fill={color} opacity={0.35 + (v/100)*0.55}/>;
      })}
    </svg>
  );
};

// KPI card used in the top bar
const Kpi = ({ label, value, unit, sub, delta, deltaDir, tone = "ok", spark, sparkColor }) => (
  <div className={`kpi ${tone}`}>
    <div className="label"><span className="dot"/>{label}</div>
    <div className="val">
      <span>{value}</span>
      {unit && <span className="unit">{unit}</span>}
      {sub && <span className="sub">{sub}</span>}
    </div>
    {delta && (
      <div className={`delta ${deltaDir||""}`}>
        {deltaDir === "up" && "▲ "}
        {deltaDir === "down" && "▼ "}
        {delta}
      </div>
    )}
    {spark && <div className="spark"><Sparkline data={spark} color={sparkColor||"var(--text-2)"} w={96} h={24} fill/></div>}
  </div>
);

// Deterministic pseudo-random for consistent sparklines per genset
const seedRand = (seed) => {
  let s = seed;
  return () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
};
const makeLoadHistory = (genset, points = 32) => {
  const base = genset.load;
  const rand = seedRand(genset.id.split("").reduce((a,c)=>a+c.charCodeAt(0),0));
  if (genset.status === "offline" || genset.status === "alarm") {
    return Array.from({length: points}, (_, i) => {
      if (i < points * 0.7) return base * (0.8 + rand() * 0.4) + 30;
      return 0;
    });
  }
  return Array.from({length: points}, () => Math.max(0, Math.min(100, base + (rand() - 0.5) * 18)));
};

const GensetCard = ({ g }) => {
  const state = g.status;
  const stateLabel = state === "running" ? "RUN" : state === "warn" ? "WARN" : state === "alarm" ? "ALARM" : "OFF";
  const loadTone = g.load > 90 ? "alarm" : g.load > 80 ? "warn" : "ok";
  const fuelTone = g.fuel < 25 ? "alarm" : g.fuel < 45 ? "warn" : "ok";
  const history = makeLoadHistory(g);
  const kwOut = (g.kw * g.load / 100).toFixed(0);
  const qs = (typeof _preserveQS === "function") ? _preserveQS() : "";
  const sep = qs ? qs + "&" : "?";
  const href = `genset.html${sep}id=${g.id}`;

  return (
    <a className={`gcard ${state}`} title={`Open ${g.id}`} data-genset={g.id} data-status={state} data-kw={g.kw} href={href} style={{display:"block", textDecoration:"none", color:"inherit"}}>
      <div className="row1">
        <span className="sdot"/>
        <span className="tag">{g.id}</span>
        <span className="state-label" data-state-label>{stateLabel}</span>
      </div>
      <div className="row2">
        <span className="model">{g.model}</span>
        <span>{g.kw} kW · {g.controller}</span>
      </div>
      <div className="bars">
        <div className="metric">
          <div className="mhd">
            <span className="lbl">Load</span>
            <span className="v">
              {state === "offline" ? "—" : <span data-metric="load" data-base={g.load} data-band="3" data-precision="0" data-period="22">{g.load}</span>}<span className="u">%</span>
              {state !== "offline" && <span className="u" style={{marginLeft:6}}>· <span data-metric="kw-out" data-base={kwOut} data-band={Math.max(2, g.kw * 0.03)} data-precision="0" data-period="22">{kwOut}</span> kW</span>}
            </span>
          </div>
          <div className="bar">
            <div className={`fill ${loadTone}`} style={{width: state === "offline" ? "0%" : `${g.load}%`}} data-bar="load"/>
            <div className="tick" style={{left:"80%"}}/>
            <div className="tick" style={{left:"90%"}}/>
          </div>
        </div>
        <div className="metric">
          <div className="mhd">
            <span className="lbl">Fuel</span>
            <span className="v"><span data-metric="fuel" data-base={g.fuel} data-band="1.5" data-precision="0" data-period="180" data-drift-dir="down">{g.fuel}</span><span className="u">%</span></span>
          </div>
          <div className="bar">
            <div className={`fill ${fuelTone}`} style={{width:`${g.fuel}%`}} data-bar="fuel"/>
            <div className="tick" style={{left:"25%"}}/>
            <div className="tick" style={{left:"45%"}}/>
          </div>
        </div>
      </div>
      <div className="spark-row">
        <LoadStrip data={history} status={state}/>
      </div>
      <div className="row-foot">
        <span className="hrs">{g.hoursTotal.toLocaleString()} h</span>
        <span>·</span>
        <span>svc in {Math.max(0, 500 - g.hoursSinceService)}h</span>
        <span className={`alarms ${g.alarmCount>0?"has":""}`} data-alarms-badge>
          <span className="dotmini"/>
          {g.alarmCount > 0 ? `${g.alarmCount} alarm${g.alarmCount>1?"s":""}` : "no alarms"}
        </span>
      </div>
    </a>
  );
};

Object.assign(window, { Kpi, Sparkline, LoadStrip, GensetCard, makeLoadHistory });