/* R3T Monitor — fleet (overview) components */
const { useState: useFS } = React;

/* ---------- small inline glyphs ---------- */
const gs = { fill:"none", stroke:"currentColor", strokeWidth:1.7, strokeLinecap:"round", strokeLinejoin:"round" };
function WarnTri(p){ return (<svg viewBox="0 0 24 24" {...p}>
  <path {...gs} d="M12 4.5 21 19.5H3L12 4.5Z"/><path {...gs} d="M12 10v4M12 17h.01"/></svg>); }
function WifiOff(p){ return (<svg viewBox="0 0 24 24" {...p}>
  <path {...gs} d="M3 4l18 18"/><path {...gs} d="M9 13.5a5 5 0 0 1 6 0"/><path {...gs} d="M5.5 10a10 10 0 0 1 3-1.9M19 10a10 10 0 0 0-7.5-2.8"/><path {...gs} d="M12 17.5h.01"/></svg>); }
function CheckCirc(p){ return (<svg viewBox="0 0 24 24" {...p}>
  <circle {...gs} cx="12" cy="12" r="8.5"/><path {...gs} d="m8.5 12 2.4 2.4 4.6-4.8"/></svg>); }
function DevicesIcon(p){ return (<svg viewBox="0 0 24 24" {...p}>
  <rect {...gs} x="3" y="5" width="13" height="10" rx="1.6"/><path {...gs} d="M6 19h7"/><path {...gs} d="M9.5 15v4"/>
  <rect {...gs} x="18" y="9" width="4" height="10" rx="1.4"/></svg>); }

const ALERTS = {
  offline: { cls:"off",    txt:"Offline",      Ico:WifiOff },
  battery: { cls:"warn",   txt:"Low battery",  Ico:BatteryIcon },
  signal:  { cls:"orange", txt:"Weak signal",  Ico:SignalIcon },
};

