// artboard-history.jsx — 数据检索 (data search studio)
// Flow: ① 选车辆+时段 → ② 选数据项目 → ③ 选展示方式 → ④ 渲染结果

const DATA_GROUPS = [
  {
    id: "vehicle", label: "车辆运行", icon: "car", color: "var(--info)",
    items: [
      {id:"speed",      l:"速度",          u:"km/h",  src:"TBOX",   freq:"10s"},
      {id:"odometer",   l:"累计里程",      u:"km",    src:"TBOX",   freq:"60s"},
      {id:"trip_km",    l:"行程里程",      u:"km",    src:"TBOX",   freq:"事件"},
      {id:"engine_run", l:"运行时长",      u:"s",     src:"TBOX",   freq:"60s"},
      {id:"gear",       l:"档位",          u:"-",     src:"TBOX",   freq:"10s"},
      {id:"steer",      l:"方向盘转角",    u:"°",     src:"CAN",    freq:"100ms"},
    ],
  },
  {
    id: "energy", label: "氢电系统", icon: "h2", color: "var(--accent)",
    items: [
      {id:"soc",        l:"动力电池 SOC",  u:"%",     src:"BMS",    freq:"10s"},
      {id:"batt_volt",  l:"电池总压",      u:"V",     src:"BMS",    freq:"10s"},
      {id:"batt_curr",  l:"电池电流",      u:"A",     src:"BMS",    freq:"10s"},
      {id:"batt_temp",  l:"电池温度",      u:"℃",     src:"BMS",    freq:"10s"},
      {id:"h2_pressure",l:"H₂ 压力",       u:"MPa",   src:"FCU",    freq:"10s"},
      {id:"h2_flow",    l:"H₂ 流量",       u:"g/s",   src:"FCU",    freq:"10s"},
      {id:"fc_power",   l:"电堆输出功率",  u:"kW",    src:"FCU",    freq:"10s"},
      {id:"fc_temp",    l:"电堆温度",      u:"℃",     src:"FCU",    freq:"10s"},
    ],
  },
  {
    id: "chassis", label: "底盘 & 安全", icon: "shield", color: "var(--warn)",
    items: [
      {id:"tire_p_fl",  l:"胎压 左前",     u:"MPa",   src:"TPMS",   freq:"60s"},
      {id:"tire_p_fr",  l:"胎压 右前",     u:"MPa",   src:"TPMS",   freq:"60s"},
      {id:"tire_p_rl",  l:"胎压 左后",     u:"MPa",   src:"TPMS",   freq:"60s"},
      {id:"tire_p_rr",  l:"胎压 右后",     u:"MPa",   src:"TPMS",   freq:"60s"},
      {id:"brake",      l:"制动信号",      u:"0/1",   src:"CAN",    freq:"100ms"},
      {id:"airbag",     l:"安全气囊状态",  u:"0/1",   src:"CAN",    freq:"事件"},
      {id:"abs",        l:"ABS 状态",      u:"0/1",   src:"CAN",    freq:"事件"},
    ],
  },
  {
    id: "location", label: "定位 & 通讯", icon: "pin", color: "var(--info)",
    items: [
      {id:"gps_lat",    l:"GPS 纬度",      u:"°",     src:"JT808",  freq:"10s"},
      {id:"gps_lng",    l:"GPS 经度",      u:"°",     src:"JT808",  freq:"10s"},
      {id:"gps_alt",    l:"海拔",          u:"m",     src:"JT808",  freq:"10s"},
      {id:"signal",     l:"信号强度",      u:"dBm",   src:"TBOX",   freq:"60s"},
      {id:"network",    l:"网络类型",      u:"-",     src:"TBOX",   freq:"60s"},
    ],
  },
  {
    id: "driving", label: "驾驶行为", icon: "speed", color: "var(--accent)",
    items: [
      {id:"hard_acc",   l:"急加速次数",    u:"次/h",   src:"TBOX",   freq:"事件"},
      {id:"hard_brake", l:"急刹车次数",    u:"次/h",   src:"TBOX",   freq:"事件"},
      {id:"sharp_turn", l:"急转弯次数",    u:"次/h",   src:"TBOX",   freq:"事件"},
      {id:"overspeed",  l:"超速时长",      u:"s/h",    src:"TBOX",   freq:"事件"},
      {id:"score",      l:"驾驶评分",      u:"分",     src:"算法",   freq:"日"},
    ],
  },
];

