// artboard-playback.jsx — Trajectory playback with synchronized data

// ── Calendar dropdown ─────────────────────────────────────
const Calendar = ({ selected, onSelect, onClose }) => {
  // Anchor: April 2026 — month-view picker
  const [viewMonth, setViewMonth] = React.useState(() => {
    const [y, m] = selected.split("-").map(Number);
    return { y, m: m - 1 }; // 0-indexed
  });

  React.useEffect(() => {
    const onDoc = (e) => { if (!e.target.closest("[data-cal]")) onClose(); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [onClose]);

  const monthName = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"][viewMonth.m];
  const firstDay  = new Date(viewMonth.y, viewMonth.m, 1).getDay(); // 0=Sun
  const daysInMth = new Date(viewMonth.y, viewMonth.m + 1, 0).getDate();
  const today = "2026-04-28";

  // Mock days with trips (heat indicator)
  const tripDays = {
    "2026-04-21": 5, "2026-04-22": 6, "2026-04-23": 4, "2026-04-24": 7, "2026-04-25": 3,
    "2026-04-26": 0, "2026-04-27": 5, "2026-04-28": 6, "2026-04-15": 4, "2026-04-16": 6,
    "2026-04-08": 3, "2026-04-09": 5, "2026-04-10": 4,
  };

  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push(null);
  for (let d = 1; d <= daysInMth; d++) cells.push(d);
  while (cells.length % 7) cells.push(null);

  const fmt = (d) => `${viewMonth.y}-${String(viewMonth.m + 1).padStart(2,"0")}-${String(d).padStart(2,"0")}`;

  return (
    <div data-cal style={{
      position:"absolute", top:36, left:0, zIndex:100, width:280,
      background:"var(--bg-popover)", border:"1px solid var(--border-2)", borderRadius:8,
      boxShadow:"0 12px 32px rgba(0,0,0,.18)", padding:14,
    }}>
      {/* Month nav */}
      <div className="between" style={{marginBottom:10}}>
        <button className="btn icon sm" onClick={() => setViewMonth(m => ({ y: m.m === 0 ? m.y-1 : m.y, m: m.m === 0 ? 11 : m.m-1 }))}>
          <Icon name="chevron" size={12} style={{transform:"rotate(180deg)"}}/>
        </button>
        <span className="strong" style={{fontSize:13}}>{viewMonth.y} 年 {monthName}</span>
        <button className="btn icon sm" onClick={() => setViewMonth(m => ({ y: m.m === 11 ? m.y+1 : m.y, m: m.m === 11 ? 0 : m.m+1 }))}>
          <Icon name="chevron" size={12}/>
        </button>
      </div>
      {/* Weekdays */}
      <div style={{display:"grid", gridTemplateColumns:"repeat(7, 1fr)", gap:2, marginBottom:4}}>
        {["日","一","二","三","四","五","六"].map(w => (
          <div key={w} className="muted" style={{fontSize:10, textAlign:"center", padding:"4px 0"}}>{w}</div>
        ))}
      </div>
      {/* Day cells */}
      <div style={{display:"grid", gridTemplateColumns:"repeat(7, 1fr)", gap:2}}>
        {cells.map((d, i) => {
          if (!d) return <div key={i} style={{height:30}}/>;
          const ds = fmt(d);
          const trips = tripDays[ds] || 0;
          const isSel = ds === selected;
          const isToday = ds === today;
          const heat = trips === 0 ? null : trips < 3 ? "var(--accent-soft)" : trips < 5 ? "rgba(0,113,67,.30)" : "var(--accent)";
          return (
            <div key={i}
              onClick={() => onSelect(ds)}
              style={{
                height:30, borderRadius:5, cursor:"pointer",
                display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center",
                fontSize:11, position:"relative",
                background: isSel ? "var(--accent)" : "transparent",
                color: isSel ? "#fff" : trips === 0 ? "var(--fg-3)" : "var(--fg-1)",
                fontWeight: isSel || isToday ? 600 : 400,
                border: isToday && !isSel ? "1px solid var(--accent)" : "1px solid transparent",
              }}
              onMouseEnter={(e) => !isSel && (e.currentTarget.style.background = "var(--bg-2)")}
              onMouseLeave={(e) => !isSel && (e.currentTarget.style.background = "transparent")}>
              <span className="mono">{d}</span>
              {trips > 0 && !isSel && (
                <span style={{position:"absolute", bottom:3, width:4, height:4, borderRadius:2, background:heat}}/>
              )}
              {trips > 0 && isSel && (
                <span style={{position:"absolute", bottom:2, fontSize:8, opacity:.85}}>{trips}</span>
              )}
            </div>
          );
        })}
      </div>
      {/* Footer legend */}
      <div className="between" style={{marginTop:10, paddingTop:10, borderTop:"1px solid var(--border-1)", fontSize:10}}>
        <span className="muted">行程频次</span>
        <div className="mid gap-2">
          <span className="mid gap-1"><span style={{width:6, height:6, borderRadius:3, background:"var(--accent-soft)"}}/><span className="muted">少</span></span>
          <span className="mid gap-1"><span style={{width:6, height:6, borderRadius:3, background:"rgba(0,113,67,.30)"}}/><span className="muted">中</span></span>
          <span className="mid gap-1"><span style={{width:6, height:6, borderRadius:3, background:"var(--accent)"}}/><span className="muted">高</span></span>
        </div>
      </div>
    </div>
  );
};

const ArtboardPlayback = () => {
  const [t, setT] = React.useState(42); // 0-100
  const [speed, setSpeed] = React.useState(2);
  const [playing, setPlaying] = React.useState(true);

  // Date / time-range selection
  const [dateStr, setDateStr] = React.useState("2026-04-28");
  const [timeFrom, setTimeFrom] = React.useState("14:02");
  const [timeTo,   setTimeTo]   = React.useState("14:44");
  const [calOpen,  setCalOpen]  = React.useState(false);

  // List of trips on the selected date — each is a candidate range
  const trips = [
    {id:"T-001", from:"08:14", to:"09:42", km:42.6, evt:1, route:"总站 → 港务局",     active:false},
    {id:"T-002", from:"10:08", to:"11:35", km:38.1, evt:0, route:"港务局 → 维保中心", active:false},
    {id:"T-003", from:"12:45", to:"13:38", km:21.4, evt:2, route:"维保中心 → 总站",   active:false},
    {id:"T-004", from:"14:02", to:"14:44", km:32.4, evt:3, route:"总站 → 乍浦港 #2",  active:true },
    {id:"T-005", from:"15:10", to:"16:32", km:48.9, evt:1, route:"乍浦港 → 嘉兴南",   active:false},
    {id:"T-006", from:"17:48", to:"19:05", km:55.2, evt:2, route:"嘉兴南 → 总站",     active:false},
  ];

  // Compute marker pos along a path
  const path = "M 200 540 L 280 480 L 360 420 L 440 380 L 520 340 L 620 320 L 720 320 L 820 340 L 900 380 L 980 440";
  const points = [
    [200,540],[280,480],[360,420],[440,380],[520,340],[620,320],[720,320],[820,340],[900,380],[980,440]
  ];
  const idx = Math.min(points.length - 1, Math.floor((t/100) * (points.length - 1)));
  const next = Math.min(points.length - 1, idx + 1);
  const frac = (t/100) * (points.length - 1) - idx;
  const px = points[idx][0] + (points[next][0] - points[idx][0]) * frac;
  const py = points[idx][1] + (points[next][1] - points[idx][1]) * frac;

  React.useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => setT(prev => (prev + 0.4 * speed) % 100), 80);
    return () => clearInterval(id);
  }, [playing, speed]);

  const events = [
    {at:8, type:"start", lbl:"出发·总站"},
    {at:22, type:"warn", lbl:"急加速"},
    {at:38, type:"stop", lbl:"信号停车"},
    {at:55, type:"warn", lbl:"超速"},
    {at:74, type:"stop", lbl:"补能站"},
    {at:92, type:"end", lbl:"到达·机场"},
  ];

  return (
    <div className="app">
      <Sidebar active="route"/>
      <div style={{flex:1, display:"flex", flexDirection:"column", minWidth:0, position:"relative", zIndex:1}}>
        <Topbar crumbs={["轨迹回放", `浙F07179F · ${dateStr.slice(5)} ${timeFrom} → ${timeTo}`]} kpis={[]} showSearch={false}/>

        {/* Date / time-range selector bar */}
        <div style={{padding:"10px 16px", borderBottom:"1px solid var(--border-1)", background:"var(--bg-1)", display:"flex", gap:14, alignItems:"center", flexWrap:"wrap"}}>
          <div className="mid gap-2">
            <Icon name="history" size={14} style={{color:"var(--accent)"}}/>
            <span className="muted" style={{fontSize:11}}>日期</span>
          </div>

          {/* Date pill with calendar dropdown */}
          <div style={{position:"relative"}}>
            <button
              onClick={() => setCalOpen(!calOpen)}
              className="btn"
              style={{height:30, padding:"0 12px", display:"flex", alignItems:"center", gap:8, background:"var(--bg-2)", borderColor: calOpen ? "var(--accent)" : "var(--border-1)"}}>
              <Icon name="bookmark" size={12}/>
              <span className="mono strong" style={{fontSize:12}}>{dateStr}</span>
              <span className="muted" style={{fontSize:10, marginLeft:4}}>周二</span>
              <Icon name="chevDown" size={11} style={{color:"var(--fg-3)"}}/>
            </button>
            {calOpen && (
              <Calendar selected={dateStr} onSelect={(d) => { setDateStr(d); setCalOpen(false); }} onClose={() => setCalOpen(false)}/>
            )}
          </div>

          {/* Quick-range presets */}
          <div className="row gap-1">
            {[
              {l:"今日",  v:"today"},
              {l:"昨日",  v:"yesterday"},
              {l:"近7日", v:"7d"},
              {l:"近30日",v:"30d"},
              {l:"自定义",v:"custom"},
            ].map((p,i) => (
              <span key={i} className={"chip " + (p.v === "custom" ? "accent" : "")}
                style={{cursor:"pointer", fontSize:10}}
                onClick={() => {
                  const today = new Date("2026-04-28");
                  if (p.v === "today") setDateStr("2026-04-28");
                  else if (p.v === "yesterday") setDateStr("2026-04-27");
                  else if (p.v === "7d") setDateStr("2026-04-22");
                  else if (p.v === "30d") setDateStr("2026-03-29");
                }}>{p.l}</span>
            ))}
          </div>

          <span style={{width:1, height:20, background:"var(--border-1)"}}/>

          {/* Time range */}
          <div className="mid gap-2">
            <span className="muted" style={{fontSize:11}}>时段</span>
            <div style={{display:"flex", alignItems:"center", gap:0, background:"var(--bg-2)", border:"1px solid var(--border-1)", borderRadius:6, height:30, padding:"0 4px"}}>
              <input type="text" value={timeFrom} onChange={e => setTimeFrom(e.target.value)}
                style={{width:54, height:22, background:"transparent", border:"none", color:"var(--fg-0)", fontFamily:"var(--font-mono)", fontSize:12, textAlign:"center", outline:"none"}}/>
              <span className="muted mono" style={{fontSize:11}}>→</span>
              <input type="text" value={timeTo} onChange={e => setTimeTo(e.target.value)}
                style={{width:54, height:22, background:"transparent", border:"none", color:"var(--fg-0)", fontFamily:"var(--font-mono)", fontSize:12, textAlign:"center", outline:"none"}}/>
            </div>
          </div>

          {/* Trip count badge */}
          <span className="chip" style={{fontSize:10}}>
            <span className="muted">当日行程</span>
            <span className="mono strong" style={{marginLeft:6, color:"var(--accent)"}}>{trips.length}</span>
          </span>

          <div style={{marginLeft:"auto", display:"flex", gap:6}}>
            <button className="btn"><Icon name="refresh" size={13}/> 刷新</button>
            <button className="btn primary"><Icon name="search" size={13}/> 查询轨迹</button>
          </div>
        </div>

        {/* Toolbar */}
        <div style={{padding:"10px 16px", borderBottom:"1px solid var(--border-1)", display:"flex", gap:12, alignItems:"center", background:"var(--bg-1)"}}>
          <span className="chip accent">浙F07179F ×</span>
          <span className="chip">+ 添加车辆对比</span>
          <span style={{width:1, height:20, background:"var(--border-1)"}}/>
          <span className="muted" style={{fontSize:11}}>显示</span>
          <span className="chip accent">轨迹</span>
          <span className="chip accent">事件</span>
          <span className="chip">热力</span>
          <span className="chip">停留点</span>
          <div style={{marginLeft:"auto", display:"flex", gap:6}}>
            <button className="btn"><Icon name="download" size={13}/> 导出</button>
            <button className="btn"><Icon name="bookmark" size={13}/> 保存</button>
          </div>
        </div>

        <div style={{flex:1, display:"grid", gridTemplateColumns:"1fr 320px", minHeight:0}}>
          <div style={{display:"flex", flexDirection:"column", minWidth:0}}>
            {/* Map */}
            <div style={{flex:1, position:"relative", minHeight:0}}>
              <FleetMap
                vehicles={[]}
                highlightPath={path}
                playbackPoint={{x: px, y: py}}
              />
              {/* Event markers on map */}
              <svg viewBox="0 0 1240 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"
                   style={{position:"absolute", inset:0, pointerEvents:"none"}}>
                {events.map((e,i)=>{
                  const ei = Math.min(points.length - 1, Math.floor((e.at/100) * (points.length - 1)));
                  const ef = (e.at/100) * (points.length - 1) - ei;
                  const en = Math.min(points.length - 1, ei + 1);
                  const x = points[ei][0] + (points[en][0]-points[ei][0])*ef;
                  const y = points[ei][1] + (points[en][1]-points[ei][1])*ef;
                  const c = e.type === "warn" ? "var(--warn)" : e.type === "start" ? "var(--ok)" : e.type === "end" ? "var(--accent)" : "var(--fg-2)";
                  return (
                    <g key={i} transform={`translate(${x} ${y})`}>
                      <circle r="6" fill={c} opacity="0.25"/>
                      <circle r="3" fill={c} stroke="var(--bg-0)" strokeWidth="1"/>
                    </g>
                  );
                })}
              </svg>
              {/* Live readout */}
              <div style={{position:"absolute", top:14, left:14, padding:"10px 14px", background:"var(--bg-popover)", border:"1px solid var(--border-2)", borderRadius:8, fontSize:11, fontFamily:"var(--font-mono)", display:"flex", gap:18, boxShadow:"0 4px 16px rgba(0,0,0,.12)"}}>
                <div><div className="muted" style={{fontSize:10}}>时间</div><div className="strong">14:{String(Math.floor(t*0.42 + 2)).padStart(2,"0")}:{String(Math.floor(t*36)%60).padStart(2,"0")}</div></div>
                <div><div className="muted" style={{fontSize:10}}>速度</div><div className="strong" style={{color:"var(--info)"}}>{Math.floor(40 + Math.sin(t*0.1)*30)} km/h</div></div>
                <div><div className="muted" style={{fontSize:10}}>SOC</div><div className="strong" style={{color:"var(--accent)"}}>{Math.floor(78 - t*0.18)}%</div></div>
                <div><div className="muted" style={{fontSize:10}}>H₂</div><div className="strong">{(4.2 - t*0.012).toFixed(2)} MPa</div></div>
                <div><div className="muted" style={{fontSize:10}}>累计</div><div className="strong">{(t*0.32).toFixed(1)} km</div></div>
              </div>
            </div>

            {/* Player + multi-curve */}
            <div style={{borderTop:"1px solid var(--border-1)", background:"var(--bg-1)"}}>
              {/* Synced data curves */}
              <div style={{padding:"10px 16px 4px", position:"relative"}}>
                <div style={{display:"flex", gap:14, fontSize:10, marginBottom:4}}>
                  <span className="mid gap-1"><span className="dot" style={{background:"var(--info)"}}/> 速度 km/h</span>
                  <span className="mid gap-1"><span className="dot" style={{background:"var(--accent)"}}/> SOC %</span>
                  <span className="mid gap-1"><span className="dot" style={{background:"var(--warn)"}}/> H₂压力 MPa</span>
                </div>
                <div style={{position:"relative", height:80}}>
                  <div style={{position:"absolute", inset:0}}><LineChart data={genSpeed()} w={920} h={80} color="var(--info)" axis/></div>
                  <div style={{position:"absolute", inset:0}}><LineChart data={genSoc()} w={920} h={80} color="var(--accent)" fill={false}/></div>
                  <div style={{position:"absolute", inset:0}}><LineChart data={genH2().map(v=>v*15)} w={920} h={80} color="var(--warn)" fill={false}/></div>
                  {/* playhead */}
                  <div style={{position:"absolute", top:0, bottom:0, left: (t)+"%", width:1, background:"var(--accent)", boxShadow:"0 0 8px var(--accent-glow)"}}/>
                </div>
              </div>

              {/* Timeline + controls */}
              <div style={{padding:"6px 16px 14px"}}>
                <div style={{position:"relative", height:36, background:"var(--bg-2)", borderRadius:4, border:"1px solid var(--border-1)"}}>
                  {/* event markers */}
                  {events.map((e,i)=>(
                    <div key={i} style={{position:"absolute", left: e.at+"%", top:0, bottom:0, width:2,
                      background: e.type==="warn"?"var(--warn)":e.type==="stop"?"var(--fg-2)":"var(--accent)"}}
                      title={e.lbl}/>
                  ))}
                  {/* progress fill */}
                  <div style={{position:"absolute", left:0, top:0, bottom:0, width: t+"%", background:"var(--accent-soft)"}}/>
                  {/* playhead */}
                  <div style={{position:"absolute", left: t+"%", top:-4, bottom:-4, width:2, background:"var(--accent)", boxShadow:"0 0 12px var(--accent-glow)"}}/>
                  <div style={{position:"absolute", left:`calc(${t}% - 5px)`, top:"50%", marginTop:-5, width:10, height:10, borderRadius:5, background:"var(--accent)", border:"2px solid var(--bg-0)"}}/>
                  {/* time labels */}
                  <div style={{position:"absolute", inset:"auto 0 -16px", display:"flex", justifyContent:"space-between", padding:"0 4px", fontSize:9}} className="muted mono">
                    {["14:02","14:08","14:15","14:23","14:30","14:36","14:44"].map(x=><span key={x}>{x}</span>)}
                  </div>
                </div>
                <div className="between" style={{marginTop:24}}>
                  <div className="mid gap-2">
                    <button className="btn icon"><Icon name="prev" size={13}/></button>
                    <button className="btn icon primary" onClick={()=>setPlaying(!playing)}>
                      <Icon name={playing?"pause":"play"} size={13}/>
                    </button>
                    <button className="btn icon"><Icon name="next" size={13}/></button>
                    <span className="muted mono" style={{marginLeft:8, fontSize:11}}>14:{String(Math.floor(t*0.42 + 2)).padStart(2,"0")}:{String(Math.floor(t*36)%60).padStart(2,"0")} / 14:44:00</span>
                  </div>
                  <div className="mid gap-1">
                    <span className="muted" style={{fontSize:11, marginRight:6}}>倍速</span>
                    {[0.5, 1, 2, 4, 8, 16].map(s=>(
                      <span key={s} className={"chip " + (s === speed ? "accent" : "")}
                            style={{cursor:"pointer"}} onClick={()=>setSpeed(s)}>{s}×</span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Side: trips + events + summary */}
          <div style={{borderLeft:"1px solid var(--border-1)", background:"var(--bg-1)", display:"flex", flexDirection:"column", minHeight:0}}>
            {/* Trips of selected day */}
            <div style={{borderBottom:"1px solid var(--border-1)"}}>
              <div className="panel-head">
                <Icon name="route" size={13}/>
                <span className="title">当日行程</span>
                <span className="chip" style={{marginLeft:"auto"}}>{trips.length}</span>
              </div>
              <div style={{maxHeight:180, overflowY:"auto"}}>
                {trips.map((tr,i)=>(
                  <div key={i} style={{
                    display:"flex", gap:10, padding:"8px 14px", cursor:"pointer",
                    borderLeft: tr.active ? "2px solid var(--accent)" : "2px solid transparent",
                    background: tr.active ? "var(--accent-soft)" : "transparent",
                    borderBottom:"1px solid var(--border-1)",
                  }}>
                    <div style={{flex:1, minWidth:0}}>
                      <div className="between">
                        <span className="mono strong" style={{fontSize:11}}>{tr.from} → {tr.to}</span>
                        <span className="mono" style={{fontSize:10, color: tr.active ? "var(--accent)" : "var(--fg-2)"}}>{tr.km} km</span>
                      </div>
                      <div className="between" style={{marginTop:3}}>
                        <span className="muted" style={{fontSize:10, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{tr.route}</span>
                        {tr.evt > 0 && <span className="chip" style={{fontSize:9, padding:"1px 5px", color:"var(--warn)", background:"var(--warn-soft)", borderColor:"transparent"}}>{tr.evt}事件</span>}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Events */}
            <div className="panel-head" style={{borderBottom:"1px solid var(--border-1)"}}>
              <Icon name="timeline" size={13}/>
              <span className="title">事件时间线</span>
              <span className="chip" style={{marginLeft:"auto"}}>{events.length}</span>
            </div>
            <div className="scroll" style={{flex:1, padding:"10px 0"}}>
              {events.map((e,i)=>{
                const c = e.type === "warn" ? "var(--warn)" : e.type === "start" ? "var(--ok)" : e.type === "end" ? "var(--accent)" : "var(--fg-2)";
                return (
                  <div key={i} style={{display:"flex", gap:10, padding:"10px 16px", cursor:"pointer", borderLeft: Math.abs(t - e.at) < 3 ? "2px solid var(--accent)" : "2px solid transparent", background: Math.abs(t - e.at) < 3 ? "var(--accent-soft)" : "transparent"}} onClick={()=>setT(e.at)}>
                    <div style={{position:"relative", width:14, paddingTop:3}}>
                      <span className="dot" style={{background:c, width:8, height:8, borderRadius:4}}/>
                      {i < events.length - 1 && <span style={{position:"absolute", top:14, bottom:-22, left:3, width:2, background:"var(--border-1)"}}/>}
                    </div>
                    <div style={{flex:1}}>
                      <div className="between">
                        <span className="strong" style={{fontSize:12}}>{e.lbl}</span>
                        <span className="mono muted" style={{fontSize:10}}>14:{String(Math.floor(e.at*0.42 + 2)).padStart(2,"0")}</span>
                      </div>
                      <div className="muted" style={{fontSize:11, marginTop:2}}>
                        {e.type==="warn" ? "速度 +18 km/h · 持续 2.4s" :
                         e.type==="stop" ? "停留 1分12秒" :
                         e.type==="start" ? "里程 0 km" : "里程 32.4 km · 平均 49 km/h"}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
            <div style={{padding:14, borderTop:"1px solid var(--border-1)"}}>
              <div className="eyebrow" style={{marginBottom:8}}>本次行程</div>
              <div className="col gap-2" style={{fontSize:11}}>
                <div className="between"><span className="muted">里程</span><span className="mono strong">32.4 km</span></div>
                <div className="between"><span className="muted">时长</span><span className="mono strong">42 分钟</span></div>
                <div className="between"><span className="muted">平均速度</span><span className="mono strong">46 km/h</span></div>
                <div className="between"><span className="muted">最高速度</span><span className="mono strong" style={{color:"var(--warn)"}}>89 km/h</span></div>
                <div className="between"><span className="muted">能耗</span><span className="mono strong">5.8 kWh / 0.32 kg H₂</span></div>
                <div className="between"><span className="muted">评分</span><span className="mono strong" style={{color:"var(--accent)"}}>87 / 100</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
window.ArtboardPlayback = ArtboardPlayback;