/* ---------- top app bar ---------- */
const SunGlyph = ()=> (
  <svg viewBox="0 0 24 24" style={{width:17,height:17}} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5.6 5.6 4.2 4.2M19.8 19.8l-1.4-1.4M18.4 5.6l1.4-1.4M4.2 19.8l1.4-1.4"/></svg>);
const MoonGlyph = ()=> (
  <svg viewBox="0 0 24 24" style={{width:17,height:17}} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/></svg>);

function AppBar({ now, theme, onToggleTheme }){
  return (
    <div className="appbar">
      <div className="brand">
        <div className="logo"><span>R3T</span></div>
        <div>
          <div className="brand-name">R3T Monitor</div>
          <div className="brand-sub-2">Fleet monitoring · indonesianirvan</div>
        </div>
      </div>
      <div className="appbar-right">
        {onToggleTheme && (
          <button onClick={onToggleTheme} aria-label="Ganti tema terang/gelap" title="Ganti tema terang/gelap"
            style={{ display:"inline-flex", alignItems:"center", justifyContent:"center", width:36, height:36,
              borderRadius:10, border:"1px solid var(--border)", background:"var(--surface)",
              color:"var(--text-2)", cursor:"pointer", boxShadow:"var(--shadow)" }}>
            {theme === "dark" ? <SunGlyph/> : <MoonGlyph/>}
          </button>
        )}
        <span className="ab-clock">{now ? fmtLong(now) : "—"}</span>
      </div>
    </div>
  );
}

/* ---------- summary strip ---------- */
function Stat({ cls, icon, value, sub, label }){
  return (
    <div className={"card stat " + (cls||"")}>
      <span className="s-ico">{icon}</span>
      <div className="s-num">{value}{sub && <small> {sub}</small>}</div>
      <div className="s-lab">{label}</div>
    </div>
  );
}
function SummaryStrip({ summary }){
  return (
    <div className="summary">
      <Stat icon={<CheckCirc/>} value={summary.online} sub={"/ " + summary.total} label="Devices online" />
      <Stat cls={"attention" + (summary.alerts===0 ? " zero" : "")} icon={summary.alerts ? <WarnTri/> : <CheckCirc/>}
        value={summary.alerts} label={summary.alerts ? "Need attention" : "All healthy"} />
      <Stat icon={<GaugeIcon/>} value={summary.usageToday.toFixed(1)} sub="m³" label="Fleet usage today" />
      <Stat icon={<CalendarIcon/>} value={summary.usageMonth} sub="m³" label="Fleet usage · 30 days" />
    </div>
  );
}

/* ---------- sparkline ---------- */
function Sparkline({ values, online }){
  const w=120, h=30, pad=2.5;
  if(!values || values.length===0) values=[0];
  if(values.length===1) values=[values[0], values[0]];
  const min=Math.min(...values), max=Math.max(...values), rng=(max-min)||1;
  const pts = values.map((v,i)=>{
    const x = pad + (i/(values.length-1))*(w-2*pad);
    const y = h - pad - ((v-min)/rng)*(h-2*pad);
    return [x,y];
  });
  const line = pts.map((p,i)=> (i?"L":"M")+p[0].toFixed(1)+" "+p[1].toFixed(1)).join(" ");
  const area = line + ` L${(w-pad).toFixed(1)} ${(h-pad).toFixed(1)} L${pad.toFixed(1)} ${(h-pad).toFixed(1)} Z`;
  const col = online ? "var(--accent)" : "var(--text-3)";
  return (
    <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <path d={area} fill={col} opacity="0.12"/>
      <path d={line} fill="none" stroke={col} strokeWidth="1.7" vectorEffect="non-scaling-stroke"/>
      <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="2.4" fill={col}/>
    </svg>
  );
}

/* ---------- device card ---------- */
function DeviceCard({ device, now, onOpen }){
  const online = device.status === "online";
  const live = device.today[0];
  const a = device.alert ? ALERTS[device.alert] : null;
  const spark = device.today.map(r=>r.total).slice().reverse();
  return (
    <button className={"dev-card" + (device.alert ? " alerted" : "") + (online ? "" : " offline")}
      onClick={()=>onOpen(device)}>
      <div className="dc-top">
        <div className="dc-id">
          <span className={"status-dot " + (online?"on":"off")}></span>
          <span className="dc-name">{device.name}</span>
        </div>
        {a && <span className={"alert-badge " + a.cls}><a.Ico/>{a.txt}</span>}
      </div>

      <div className="dc-usage">
        <span className="dc-num">{live.total.toFixed(2)}</span>
        <span className="dc-unit">m³</span>
        <span className="dc-lab">today</span>
      </div>

      <Sparkline values={spark} online={online} />

      <div className="dc-meta">
        <span className="dc-sig">{live.signal}<SigBars n={bars(live.signal)}/></span>
        <span className="dc-seen"><ClockIcon style={{width:13,height:13}}/> {relTime(device.lastSeen, now)}</span>
      </div>
    </button>
  );
}

/* ---------- fleet view ---------- */
function FleetView({ fleet, summary, now, onOpen }){
  const [q, setQ] = useFS("");
  const [filter, setFilter] = useFS("all"); // all | attention | offline

  const filtered = fleet.filter(d=>{
    if(filter==="attention" && !d.alert) return false;
    if(filter==="offline" && d.status!=="offline") return false;
    if(q && !(d.name.includes(q.toLowerCase()) || d.serial.includes(q))) return false;
    return true;
  });

  return (
    <div>
      <div className="fleet-head">
        <div>
          <h2>Devices</h2>
          <p className="muted">{fleet.length} devices · account indonesianirvan</p>
        </div>
        <div className="fleet-controls">
          <div className="search">
            <SignalIcon style={{width:15,height:15,color:"var(--text-3)"}}/>
            <input placeholder="Search device…" value={q} onChange={e=>setQ(e.target.value)} />
          </div>
          <div className="seg">
            <button className={filter==="all"?"on":""} onClick={()=>setFilter("all")}>All</button>
            <button className={filter==="attention"?"on":""} onClick={()=>setFilter("attention")}>Attention</button>
            <button className={filter==="offline"?"on":""} onClick={()=>setFilter("offline")}>Offline</button>
          </div>
        </div>
      </div>

      <SummaryStrip summary={summary} />

      {filtered.length === 0
        ? <div className="empty">No devices match your filter.</div>
        : <div className="dev-grid">
            {filtered.map(d=> <DeviceCard key={d.id} device={d} now={now} onOpen={onOpen} />)}
          </div>}
    </div>
  );
}

Object.assign(window, { AppBar, FleetView, SummaryStrip, DeviceCard, Sparkline });