// artboard-overview.jsx — Asset-management overview
// Filter by: 资产状态 / 部门 / 归属
// Card shows: 车牌 + VIN + 城市 + 部门 + 客户 + 资产状态
// Detail shows: 资产档案 + 业务关系 + 实时车况 + 保养预警 (no driver)

const AssetStatusChip = ({ status }) => {
  const map = {
    in_stock:  { label: "在库",   bg: "var(--accent-soft)",   fg: "var(--accent)",   dot: "ok" },
    leasing:   { label: "租赁"  , bg: "rgba(46,140,140,0.15)",fg: "var(--info)",     dot: "info" },
    abnormal:  { label: "异常",   bg: "var(--danger-soft)",   fg: "var(--danger)",   dot: "danger" },
  };
  const m = map[status] || map.in_stock;
  return (
    <span className="chip" style={{background:m.bg, color:m.fg, border:"1px solid " + m.fg + "33", fontSize:10, padding:"2px 7px"}}>
      <span className={"dot " + m.dot} style={{width:5, height:5}}/> {m.label}
    </span>
  );
};

const OwnChip = ({ own }) => (
  <span className="chip" style={{
    fontSize:10, padding:"1px 6px",
    background: own === "self" ? "rgba(31,139,76,0.10)" : "rgba(122,140,46,0.12)",
    color:      own === "self" ? "var(--accent)" : "#7A8C2E",
    border:     "1px solid " + (own === "self" ? "rgba(31,139,76,0.25)" : "rgba(122,140,46,0.25)"),
  }}>{own === "self" ? "自有" : "外租"}</span>
);

const DeptDot = ({ dept }) => {
  const d = (window.DEPARTMENTS || []).find(x => x.id === dept);
  if (!d) return null;
  return (
    <span style={{display:"inline-flex", alignItems:"center", gap:4, fontSize:11}}>
      <span style={{width:6, height:6, background:d.color, borderRadius:1, display:"inline-block"}}/>
      <span style={{color:"var(--fg-1)"}}>{d.name}</span>
    </span>
  );
};