const VIEW_MODES = [
  {id:"line",   l:"曲线图",     ic:"chart",   d:"时间序列趋势"},
  {id:"area",   l:"面积图",     ic:"pulse",   d:"叠加趋势对比"},
  {id:"bar",    l:"柱状图",     ic:"layers",  d:"分时统计"},
  {id:"table",  l:"数据表",     ic:"list",    d:"按时间戳列表"},
  {id:"heat",   l:"热力日历",   ic:"history", d:"按日聚合"},
  {id:"summary",l:"统计摘要",   ic:"gauge",   d:"min/max/avg/p95"},
];

const QUICK_RANGES = [
  {id:"1h",  l:"近1小时"}, {id:"6h",  l:"近6小时"}, {id:"24h", l:"近24小时"},
  {id:"7d",  l:"近7日"},   {id:"30d", l:"近30日"},  {id:"custom", l:"自定义"},
];

const ArtboardHistory = () => {
  // Wizard step: 1 选范围, 2 选项目, 3 展示
  const [step, setStep] = React.useState(3);
  const [vehicle] = React.useState({plate:"浙F03980F", vin:"LJ2A...8814", dept:"业务一部"});
  const [range, setRange] = React.useState("24h");
  const [dateFrom] = React.useState("2026-04-27 14:02");
  const [dateTo]   = React.useState("2026-04-28 14:02");

  // Selected data items (ids)
  const [picked, setPicked] = React.useState(new Set(["speed","soc","h2_pressure"]));
  const [activeGroup, setActiveGroup] = React.useState("vehicle");

  // Visualization mode
  const [view, setView] = React.useState("line");

  const togglePick = (id) => {
    const next = new Set(picked);
    if (next.has(id)) next.delete(id); else next.add(id);
    setPicked(next);
  };

  const pickedItems = DATA_GROUPS.flatMap(g => g.items.filter(it => picked.has(it.id)).map(it => ({...it, group:g})));

  return (
    <div className="app">
      <Sidebar active="history"/>
      <div style={{flex:1, display:"flex", flexDirection:"column", minWidth:0, position:"relative", zIndex:1}}>
        <Topbar crumbs={["数据检索", `${vehicle.plate}`]} kpis={[]} showSearch={false}/>

        {/* Step indicator */}
        <div style={{padding:"10px 16px", borderBottom:"1px solid var(--border-1)", background:"var(--bg-1)", display:"flex", gap:24, alignItems:"center"}}>
          {[
            {n:1, l:"选择范围"},
            {n:2, l:"选择数据项目"},
            {n:3, l:"选择展示方式"},
          ].map((s,i,arr)=>(
            <React.Fragment key={s.n}>
              <div className="mid gap-2" style={{cursor:"pointer", opacity: step >= s.n ? 1 : 0.5}} onClick={() => setStep(s.n)}>
                <span style={{
                  width:22, height:22, borderRadius:11,
                  background: step >= s.n ? "var(--accent)" : "var(--bg-3)",
                  color: step >= s.n ? "#fff" : "var(--fg-3)",
                  display:"grid", placeItems:"center",
                  fontSize:11, fontWeight:600, fontFamily:"var(--font-mono)",
                }}>{s.n}</span>
                <span className={step === s.n ? "strong" : ""} style={{fontSize:12}}>{s.l}</span>
              </div>
              {i < arr.length - 1 && <span style={{flex:0, width:32, height:1, background:"var(--border-2)"}}/>}
            </React.Fragment>
          ))}

          <div style={{marginLeft:"auto", display:"flex", gap:6, alignItems:"center"}}>
            <span className="muted" style={{fontSize:11}}>已选 <span className="strong" style={{color:"var(--accent)"}}>{picked.size}</span> 项</span>
            <span style={{width:1, height:18, background:"var(--border-1)"}}/>
            <button className="btn" onClick={() => location.hash = "#/compare"}><Icon name="layers" size={12}/> 多车对比</button>
            <button className="btn"><Icon name="download" size={12}/> 导出 CSV</button>
            <button className="btn"><Icon name="bookmark" size={12}/> 保存查询</button>
          </div>
        </div>

        {/* Main */}
        <div style={{flex:1, display:"grid", gridTemplateColumns:"320px 1fr", minHeight:0}}>

          {/* LEFT: range + data items selector */}
          <div style={{borderRight:"1px solid var(--border-1)", background:"var(--bg-1)", display:"flex", flexDirection:"column", minHeight:0}}>

            {/* Vehicle + time */}
            <div style={{padding:14, borderBottom:"1px solid var(--border-1)"}}>
              <div className="eyebrow" style={{marginBottom:8}}>查询对象</div>
              <div className="mid gap-2" style={{padding:"8px 10px", background:"var(--bg-2)", border:"1px solid var(--border-1)", borderRadius:6}}>
                <Icon name="car" size={14} style={{color:"var(--accent)"}}/>
                <div style={{flex:1}}>
                  <div className="mono strong" style={{fontSize:12}}>{vehicle.plate}</div>
                  <div className="muted" style={{fontSize:10}}>{vehicle.vin} · {vehicle.dept}</div>
                </div>
                <Icon name="chevDown" size={11} style={{color:"var(--fg-3)"}}/>
              </div>

              <div className="eyebrow" style={{marginTop:14, marginBottom:8}}>时间范围</div>
              <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:4, marginBottom:8}}>
                {QUICK_RANGES.map(r => (
                  <span key={r.id}
                    onClick={() => setRange(r.id)}
                    className={"chip " + (range === r.id ? "accent" : "")}
                    style={{justifyContent:"center", cursor:"pointer", fontSize:10, padding:"4px 0"}}>
                    {r.l}
                  </span>
                ))}
              </div>
              <div style={{padding:"8px 10px", background:"var(--bg-2)", border:"1px solid var(--border-1)", borderRadius:6, fontSize:11, fontFamily:"var(--font-mono)"}}>
                <div className="muted" style={{fontSize:9, marginBottom:2}}>起 → 止</div>
                <div>{dateFrom}</div>
                <div>{dateTo}</div>
              </div>
            </div>

            {/* Data item picker */}
            <div className="panel-head" style={{borderBottom:"1px solid var(--border-1)"}}>
              <Icon name="cube" size={13}/>
              <span className="title">数据项目</span>
              <span className="chip accent" style={{marginLeft:"auto"}}>已选 {picked.size}</span>
            </div>

            <div style={{display:"flex", borderBottom:"1px solid var(--border-1)", padding:"6px 10px", gap:4, flexWrap:"wrap", background:"var(--bg-2)"}}>
              {DATA_GROUPS.map(g => (
                <span key={g.id}
                  onClick={() => setActiveGroup(g.id)}
                  className={"chip " + (activeGroup === g.id ? "accent" : "")}
                  style={{cursor:"pointer", fontSize:10, padding:"3px 8px"}}>
                  <Icon name={g.icon} size={10}/> {g.label}
                  <span className="mono" style={{marginLeft:4, opacity:.7}}>
                    {g.items.filter(it => picked.has(it.id)).length || g.items.length}
                  </span>
                </span>
              ))}
            </div>

            <div className="scroll" style={{flex:1}}>
              {DATA_GROUPS.filter(g => g.id === activeGroup).map(g => (
                <div key={g.id}>
                  {g.items.map(it => {
                    const on = picked.has(it.id);
                    return (
                      <div key={it.id}
                        onClick={() => togglePick(it.id)}
                        style={{
                          display:"flex", alignItems:"center", gap:10,
                          padding:"9px 14px", borderBottom:"1px solid var(--border-1)",
                          cursor:"pointer",
                          background: on ? "var(--accent-soft)" : "transparent",
                        }}>
                        <span style={{
                          width:14, height:14, borderRadius:3,
                          border: "1.5px solid " + (on ? "var(--accent)" : "var(--border-2)"),
                          background: on ? "var(--accent)" : "transparent",
                          display:"grid", placeItems:"center",
                          flexShrink:0,
                        }}>
                          {on && <svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-6" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                        </span>
                        <div style={{flex:1, minWidth:0}}>
                          <div className="between">
                            <span className="strong" style={{fontSize:12}}>{it.l}</span>
                            <span className="mono muted" style={{fontSize:10}}>{it.u}</span>
                          </div>
                          <div className="mid gap-1" style={{marginTop:2}}>
                            <span style={{fontSize:9, padding:"1px 5px", borderRadius:2, background:"var(--bg-2)", border:"1px solid var(--border-1)", color: g.color, fontFamily:"var(--font-mono)"}}>{it.src}</span>
                            <span className="muted mono" style={{fontSize:9}}>· {it.freq}</span>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              ))}
            </div>

            <div style={{padding:"10px 14px", borderTop:"1px solid var(--border-1)", display:"flex", gap:6}}>
              <button className="btn" style={{flex:1}} onClick={() => setPicked(new Set())}>清空</button>
              <button className="btn primary" style={{flex:2}}>
                <Icon name="search" size={12}/> 查询 {picked.size} 项
              </button>
            </div>
          </div>

          {/* RIGHT: visualization */}
          <div style={{display:"flex", flexDirection:"column", minHeight:0, background:"var(--bg-2)"}}>

            {/* View-mode picker */}
            <div style={{padding:"10px 16px", borderBottom:"1px solid var(--border-1)", background:"var(--bg-1)", display:"flex", gap:6, alignItems:"center", flexWrap:"wrap"}}>
              <span className="muted" style={{fontSize:11, marginRight:4}}>展示</span>
              {VIEW_MODES.map(v => (
                <span key={v.id}
                  onClick={() => setView(v.id)}
                  style={{
                    display:"flex", alignItems:"center", gap:6,
                    padding:"5px 10px", borderRadius:5, cursor:"pointer", fontSize:11,
                    background: view === v.id ? "var(--accent-soft)" : "transparent",
                    border: "1px solid " + (view === v.id ? "var(--accent)" : "var(--border-1)"),
                    color: view === v.id ? "var(--accent)" : "var(--fg-1)",
                  }}>
                  <Icon name={v.ic} size={12}/>
                  <span>{v.l}</span>
                </span>
              ))}
              <div style={{marginLeft:"auto"}}>
                <span className="muted" style={{fontSize:11}}>采样：</span>
                <span className="chip">原始</span>
                <span className="chip" style={{marginLeft:4}}>1分钟</span>
                <span className="chip accent" style={{marginLeft:4}}>5分钟</span>
                <span className="chip" style={{marginLeft:4}}>1小时</span>
              </div>
            </div>

            {/* Selected items pills */}
            <div style={{padding:"8px 16px", borderBottom:"1px solid var(--border-1)", background:"var(--bg-1)", display:"flex", gap:6, flexWrap:"wrap", alignItems:"center"}}>
              {pickedItems.length === 0 && <span className="muted" style={{fontSize:11}}>请从左侧选择数据项</span>}
              {pickedItems.map(it => (
                <span key={it.id} className="chip" style={{
                  fontSize:10, padding:"3px 8px",
                  background:"var(--bg-2)",
                  borderColor: it.group.color, color: it.group.color,
                }}>
                  <span style={{width:6, height:6, borderRadius:3, background: it.group.color}}/>
                  {it.l}
                  <span className="muted" style={{fontSize:9, marginLeft:2}}>{it.u}</span>
                  <span style={{cursor:"pointer", marginLeft:2}} onClick={() => togglePick(it.id)}>×</span>
                </span>
              ))}
            </div>

            {/* Render area */}
            <div className="scroll" style={{flex:1, padding:16}}>
              {view === "line"    && <LineView    items={pickedItems}/>}
              {view === "area"    && <AreaView    items={pickedItems}/>}
              {view === "bar"     && <BarView     items={pickedItems}/>}
              {view === "table"   && <TableView   items={pickedItems}/>}
              {view === "heat"    && <HeatView    items={pickedItems}/>}
              {view === "summary" && <SummaryView items={pickedItems}/>}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Visualizations ───────────────────────────────────────────

const colorFor = (it, fallback) => {
  if (it.id === "speed" || it.id.startsWith("hard_") || it.id === "h2_flow") return "var(--info)";
  if (it.id === "soc" || it.id.startsWith("batt") || it.id === "fc_power") return "var(--accent)";
  if (it.id.startsWith("h2_") || it.id.startsWith("fc_temp")) return "var(--warn)";
  if (it.id.startsWith("tire_")) return "var(--danger)";
  return it.group?.color || fallback || "var(--accent)";
};

const synth = (id, n=120) => {
  // Deterministic per-id pseudo-random series
  const seed = id.split("").reduce((s,c) => s + c.charCodeAt(0), 0);
  const out = [];
  for (let i=0;i<n;i++) {
    const v = Math.sin((i+seed) * 0.18) * 0.4 + Math.cos((i+seed*0.7) * 0.07) * 0.3 + 0.5
            + Math.sin((i+seed*1.3) * 0.5) * 0.08;
    out.push(Math.max(0.02, Math.min(0.98, v)));
  }
  return out;
};

const LineView = ({ items }) => {
  if (!items.length) return <EmptyHint/>;
  return (
    <div className="col gap-3">
      {items.map(it => (
        <div key={it.id} className="panel">
          <div className="panel-head" style={{borderBottom:"1px solid var(--border-1)"}}>
            <span style={{width:8, height:8, borderRadius:4, background: colorFor(it)}}/>
            <span className="title">{it.l}</span>
            <span className="muted mono" style={{fontSize:10, marginLeft:4}}>{it.u}</span>
            <div className="actions">
              <span className="mono muted" style={{fontSize:10}}>{it.src} · {it.freq}</span>
              <span className="chip"><Icon name="download" size={9}/> CSV</span>
              <span className="chip"><Icon name="expand" size={9}/></span>
            </div>
          </div>
          <div style={{padding:"14px 16px"}}>
            <Sparkline data={synth(it.id, 240)} h={120} color={colorFor(it)} fill axis/>
            <TimeAxis/>
          </div>
        </div>
      ))}
    </div>
  );
};

const AreaView = ({ items }) => {
  if (!items.length) return <EmptyHint/>;
  return (
    <div className="panel">
      <div className="panel-head" style={{borderBottom:"1px solid var(--border-1)"}}>
        <Icon name="pulse" size={12}/>
        <span className="title">{items.length} 项叠加</span>
        <div className="actions">
          {items.map(it => (
            <span key={it.id} className="mid gap-1" style={{fontSize:10}}>
              <span style={{width:8, height:8, borderRadius:2, background: colorFor(it)}}/>
              {it.l}
            </span>
          ))}
        </div>
      </div>
      <div style={{padding:"14px 16px", position:"relative"}}>
        <svg width="100%" height="320" viewBox="0 0 800 320" preserveAspectRatio="none" style={{display:"block"}}>
          {[0,0.25,0.5,0.75,1].map((p,i) => (
            <line key={i} x1="0" y1={300*p+10} x2="800" y2={300*p+10} stroke="var(--border-1)" strokeWidth="1"/>
          ))}
          {items.map((it,idx) => {
            const data = synth(it.id, 240);
            const path = data.map((v,i) => `${(i/(data.length-1))*800},${310 - v*300}`).join(" L");
            return (
              <g key={it.id}>
                <path d={`M ${path} L 800,310 L 0,310 Z`} fill={colorFor(it)} opacity={0.12}/>
                <path d={`M ${path}`} fill="none" stroke={colorFor(it)} strokeWidth="1.6"/>
              </g>
            );
          })}
        </svg>
        <TimeAxis/>
      </div>
    </div>
  );
};

const BarView = ({ items }) => {
  if (!items.length) return <EmptyHint/>;
  const buckets = ["00","02","04","06","08","10","12","14","16","18","20","22"];
  return (
    <div className="col gap-3">
      {items.map(it => {
        const data = synth(it.id, buckets.length).map(v => v * 100);
        return (
          <div key={it.id} className="panel">
            <div className="panel-head" style={{borderBottom:"1px solid var(--border-1)"}}>
              <span style={{width:8, height:8, borderRadius:4, background: colorFor(it)}}/>
              <span className="title">{it.l} <span className="muted" style={{fontSize:10, marginLeft:4}}>· 按 2 小时聚合</span></span>
              <div className="actions"><span className="mono muted" style={{fontSize:10}}>{it.u}</span></div>
            </div>
            <div style={{padding:"14px 16px"}}>
              <svg width="100%" height="120" viewBox="0 0 720 120" preserveAspectRatio="none" style={{display:"block"}}>
                {data.map((v,i) => {
                  const x = i * (720/data.length) + 8;
                  const w = (720/data.length) - 16;
                  const h = (v/100) * 100;
                  return (
                    <g key={i}>
                      <rect x={x} y={110-h} width={w} height={h} fill={colorFor(it)} opacity="0.85" rx="2"/>
                      <text x={x+w/2} y="118" textAnchor="middle" fontSize="9" fill="var(--fg-3)" fontFamily="var(--font-mono)">{buckets[i]}</text>
                    </g>
                  );
                })}
              </svg>
            </div>
          </div>
        );
      })}
    </div>
  );
};

const TableView = ({ items }) => {
  if (!items.length) return <EmptyHint/>;
  // 30 rows of timestamps
  const rows = Array.from({length:40}, (_,i) => {
    const d = new Date(2026, 3, 28, 14, 0, 0);
    d.setMinutes(d.getMinutes() - i * 5);
    const ts = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")} ${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}:00`;
    const vals = items.map(it => synth(it.id, 240)[i % 240]);
    return { ts, vals };
  });

  return (
    <div className="panel">
      <div className="panel-head" style={{borderBottom:"1px solid var(--border-1)"}}>
        <Icon name="list" size={12}/>
        <span className="title">数据列表</span>
        <span className="muted" style={{fontSize:11, marginLeft:6}}>共 1,728 行 · 显示 40</span>
        <div className="actions">
          <span className="chip"><Icon name="filter" size={9}/> 筛选</span>
          <span className="chip"><Icon name="download" size={9}/> CSV</span>
        </div>
      </div>
      <div style={{maxHeight:520, overflowY:"auto"}}>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width:160, position:"sticky", top:0, background:"var(--bg-1)"}}>时间戳</th>
              {items.map(it => (
                <th key={it.id} style={{textAlign:"right", position:"sticky", top:0, background:"var(--bg-1)"}}>
                  <div>{it.l}</div>
                  <div className="muted mono" style={{fontSize:9, fontWeight:400}}>{it.u} · {it.src}</div>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r,i) => (
              <tr key={i}>
                <td className="mono muted" style={{fontSize:11}}>{r.ts}</td>
                {r.vals.map((v,j) => {
                  const it = items[j];
                  let display;
                  if (it.id === "speed")        display = (v*80).toFixed(1);
                  else if (it.id === "soc")     display = (20 + v*70).toFixed(1);
                  else if (it.id.startsWith("h2_pressure")) display = (3.5 + v*1.3).toFixed(2);
                  else if (it.id.startsWith("tire_")) display = (2.7 + v*0.6).toFixed(2);
                  else if (it.id.startsWith("batt_temp")) display = (24 + v*22).toFixed(1);
                  else if (it.id === "odometer") display = (124820 + v*4).toFixed(1);
                  else display = (v*100).toFixed(2);
                  return <td key={j} className="mono" style={{textAlign:"right", color: colorFor(it)}}>{display}</td>;
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const HeatView = ({ items }) => {
  if (!items.length) return <EmptyHint/>;
  return (
    <div className="col gap-3">
      {items.map(it => {
        const cells = synth(it.id, 30); // 30 days
        return (
          <div key={it.id} className="panel">
            <div className="panel-head" style={{borderBottom:"1px solid var(--border-1)"}}>
              <span style={{width:8, height:8, borderRadius:4, background: colorFor(it)}}/>
              <span className="title">{it.l} · 30 日热力</span>
              <div className="actions"><span className="mono muted" style={{fontSize:10}}>{it.u}</span></div>
            </div>
            <div style={{padding:"14px 16px"}}>
              <div style={{display:"grid", gridTemplateColumns:"repeat(30, 1fr)", gap:3}}>
                {cells.map((v,i) => (
                  <div key={i} title={`第 ${i+1} 日 · ${(v*100).toFixed(0)}`}
                    style={{
                      aspectRatio:"1",
                      borderRadius:3,
                      background: colorFor(it),
                      opacity: 0.15 + v*0.85,
                    }}/>
                ))}
              </div>
              <div className="between muted mono" style={{marginTop:8, fontSize:10}}>
                <span>30 日前</span><span>今日</span>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

const SummaryView = ({ items }) => {
  if (!items.length) return <EmptyHint/>;
  return (
    <div style={{display:"grid", gridTemplateColumns:"repeat(auto-fit, minmax(280px, 1fr))", gap:12}}>
      {items.map(it => {
        const data = synth(it.id, 240).map(v => v*100);
        const min = Math.min(...data), max = Math.max(...data);
        const avg = data.reduce((s,v)=>s+v,0)/data.length;
        const sorted = [...data].sort((a,b)=>a-b);
        const p95 = sorted[Math.floor(sorted.length*0.95)];
        const p50 = sorted[Math.floor(sorted.length*0.50)];

        // Scale to plausible units
        const fmt = (v) => {
          if (it.id === "speed") return (v*0.8).toFixed(1);
          if (it.id === "soc")   return (20 + v*0.7).toFixed(1);
          if (it.id.startsWith("h2_pressure")) return (3.5 + v*0.013).toFixed(2);
          return v.toFixed(1);
        };

        return (
          <div key={it.id} className="panel" style={{padding:14}}>
            <div className="between" style={{marginBottom:10}}>
              <div>
                <div className="strong" style={{fontSize:13}}>{it.l}</div>
                <div className="muted mono" style={{fontSize:10}}>{it.u} · {it.src}</div>
              </div>
              <span style={{width:10, height:10, borderRadius:5, background: colorFor(it)}}/>
            </div>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}>
              {[
                {l:"平均", v:fmt(avg), c:colorFor(it)},
                {l:"中位", v:fmt(p50), c:"var(--fg-1)"},
                {l:"最大", v:fmt(max), c:"var(--danger)"},
                {l:"最小", v:fmt(min), c:"var(--ok)"},
                {l:"P95",  v:fmt(p95), c:"var(--warn)"},
                {l:"样本", v:"1,728", c:"var(--fg-2)"},
              ].map((s,i) => (
                <div key={i} style={{padding:"6px 10px", background:"var(--bg-2)", borderRadius:4, border:"1px solid var(--border-1)"}}>
                  <div className="muted" style={{fontSize:10}}>{s.l}</div>
                  <div className="mono strong" style={{fontSize:14, color: s.c, marginTop:2}}>{s.v}</div>
                </div>
              ))}
            </div>
            <div style={{marginTop:10}}>
              <Sparkline data={synth(it.id, 80)} h={32} color={colorFor(it)} fill/>
            </div>
          </div>
        );
      })}
    </div>
  );
};

// Sparkline + axis helpers
const Sparkline = ({ data, h=80, color="var(--accent)", fill=false, axis=false }) => {
  const w = 800;
  const max = Math.max(...data, 0.01);
  const path = data.map((v,i) => `${(i/(data.length-1))*w},${h - (v/max) * (h-12) - 6}`).join(" L");
  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{display:"block"}}>
      {axis && [0,0.25,0.5,0.75,1].map((p,i) => (
        <line key={i} x1="0" y1={(h-12)*p+6} x2={w} y2={(h-12)*p+6} stroke="var(--border-1)" strokeWidth="1"/>
      ))}
      {fill && <path d={`M ${path} L ${w},${h} L 0,${h} Z`} fill={color} opacity="0.16"/>}
      <path d={`M ${path}`} fill="none" stroke={color} strokeWidth="1.6"/>
    </svg>
  );
};

const TimeAxis = () => (
  <div className="muted mono" style={{display:"flex", justifyContent:"space-between", marginTop:6, fontSize:10}}>
    {["00:00","04:00","08:00","12:00","16:00","20:00","24:00"].map(t => <span key={t}>{t}</span>)}
  </div>
);

const EmptyHint = () => (
  <div style={{padding:"60px 20px", textAlign:"center", color:"var(--fg-3)"}}>
    <Icon name="cube" size={48} style={{opacity:.3}}/>
    <div style={{marginTop:14, fontSize:13}}>从左侧选择数据项目以开始检索</div>
    <div className="muted" style={{fontSize:11, marginTop:4}}>支持速度 / SOC / H₂ 压力 / 胎压 / 驾驶行为等 30+ 字段</div>
  </div>
);

window.ArtboardHistory = ArtboardHistory;
