// Fleet Overview page
const FleetOverview = () => {
  const [statusFilter, setStatusFilter] = React.useState("all");
  const [siteFilter, setSiteFilter] = React.useState("all");
  const [view, setView] = React.useState("grid");
  const [query, setQuery] = React.useState("");
  const kpi = window.FLEET_KPI;

  const allGensets = FLEET_DATA.sites.flatMap(s => s.gensets.map(g => ({...g, _site: s.id, _siteName: s.name})));

  const statusCounts = {
    all: allGensets.length,
    running: allGensets.filter(g => g.status === "running").length,
    warn: allGensets.filter(g => g.status === "warn").length,
    alarm: allGensets.filter(g => g.status === "alarm").length,
    offline: allGensets.filter(g => g.status === "offline").length,
  };

  const match = (g) => {
    if (statusFilter !== "all" && g.status !== statusFilter) return false;
    if (siteFilter !== "all" && g._site !== siteFilter) return false;
    if (query && !g.id.toLowerCase().includes(query.toLowerCase()) && !g.model.toLowerCase().includes(query.toLowerCase())) return false;
    return true;
  };

  const sites = FLEET_DATA.sites.map(s => ({
    ...s,
    visibleGensets: s.gensets.filter(g => match({...g, _site: s.id}))
  })).filter(s => s.visibleGensets.length > 0);

  // Sparkline data
  const fleetPowerSpark = [62,64,63,68,71,70,69,72,74,72,71,73,75,74,72,70,71,73,74,72];
  const alarmSpark = [2,3,2,4,3,5,4,6,5,7,8,6,7,9,8,7,6,7,8,8];
  const availSpark = [98.1,98.3,97.9,97.6,97.8,98.0,97.5,97.2,97.4,97.6,97.3,97.1,97.4,97.5,97.4,97.3,97.4,97.5,97.4,97.4];

  return (
    <>
      <div className="pagehead">
        <div>
          <h1>Fleet Overview <span className="subtle" style={{fontSize:11, color:"var(--text-3)", marginLeft:6}}>· {FLEET_DATA.sites.length} sites · {kpi.total} assets</span></h1>
          <div className="subtle" style={{marginTop:4}}>Real-time operational status across Cabinda Pilot deployment</div>
        </div>
        <div className="right">
          <div className="seg">
            <button className={view==="grid"?"on":""} onClick={()=>setView("grid")}><Icon.Grid/> <span style={{marginLeft:4}}>Grid</span></button>
            <button className={view==="list"?"on":""} onClick={()=>setView("list")}><Icon.Rows/> <span style={{marginLeft:4}}>List</span></button>
          </div>
          <button className="toolbtn"><Icon.Refresh size={12}/> Refresh</button>
          <button className="toolbtn"><Icon.Download/> Export</button>
        </div>
      </div>

      {/* KPI bar */}
      <div className="kpibar">
        <Kpi
          label="Running / Total"
          value={`${kpi.running}`}
          sub={`/ ${kpi.total}`}
          delta={`${kpi.warn} warn · ${kpi.offline} off`}
          tone="ok"
        />
        <Kpi
          label="Fleet Output"
          value={<span data-metric="fleet-mw" data-base={(kpi.totalKw/1000).toFixed(2)} data-band="0.08" data-precision="2" data-period="40">{(kpi.totalKw/1000).toFixed(2)}</span>}
          unit="MW"
          sub={`of ${(kpi.capacityKw/1000).toFixed(1)} MW capacity`}
          delta="+2.4% vs 1h ago"
          deltaDir="up"
          tone="ok"
          spark={fleetPowerSpark}
          sparkColor="var(--ok)"
        />
        <Kpi
          label="Active Alarms"
          value={`${kpi.activeAlarms}`}
          sub={`${kpi.alarm} critical`}
          delta="2 new in last hour"
          deltaDir="up"
          tone="alarm"
          spark={alarmSpark}
          sparkColor="var(--alarm)"
        />
        <Kpi
          label="Availability 30d"
          value={<span data-metric="availability" data-base={kpi.availability.toFixed(1)} data-band="0.05" data-precision="1" data-period="60">{kpi.availability.toFixed(1)}</span>}
          unit="%"
          delta="SLA target 97.0%"
          deltaDir="up"
          tone="ok"
          spark={availSpark}
          sparkColor="var(--accent)"
        />
        <Kpi
          label="Avg Fuel Level"
          value={<span data-metric="avg-fuel" data-base={kpi.avgFuel} data-band="0.5" data-precision="0" data-period="240" data-drift-dir="down">{kpi.avgFuel}</span>}
          unit="%"
          sub={`2 tanks <45%`}
          delta="Refill due: YEM-GEN-003"
          tone="warn"
        />
      </div>

      {/* Sites map */}
      <SitesMap
        sites={FLEET_DATA.sites}
        activeSiteId={siteFilter !== "all" ? siteFilter : null}
        onSiteClick={(id) => {
          setSiteFilter(prev => prev === id ? "all" : id);
          // Scroll the site group into view so the click has a visible effect.
          setTimeout(() => {
            const el = document.querySelector(`[data-site-group="${id}"]`);
            if (el) el.scrollIntoView({behavior:"smooth", block:"start"});
          }, 60);
        }}
      />

      {/* Filter bar */}
      <div className="filterbar">
        <div className="search">
          <Icon.Search size={13}/>
          <input placeholder="Search by tag, model, controller…" value={query} onChange={e=>setQuery(e.target.value)}/>
          <span className="kbd">⌘K</span>
        </div>
        <div className="filterchips">
          {[
            ["all","All","all"],
            ["running","Running","ok"],
            ["warn","Warning","warn"],
            ["alarm","Alarm","alarm"],
            ["offline","Offline","off"],
          ].map(([k, label, dot]) => (
            <button key={k} className={`chip-btn ${statusFilter===k?"on":""}`} onClick={()=>setStatusFilter(k)}>
              <span className={`sdot ${dot}`}/>
              {label}
              <span className="n">{statusCounts[k]}</span>
            </button>
          ))}
        </div>
        <div style={{width:1, height:20, background:"var(--line)"}}/>
        <div className="filterchips">
          <button className={`chip-btn ${siteFilter==="all"?"on":""}`} onClick={()=>setSiteFilter("all")}>All sites</button>
          {FLEET_DATA.sites.map(s => (
            <button key={s.id} className={`chip-btn ${siteFilter===s.id?"on":""}`} onClick={()=>setSiteFilter(s.id)}>
              {s.name}<span className="n">{s.gensets.length}</span>
            </button>
          ))}
        </div>
        <div style={{flex:1}}/>
        <button className="toolbtn"><Icon.Filter/> More filters</button>
      </div>

      {/* Site groups */}
      <div style={{flex:1}}>
        {sites.map(site => {
          const total = site.visibleGensets.length;
          const running = site.visibleGensets.filter(g => g.status === "running").length;
          const alarm = site.visibleGensets.filter(g => g.status === "alarm").length;
          const warn = site.visibleGensets.filter(g => g.status === "warn").length;
          const capacity = site.visibleGensets.reduce((s,g)=>s+g.kw,0);
          const output = site.visibleGensets
            .filter(g => g.status === "running" || g.status === "warn")
            .reduce((s,g)=>s + (g.kw*g.load/100), 0);
          return (
            <div className="site-group" key={site.id} data-site-group={site.id}>
              <div className="site-head">
                <Icon.Site size={14}/>
                <span className="name">{site.name}</span>
                <span className="meta">{site.location} · {site.coords}</span>
                <div className="bar"/>
                <div className="rollup">
                  <span><span className="k">UNITS</span><span className="v">{running}/{total}</span></span>
                  <span><span className="k">OUT</span><span className="v">{(output/1000).toFixed(2)} MW</span></span>
                  <span><span className="k">CAP</span><span className="v">{(capacity/1000).toFixed(1)} MW</span></span>
                  {alarm > 0 && <span style={{color:"var(--alarm)"}}><span className="k" style={{color:"var(--alarm)",opacity:0.7}}>ALRM</span><span className="v" style={{color:"var(--alarm)"}}>{alarm}</span></span>}
                  {warn > 0 && <span style={{color:"var(--warn)"}}><span className="k" style={{color:"var(--warn)",opacity:0.7}}>WARN</span><span className="v" style={{color:"var(--warn)"}}>{warn}</span></span>}
                </div>
                <span className="caret"><Icon.Caret/></span>
              </div>
              <div className="cardgrid">
                {site.visibleGensets.map(g => <GensetCard key={g.id} g={g}/>)}
              </div>
            </div>
          );
        })}
        {sites.length === 0 && (
          <div style={{padding:"60px 22px", textAlign:"center", color:"var(--text-2)", fontFamily:"var(--mono)"}}>
            No gensets match the current filters.
          </div>
        )}
      </div>
    </>
  );
};

const App = () => (
  <div className="app">
    <Sidebar active="fleet" alarmCount={window.FLEET_KPI.activeAlarms}/>
    <div className="main">
      <Topbar crumbs={["Cabinda Pilot", "Fleet Overview"]} alarmCount={window.FLEET_KPI.activeAlarms}/>
      <div className="content" data-screen-label="Fleet Overview">
        <FleetOverview/>
        <Footer/>
      </div>
    </div>
  </div>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App/>);