const ArtboardOverview = () => {
  const allVehicles = (window.VEHICLES || []);
  const { role } = (typeof window.useCurrentRole === "function") ? window.useCurrentRole() : { role: null };
  // Apply role-based scope before user-facing filters
  const vehicles = React.useMemo(() => {
    if (!role || role.scope === "all" || role.scope === "ops" || role.scope === "finance") return allVehicles;
    if (role.scope === "dept") return allVehicles.filter(v => v.dept === role.deptId);
    return allVehicles;
  }, [role, allVehicles]);
  const counts = (window.COUNTS || {});
  const deps = (window.DEPARTMENTS || []);
  const isDeptScoped = role && role.scope === "dept";
  // Scoped counts so KPIs match what the role can actually see
  const scopedCounts = React.useMemo(() => {
    const c = { all: vehicles.length, inStock:0, leasing:0, abnormal:0, self:0, lease:0 };
    vehicles.forEach(v => {
      if (v.asset === "in_stock") c.inStock++;
      else if (v.asset === "leasing") c.leasing++;
      else if (v.asset === "abnormal") c.abnormal++;
      if (v.own === "self") c.self++; else c.lease++;
    });
    return c;
  }, [vehicles]);

  const [selected, setSelected] = React.useState(vehicles[8]?.id || vehicles[0]?.id);
  React.useEffect(() => {
    if (vehicles.length && !vehicles.find(x => x.id === selected)) {
      setSelected(vehicles[0].id);
    }
  }, [vehicles, selected]);
  const [filterAsset, setFilterAsset] = React.useState("all"); // all | in_stock | leasing | abnormal
  const [filterDept, setFilterDept] = React.useState("all");
  const [filterOwn, setFilterOwn] = React.useState("all");
  const [search, setSearch] = React.useState("");

  const filtered = vehicles.filter(v => {
    if (filterAsset !== "all" && v.asset !== filterAsset) return false;
    if (filterDept !== "all" && v.dept !== filterDept) return false;
    if (filterOwn !== "all" && v.own !== filterOwn) return false;
    if (search && !v.plate.includes(search) && !v.vin.includes(search)) return false;
    return true;
  });

  const v = vehicles.find(x => x.id === selected) || vehicles[0];
  if (!v) return null;

  return (
    <div className="app">
      <Sidebar active="map"/>
      <div style={{flex:1, display:"flex", flexDirection:"column", minWidth:0, position:"relative", zIndex:1}}>
        <Topbar
          crumbs={isDeptScoped ? ["羚牛车辆数据中心", "资产管理", role.name.replace(/.*·/,"")] : ["羚牛车辆数据中心", "资产管理", "总览"]}
          kpis={[
            { lbl: isDeptScoped ? "本部门车辆" : "总车辆", val: scopedCounts.all },
            { lbl:"在库", val: scopedCounts.inStock, delta: scopedCounts.all ? Math.round(scopedCounts.inStock/scopedCounts.all*100) + "%" : "0%" },
            { lbl:"租赁", val: scopedCounts.leasing, delta: scopedCounts.all ? Math.round(scopedCounts.leasing/scopedCounts.all*100) + "%" : "0%", deltaUp:true },
            { lbl:"异常", val: scopedCounts.abnormal, delta: scopedCounts.abnormal > 0 ? "+" + scopedCounts.abnormal : "0", deltaUp:false },
          ]}
        />
        {isDeptScoped && (
          <div style={{
            padding:"7px 16px", background:"var(--accent-soft)",
            borderBottom:"1px solid var(--border-1)", fontSize:11,
            display:"flex", alignItems:"center", gap:10, color:"var(--fg-1)"
          }}>
            <span style={{width:6, height:6, borderRadius:3, background:"var(--accent)"}}/>
            <span><span className="strong">数据权限：</span>当前以 <span className="strong">{role.name}</span> 身份登录，仅可见本部门 {scopedCounts.all} 辆车 · 全公司共 {counts.all} 辆</span>
            <span className="muted" style={{marginLeft:"auto"}}>切换身份请使用右下角 Tweaks · 登录身份</span>
          </div>
        )}
        <div style={{flex:1, display:"grid", gridTemplateColumns:"320px 1fr 360px", gap:0, minHeight:0}}>
          {/* Left: fleet list with asset filters */}
          <div style={{borderRight:"1px solid var(--border-1)", background:"var(--bg-1)", display:"flex", flexDirection:"column", minHeight:0}}>
            <div style={{padding:"12px 14px 8px"}}>
              <div className="between" style={{marginBottom:8}}>
                <span className="eyebrow">车辆 · {filtered.length}/{scopedCounts.all}</span>
                <span className="muted" style={{fontSize:11, cursor:"pointer"}}><Icon name="filter" size={11} style={{verticalAlign:"middle"}}/> 高级</span>
              </div>
              <div className="search" style={{height:28}}>
                <Icon name="search" size={12}/>
                <input placeholder="车牌 / VIN" value={search} onChange={e => setSearch(e.target.value)}/>
              </div>

              {/* Asset status filter */}
              <div style={{marginTop:8}}>
                <div className="muted" style={{fontSize:10, marginBottom:4, letterSpacing:".05em"}}>资产状态</div>
                <div style={{display:"flex", gap:4, flexWrap:"wrap"}}>
                  {[
                    {k:"all",       l:"全部",   c: scopedCounts.all},
                    {k:"in_stock",  l:"在库",   c: scopedCounts.inStock},
                    {k:"leasing",   l:"租赁"  , c: scopedCounts.leasing},
                    {k:"abnormal",  l:"异常",   c: scopedCounts.abnormal},
                  ].map(o => (
                    <span key={o.k}
                          className={"chip" + (filterAsset === o.k ? " accent" : "")}
                          style={{cursor:"pointer", fontSize:11}}
                          onClick={() => setFilterAsset(o.k)}>
                      {o.l} <span className="muted mono" style={{marginLeft:3, fontSize:10}}>{o.c}</span>
                    </span>
                  ))}
                </div>
              </div>

              {/* Ownership */}
              <div style={{marginTop:6}}>
                <div className="muted" style={{fontSize:10, marginBottom:4, letterSpacing:".05em"}}>归属</div>
                <div style={{display:"flex", gap:4, flexWrap:"wrap"}}>
                  {[
                    {k:"all",   l:"全部"},
                    {k:"self",  l:"自有", c: scopedCounts.self},
                    {k:"lease", l:"外租", c: scopedCounts.lease},
                  ].map(o => (
                    <span key={o.k}
                          className={"chip" + (filterOwn === o.k ? " accent" : "")}
                          style={{cursor:"pointer", fontSize:11}}
                          onClick={() => setFilterOwn(o.k)}>
                      {o.l}{o.c != null && <span className="muted mono" style={{marginLeft:3, fontSize:10}}>{o.c}</span>}
                    </span>
                  ))}
                </div>
              </div>

              {/* Department — hidden when role is dept-scoped (only one dept visible) */}
              {!isDeptScoped && (
                <div style={{marginTop:6}}>
                  <div className="muted" style={{fontSize:10, marginBottom:4, letterSpacing:".05em"}}>业务部门</div>
                  <div style={{display:"flex", gap:4, flexWrap:"wrap"}}>
                    <span className={"chip" + (filterDept === "all" ? " accent" : "")}
                          style={{cursor:"pointer", fontSize:11}}
                          onClick={() => setFilterDept("all")}>全部</span>
                    {deps.map(d => (
                      <span key={d.id}
                            className={"chip" + (filterDept === d.id ? " accent" : "")}
                            style={{cursor:"pointer", fontSize:11}}
                            onClick={() => setFilterDept(d.id)}>
                        <span style={{width:6, height:6, background:d.color, borderRadius:1, display:"inline-block", marginRight:4, verticalAlign:"middle"}}/>
                        {d.name}
                        <span className="muted mono" style={{marginLeft:3, fontSize:10}}>{counts.byDept?.[d.id] || 0}</span>
                      </span>
                    ))}
                  </div>
                </div>
              )}
            </div>

            <div className="scroll" style={{flex:1, padding:"4px 0"}}>
              {filtered.map(x => (
                <div key={x.id} onClick={() => setSelected(x.id)}
                     style={{
                       padding:"10px 14px", borderLeft: "2px solid " + (x.id === selected ? "var(--accent)" : "transparent"),
                       background: x.id === selected ? "var(--accent-soft)" : "transparent",
                       cursor:"pointer", borderBottom:"1px solid var(--border-1)"
                     }}>
                  <div className="between">
                    <span className="mono strong" style={{fontSize:13, color:"var(--fg-0)"}}>{x.plate}</span>
                    <AssetStatusChip status={x.asset}/>
                  </div>
                  <div className="muted mono" style={{fontSize:10, marginTop:3, opacity:.8}}>{x.vin}</div>
                  <div style={{display:"flex", gap:8, marginTop:5, alignItems:"center", flexWrap:"wrap"}}>
                    <DeptDot dept={x.dept}/>
                    <OwnChip own={x.own}/>
                    {x.gps === "offline" && <span className="muted" style={{fontSize:10}}>● GPS离线</span>}
                  </div>
                  <div className="muted" style={{fontSize:10, marginTop:4}}>
                    <Icon name="pin" size={9} style={{verticalAlign:"middle", marginRight:3, opacity:.6}}/>
                    {x.city}
                    {x.customer !== "—" && (<><span style={{margin:"0 4px"}}>·</span>{x.customer}</>)}
                  </div>
                </div>
              ))}
              {filtered.length === 0 && (
                <div className="muted" style={{padding:"40px 16px", textAlign:"center", fontSize:12}}>没有匹配的车辆</div>
              )}
            </div>
          </div>

          {/* Map center */}
          <div style={{position:"relative", minWidth:0, minHeight:0}}>
            <FleetMap selectedId={selected} onSelect={(x)=>setSelected(x.id)} />
            <div style={{position:"absolute", top:12, right:12, display:"flex", flexDirection:"column", gap:6}}>
              {["layers","plus","close","sat","pin"].map((n,i)=>(
                <div key={i} className="icon-btn" style={{width:32, height:32, background:"var(--bg-1)", border:"1px solid var(--border-1)"}}>
                  <Icon name={n === "close" ? "expand" : n} size={14}/>
                </div>
              ))}
            </div>
            {/* Legend by asset */}
            <div style={{position:"absolute", bottom:12, left:12, padding:"8px 10px", background:"var(--bg-1)", border:"1px solid var(--border-1)", borderRadius:6, display:"flex", gap:14, fontSize:10}}>
              <span className="mid gap-1"><span className="dot ok"/> 在库/正常</span>
              <span className="mid gap-1"><span className="dot info"/> 租赁</span>
              <span className="mid gap-1"><span className="dot warn"/> 待整备</span>
              <span className="mid gap-1"><span className="dot danger"/> 异常</span>
              <span className="mid gap-1"><span className="dot idle"/> GPS离线</span>
            </div>
            <div style={{position:"absolute", top:12, left:12, padding:"6px 10px", background:"var(--bg-1)", border:"1px solid var(--border-1)", borderRadius:6, fontSize:11, fontFamily:"var(--font-mono)", display:"flex", alignItems:"center", gap:10, color:"var(--fg-1)", boxShadow:"var(--shadow-1)"}}>
              <span style={{display:"inline-flex", alignItems:"center", gap:4}}><span className="dot ok pulse"/> LIVE</span>
              <span className="muted">|</span>
              <span>嘉兴市·平湖</span>
              <span className="muted">|</span>
              <span>14:32:08</span>
            </div>
          </div>

          {/* Right: vehicle asset detail panel */}
          <div style={{borderLeft:"1px solid var(--border-1)", background:"var(--bg-1)", display:"flex", flexDirection:"column", minHeight:0}}>
            <div style={{padding:"14px 16px 12px", borderBottom:"1px solid var(--border-1)"}}>
              <div className="between">
                <div style={{minWidth:0, flex:1}}>
                  <div className="eyebrow">{v.deptName} · {v.deptLead}</div>
                  <div className="mono strong" style={{fontSize:18, fontWeight:600, marginTop:4}}>{v.plate}</div>
                  <div className="muted mono" style={{fontSize:10, marginTop:2}}>{v.vin}</div>
                </div>
                <div className="col gap-1" style={{alignItems:"flex-end"}}>
                  <AssetStatusChip status={v.asset}/>
                  <OwnChip own={v.own}/>
                </div>
              </div>
              <div className="mid gap-2" style={{marginTop:8, fontSize:10}}>
                <span className="muted">车辆等级</span>
                <span className="strong">{v.grade}级</span>
                <span className="muted">·</span>
                <span className="muted">状态时长</span>
                <span className="mono strong">{v.statusDays}天</span>
                {v.fleetCode && <>
                  <span className="muted">·</span>
                  <span className="muted">编号</span>
                  <span className="mono strong">{v.fleetCode}</span>
                </>}
              </div>
            </div>

            <div className="scroll" style={{flex:1}}>
              {/* 业务关系 */}
              <div style={{padding:"14px 16px", borderBottom:"1px solid var(--border-1)"}}>
                <div className="eyebrow" style={{marginBottom:10}}>业务关系</div>
                <div className="col gap-2" style={{fontSize:11}}>
                  <div className="between"><span className="muted">业务部门</span>
                    <span className="mid gap-1"><span style={{width:6,height:6,background:v.deptColor,borderRadius:1,display:"inline-block"}}/><span className="strong">{v.deptName}</span></span>
                  </div>
                  <div className="between"><span className="muted">业务负责人</span><span className="strong">{v.deptLead}</span></div>
                  <div className="between"><span className="muted">客户</span><span className="strong" style={{textAlign:"right"}}>{v.customer}</span></div>
                  <div className="between"><span className="muted">所属公司</span><span style={{fontSize:10, textAlign:"right"}}>{v.ownCompany}</span></div>
                  {v.own === "lease" && <div className="between"><span className="muted">租赁公司</span><span style={{fontSize:10, textAlign:"right"}}>{v.company}</span></div>}
                  {v.contractNo && <div className="between"><span className="muted">合同编号</span><span className="mono" style={{fontSize:10}}>{v.contractNo}</span></div>}
                </div>
              </div>

              {/* 实时车况 — 财务身份不可见 */}
              {role && role.scope === "finance" ? (
                <div style={{padding:"14px 16px", borderBottom:"1px solid var(--border-1)"}}>
                  <div className="eyebrow" style={{marginBottom:10}}>实时车况</div>
                  <div style={{padding:"14px 12px", background:"var(--bg-2)", border:"1px dashed var(--border-1)", borderRadius:4, textAlign:"center"}}>
                    <div style={{fontSize:18, opacity:0.4, marginBottom:6}}>🔒</div>
                    <div style={{fontSize:11, color:"var(--fg-2)"}}>实时车况数据已隐藏</div>
                    <div style={{fontSize:10, color:"var(--fg-3)", marginTop:3}}>财务身份仅可见资产 · 业务关系 · 合同</div>
                  </div>
                </div>
              ) : (
              <div style={{padding:"14px 16px", borderBottom:"1px solid var(--border-1)"}}>
                <div className="between" style={{marginBottom:10}}>
                  <span className="eyebrow">实时车况</span>
                  <span className="chip" style={{fontSize:9, padding:"1px 6px"}}>
                    <span className={"dot " + (v.gps === "online" ? "ok" : "idle")} style={{width:5,height:5}}/> GPS{v.gps === "online" ? "在线" : "离线"}
                  </span>
                </div>
                <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}>
                  <Gauge value={v.speed/120} label={v.speed} sub="km/h" color="var(--info)"/>
                  <Gauge value={v.soc/100} label={v.soc + "%"} sub="电量" color={v.soc < 20 ? "var(--danger)" : "var(--accent)"}/>
                </div>
                <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginTop:10, fontSize:11}}>
                  <div className="col gap-1">
                    <span className="muted">氢气压力</span>
                    <span className="mono strong">{v.h2} MPa</span>
                  </div>
                  <div className="col gap-1">
                    <span className="muted">续航</span>
                    <span className="mono strong">{v.range} km</span>
                  </div>
                  <div className="col gap-1">
                    <span className="muted">电机温度</span>
                    <span className="mono strong" style={{color: v.motorTemp > 90 ? "var(--danger)" : "var(--fg-0)"}}>{v.motorTemp}°C</span>
                  </div>
                  <div className="col gap-1">
                    <span className="muted">停车场</span>
                    <span className="strong" style={{fontSize:10}}>{v.parking}</span>
                  </div>
                </div>
              </div>
              )}

              {/* 里程 & 保养 */}
              <div style={{padding:"14px 16px", borderBottom:"1px solid var(--border-1)"}}>
                <div className="eyebrow" style={{marginBottom:10}}>里程与保养</div>
                <div className="col gap-2" style={{fontSize:11}}>
                  <div className="between"><span className="muted">累计里程</span><span className="mono strong">{v.totalKm.toLocaleString()} km</span></div>
                  <div className="between"><span className="muted">上次保养</span><span className="mono">{v.lastMaintDays}天前 · {v.lastMaintKm.toLocaleString()}km</span></div>
                  <div>
                    <div className="between" style={{marginBottom:4}}>
                      <span className="muted">下次保养</span>
                      <span className={"mono strong"} style={{color: v.kmToMaint < 1000 ? "var(--warn)" : "var(--fg-0)"}}>
                        剩余 {v.kmToMaint.toLocaleString()} km
                      </span>
                    </div>
                    <div className="bar" style={{height:4}}>
                      <i style={{
                        width: Math.min(100, ((10000 - v.kmToMaint) / 10000) * 100) + "%",
                        background: v.kmToMaint < 1000 ? "var(--warn)" : "var(--accent)",
                      }}/>
                    </div>
                  </div>
                  {v.handoverKm != null && (
                    <div className="between"><span className="muted">交车里程</span><span className="mono">{v.handoverKm.toLocaleString()} km</span></div>
                  )}
                  {v.returnKm != null && (
                    <div className="between"><span className="muted">还车里程</span><span className="mono">{v.returnKm.toLocaleString()} km</span></div>
                  )}
                </div>
              </div>

              {v.asset === "abnormal" && (
                <div style={{padding:"14px 16px"}}>
                  <div className="eyebrow" style={{marginBottom:8}}>异常处理</div>
                  <div style={{padding:"8px 10px", background:"var(--danger-soft)", border:"1px solid oklch(0.68 0.220 25 / 0.4)", borderRadius:4, fontSize:11}}>
                    <div className="between">
                      <span className="strong">资产状态异常</span>
                      <span className="mono muted">{v.statusDays}天</span>
                    </div>
                    <div className="muted" style={{marginTop:3}}>停车场标记为异常 · 待业务部门核查</div>
                  </div>
                </div>
              )}

              <div style={{padding:"12px 16px", display:"flex", gap:6}}>
                <button className="btn primary" style={{flex:1}} onClick={() => location.hash = "#/detail"}><Icon name="route" size={13}/> 详情</button>
                <button className="btn" style={{flex:1}} onClick={() => location.hash = "#/playback"}><Icon name="history" size={13}/> 轨迹</button>
                <button className="btn icon"><Icon name="bell" size={13}/></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.ArtboardOverview = ArtboardOverview;