/* =========================================================
   NETRA AI — Rules + Site Map + Analytics
   ========================================================= */

/* ============ RULES ============ */
const ScreenRules = () => {
  const { RULES } = window.NETRA;
  const [sel, setSel] = React.useState(RULES[0].id);
  const [rules, setRules] = React.useState(RULES);
  const r = rules.find(x => x.id === sel);

  const toggle = (id) => setRules(rs => rs.map(x => x.id === id ? {...x, enabled: !x.enabled} : x));

  return (
    <div className="fade-in">
      <div style={{display: "flex", alignItems: "center", gap: 12, marginBottom: 16}}>
        <h2 style={{margin: 0, font: "500 18px var(--font-display)", color: "var(--ink-0)", letterSpacing: "-0.01em"}}>AI Rules & Correlation</h2>
        <span className="pill iris"><span className="d" />{rules.filter(x=>x.enabled).length} active</span>
        <div style={{flex: 1}} />
        <button className="btn"><Icon name="download" size={12} />Export</button>
        <button className="btn primary"><Icon name="plus" size={12} />New Rule</button>
      </div>

      <div style={{display: "grid", gridTemplateColumns: "300px 1fr 360px", gap: 16, height: "calc(100vh - 130px)"}}>
        {/* rule list */}
        <div className="panel" style={{display: "flex", flexDirection: "column", overflow: "hidden"}}>
          <div className="panel-h"><h3>Rules</h3><span className="sub">{rules.length}</span></div>
          <div style={{overflow: "auto", flex: 1}}>
            {rules.map(rl => (
              <div key={rl.id} onClick={()=>setSel(rl.id)}
                   style={{padding: "12px 16px", borderBottom: "1px solid var(--line)", cursor: "pointer",
                     background: sel===rl.id ? "rgba(77,214,255,0.05)" : "transparent",
                     borderLeft: sel===rl.id ? "2px solid var(--iris)" : "2px solid transparent"}}>
                <div style={{display: "flex", alignItems: "center", gap: 8, marginBottom: 6}}>
                  <span className="mono" style={{fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.1em"}}>{rl.id}</span>
                  <SevPill sev={rl.sev} />
                  <span style={{flex: 1}} />
                  <Toggle on={rl.enabled} onChange={(e)=>{e.stopPropagation(); toggle(rl.id);}} />
                </div>
                <div style={{color: "var(--ink-0)", fontSize: 13, marginBottom: 4, opacity: rl.enabled ? 1 : 0.5}}>{rl.name}</div>
                <div style={{color: "var(--ink-3)", fontSize: 11, fontFamily: "var(--font-mono)"}}>
                  {rl.hits} hits · 24h
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* correlation map */}
        <div className="panel" style={{display: "flex", flexDirection: "column", overflow: "hidden"}}>
          <div className="panel-h">
            <h3>Correlation Graph</h3>
            <span className="sub">live signals → core → action</span>
            <div className="actions">
              <span className="pill good"><span className="d" />analysing</span>
            </div>
          </div>
          <div style={{flex: 1, display: "grid", placeItems: "center", padding: 20, overflow: "hidden"}}>
            <RadialCorrelation size={460} />
          </div>
        </div>

        {/* rule editor */}
        <div className="panel" style={{display: "flex", flexDirection: "column", overflow: "auto"}}>
          <div className="panel-h">
            <h3>{r.name}</h3>
            <span className="sub">{r.id}</span>
            <div className="actions">
              <Toggle on={r.enabled} onChange={()=>toggle(r.id)} />
            </div>
          </div>
          <div className="panel-b">
            <div className="grid k2" style={{marginBottom: 16}}>
              <Field lbl="Severity" v={<SevPill sev={r.sev} />} />
              <Field lbl="Hits 24h" v={r.hits} />
              <Field lbl="Window" v={r.when} />
              <Field lbl="Scope" v={r.scope} />
            </div>

            <h4 style={{font:"500 11px var(--font-mono)", color:"var(--ink-3)", letterSpacing:"0.16em", textTransform:"uppercase", margin:"12px 0 10px"}}>IF — all of</h4>
            {r.if.map((c, i) => (
              <Cond key={i} text={c} idx={i+1} />
            ))}
            <button className="btn sm ghost" style={{marginTop: 8}}><Icon name="plus" size={12} />Add condition</button>

            <h4 style={{font:"500 11px var(--font-mono)", color:"var(--ink-3)", letterSpacing:"0.16em", textTransform:"uppercase", margin:"20px 0 10px"}}>THEN</h4>
            {r.then.map((c, i) => (
              <Cond key={i} text={c} idx={i+1} action />
            ))}
            <button className="btn sm ghost" style={{marginTop: 8}}><Icon name="plus" size={12} />Add action</button>
          </div>
        </div>
      </div>
    </div>
  );
};

const Cond = ({text, idx, action}) => (
  <div style={{display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", background: "var(--bg-2)",
    borderRadius: "var(--r-md)", border: "1px solid var(--line)", marginBottom: 6}}>
    <span className="mono" style={{
      width: 22, height: 22, display: "grid", placeItems: "center",
      background: action ? "rgba(240,167,58,0.12)" : "rgba(77,214,255,0.12)",
      color: action ? "var(--saffron)" : "var(--iris)",
      borderRadius: 4, fontSize: 11
    }}>{idx}</span>
    <span style={{flex: 1, color: "var(--ink-1)", fontSize: 13}}>{text}</span>
    <button className="btn sm ghost"><Icon name="settings" size={12} /></button>
  </div>
);

const Toggle = ({on, onChange}) => (
  <button onClick={onChange} style={{
    width: 36, height: 20, padding: 2, border: "none", borderRadius: 999,
    background: on ? "var(--iris)" : "var(--bg-3)", cursor: "pointer", position: "relative", transition: "background 0.2s"
  }}>
    <span style={{
      display: "block", width: 16, height: 16, borderRadius: 999,
      background: on ? "var(--bg-0)" : "var(--ink-3)", transition: "transform 0.2s",
      transform: on ? "translateX(16px)" : "translateX(0)"
    }} />
  </button>
);

/* ============ SITE MAP ============ */
const ScreenSiteMap = ({ go }) => {
  const { FLOOR, SITES, CAMERAS, ZONE_RISK } = window.NETRA;
  const [hoveredPoint, setHoveredPoint] = React.useState(null);

  return (
    <div className="fade-in">
      <div style={{display: "flex", alignItems: "center", gap: 12, marginBottom: 16}}>
        <h2 style={{margin: 0, font: "500 18px var(--font-display)", color: "var(--ink-0)", letterSpacing: "-0.01em"}}>Site Map</h2>
        <select style={{background:"var(--bg-2)", color:"var(--ink-0)", border:"1px solid var(--line)", borderRadius:"var(--r-md)", padding:"6px 10px", font:"12px var(--font-display)"}}>
          {SITES.map(s => <option key={s}>{s}</option>)}
        </select>
        <span className="pill iris"><span className="d" />Floor 1 · Ground</span>
        <div style={{flex: 1}} />
        <button className="btn sm"><Icon name="filter" size={12} />Layers</button>
        <button className="btn sm primary"><Icon name="bolt" size={12} />Show heatmap</button>
      </div>

      <div style={{display: "grid", gridTemplateColumns: "1fr 320px", gap: 16}}>
        <div className="panel">
          <div className="panel-h">
            <h3>HQ · Bengaluru — Ground Floor</h3>
            <span className="sub">{FLOOR.points.length} devices</span>
            <div className="actions">
              <span className="pill warn"><span className="d" />3 anomalies</span>
            </div>
          </div>
          <div className="panel-b" style={{background: "linear-gradient(180deg, var(--bg-1), var(--bg-2))", borderRadius: "0 0 14px 14px"}}>
            <IsoFloorplan floor={FLOOR} height={520} onPoint={setHoveredPoint} />
          </div>
        </div>

        <div className="col">
          <div className="panel">
            <div className="panel-h"><h3>Zone Risk</h3><span className="sub">live</span></div>
            <div className="panel-b" style={{paddingTop: 8}}>
              {ZONE_RISK.map(z => (
                <div key={z.zone} style={{padding: "10px 0", borderBottom: "1px solid var(--line)"}}>
                  <div style={{display: "flex", alignItems: "center", gap: 8, marginBottom: 6}}>
                    <span style={{color: "var(--ink-0)", fontSize: 13}}>{z.zone}</span>
                    <span style={{flex: 1}} />
                    <span className="mono" style={{fontSize: 11, color: "var(--ink-3)"}}>{z.alerts} alerts</span>
                  </div>
                  <div style={{display: "flex", alignItems: "center", gap: 8}}>
                    <div className={`meter ${z.risk>70?"crit":z.risk>40?"warn":"good"}`} style={{flex:1}}><i style={{width: `${z.risk}%`}} /></div>
                    <span className="mono" style={{fontSize: 11, color: z.risk>70?"var(--crit)":z.risk>40?"var(--warn)":"var(--good)", width: 28, textAlign: "right"}}>{z.risk}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="panel">
            <div className="panel-h"><h3>Detail</h3>{hoveredPoint && <span className="sub mono">{hoveredPoint.id}</span>}</div>
            <div className="panel-b" style={{paddingTop: 8}}>
              {hoveredPoint ? (
                <>
                  <div style={{color: "var(--ink-0)", fontSize: 15, marginBottom: 4}}>{hoveredPoint.label}</div>
                  <div style={{color: "var(--ink-3)", fontSize: 11, fontFamily: "var(--font-mono)", marginBottom: 12}}>
                    {hoveredPoint.kind === "cam" ? "Camera" : hoveredPoint.kind === "rdr" ? "Badge reader" : "Sensor"} · {hoveredPoint.id}
                  </div>
                  <div style={{display: "flex", gap: 6, marginBottom: 12}}>
                    <StatusDot status={hoveredPoint.status} />
                    <span style={{color: "var(--ink-1)", fontSize: 12, textTransform: "capitalize"}}>{hoveredPoint.status}</span>
                  </div>
                  {hoveredPoint.kind === "cam" && (
                    <div className="cam" style={{aspectRatio: "16/9", borderRadius: 8, marginBottom: 12}}>
                      <SimFeed scene="perimeter" seed={hoveredPoint.id.charCodeAt(5)} alert={hoveredPoint.status === "crit" ? "crit" : hoveredPoint.status === "warn" ? "warn" : null} />
                      <div className="overlay" />
                      <div className="head"><span className="rec" /><span className="name" style={{fontSize: 10}}>{hoveredPoint.id}</span></div>
                    </div>
                  )}
                  <button className="btn sm" onClick={()=>go("live")}><Icon name="expand" size={12} />Open feed</button>
                </>
              ) : (
                <div style={{color: "var(--ink-3)", fontSize: 12, padding: "12px 0"}}>Click a device on the map to inspect.</div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ============ ANALYTICS ============ */
const ScreenAnalytics = () => {
  const { HOURLY, RULE_HIT_TREND, ZONE_RISK, RULES, ALERTS } = window.NETRA;

  return (
    <div className="fade-in">
      <div style={{display: "flex", alignItems: "center", gap: 12, marginBottom: 16}}>
        <h2 style={{margin: 0, font: "500 18px var(--font-display)", color: "var(--ink-0)", letterSpacing: "-0.01em"}}>Analytics</h2>
        <span className="pill iris">Last 24 h</span>
        <div style={{flex: 1}} />
        <button className="btn sm"><Icon name="filter" size={12} />Filter</button>
        <button className="btn sm"><Icon name="download" size={12} />Export</button>
      </div>

      <div className="grid k4" style={{marginBottom: 16}}>
        <KPI label="Alerts" value="91" delta="↑ 12% vs avg" deltaKind="up" spark={HOURLY.map(h=>h.alerts)} sparkColor="var(--iris)" />
        <KPI label="Critical" value="6" delta="↑ 2 since 06:00" deltaKind="warn" spark={HOURLY.map(h=>h.crit)} sparkColor="var(--crit)" />
        <KPI label="Access events" value="1,247" delta="↓ 4% vs avg" deltaKind="dn" spark={HOURLY.map(h=>h.access)} sparkColor="var(--saffron)" />
        <KPI label="Mean time to ack" value="48" unit="s" delta="↑ 5s vs sla" deltaKind="warn" spark={[60,55,52,49,46,48,51,47,45,48]} sparkColor="var(--info)" />
      </div>

      <div style={{display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 16, marginBottom: 16}}>
        <div className="panel">
          <div className="panel-h">
            <h3>Activity — Iris</h3>
            <span className="sub">24 h · alerts (inner) · access (outer)</span>
          </div>
          <div style={{padding: 14}}>
            <IrisRing data={HOURLY} size={380} />
            <div style={{display: "flex", justifyContent: "center", gap: 16, marginTop: 4}}>
              <span style={{display: "inline-flex", alignItems: "center", gap: 6, font:"10px var(--font-mono)", color: "var(--ink-3)", letterSpacing: "0.14em", textTransform: "uppercase"}}>
                <span style={{width: 8, height: 8, background: "var(--iris)", borderRadius: 2}} />Alerts
              </span>
              <span style={{display: "inline-flex", alignItems: "center", gap: 6, font:"10px var(--font-mono)", color: "var(--ink-3)", letterSpacing: "0.14em", textTransform: "uppercase"}}>
                <span style={{width: 8, height: 8, background: "var(--saffron)", borderRadius: 2}} />Access
              </span>
              <span style={{display: "inline-flex", alignItems: "center", gap: 6, font:"10px var(--font-mono)", color: "var(--ink-3)", letterSpacing: "0.14em", textTransform: "uppercase"}}>
                <span style={{width: 8, height: 8, background: "var(--crit)", borderRadius: 2}} />Critical hour
              </span>
            </div>
          </div>
        </div>

        <div className="col">
          <div className="panel">
            <div className="panel-h"><h3>Top rules — by hits</h3><span className="sub">24h</span></div>
            <div className="panel-b" style={{paddingTop: 6}}>
              {[...RULES].sort((a,b)=>b.hits-a.hits).slice(0,6).map(r => (
                <div key={r.id} style={{display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderBottom: "1px solid var(--line)"}}>
                  <span className="mono" style={{width: 38, fontSize: 10, color: "var(--ink-3)"}}>{r.id}</span>
                  <span style={{flex: 1, color: "var(--ink-1)", fontSize: 13}}>{r.name}</span>
                  <div className={`meter ${r.sev}`} style={{width: 100}}><i style={{width: `${(r.hits/45)*100}%`}} /></div>
                  <span className="mono" style={{width: 30, textAlign: "right", fontSize: 11, color: "var(--ink-2)"}}>{r.hits}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="panel">
            <div className="panel-h"><h3>Zone heat</h3><span className="sub">risk index</span></div>
            <div className="panel-b" style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, paddingTop: 8}}>
              {ZONE_RISK.map(z => (
                <div key={z.zone} style={{padding: 14, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: "var(--r-md)", position: "relative", overflow: "hidden"}}>
                  <div style={{position: "absolute", inset: 0,
                    background: `linear-gradient(135deg, ${z.risk>70?"rgba(255,61,110,0.15)":z.risk>40?"rgba(240,167,58,0.12)":"rgba(92,224,168,0.08)"}, transparent 70%)`}} />
                  <div style={{position: "relative"}}>
                    <div style={{font: "10px var(--font-mono)", color: "var(--ink-3)", letterSpacing: "0.14em", textTransform: "uppercase"}}>{z.zone}</div>
                    <div style={{font: "500 26px var(--font-display)", color: z.risk>70?"var(--crit)":z.risk>40?"var(--warn)":"var(--good)", marginTop: 6, letterSpacing: "-0.02em"}}>{z.risk}</div>
                    <div style={{font: "10px var(--font-mono)", color: "var(--ink-3)", marginTop: 4}}>{z.alerts} alerts · last {z.last}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="panel">
        <div className="panel-h">
          <h3>Rule activity trend</h3>
          <span className="sub">hits / hour · 24h</span>
        </div>
        <div className="panel-b" style={{paddingTop: 8}}>
          <BarChart data={RULE_HIT_TREND} height={170} />
        </div>
      </div>
    </div>
  );
};

const BarChart = ({data, height = 160}) => {
  const max = Math.max(...data, 1);
  return (
    <div style={{display: "flex", alignItems: "flex-end", gap: 4, height}}>
      {data.map((v, i) => {
        const h = (v / max) * (height - 24);
        const c = v > max*0.75 ? "var(--crit)" : v > max*0.5 ? "var(--warn)" : "var(--iris)";
        return (
          <div key={i} style={{flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6}}>
            <div style={{flex: 1, width: "100%", display: "flex", alignItems: "flex-end"}}>
              <div style={{width: "100%", height: h, background: `linear-gradient(180deg, ${c}, ${c}99)`, borderRadius: "2px 2px 0 0", opacity: 0.85}} />
            </div>
            <span style={{font: "9px var(--font-mono)", color: "var(--ink-3)", letterSpacing: "0.1em"}}>{String(i).padStart(2,"0")}</span>
          </div>
        );
      })}
    </div>
  );
};

Object.assign(window, { ScreenRules, ScreenSiteMap, ScreenAnalytics });