/* =========================================================
   NETRA AI — Access, Devices, Settings
   ========================================================= */

/* ============ ACCESS ============ */
const ScreenAccess = () => {
  const { PEOPLE, ACCESS_LOG } = window.NETRA;
  const [tab, setTab] = React.useState("log");
  const [q, setQ] = React.useState("");
  const [sel, setSel] = React.useState(PEOPLE[0].id);
  const person = PEOPLE.find(p => p.id === sel) || PEOPLE[0];
  const filtered = PEOPLE.filter(p => !q || p.name.toLowerCase().includes(q.toLowerCase()) || p.id.includes(q));

  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"}}>Access & People</h2>
        <div style={{flex: 1}} />
        <div style={{display: "flex", gap: 6, background: "var(--bg-1)", padding: 4, borderRadius: "var(--r-md)", border: "1px solid var(--line)"}}>
          {[["log","Access Log"], ["dir","Directory"]].map(([k, l]) => (
            <button key={k} className={`btn sm ${tab===k?"primary":"ghost"}`} onClick={()=>setTab(k)} style={{height: 22}}>{l}</button>
          ))}
        </div>
        <button className="btn sm"><Icon name="download" size={12} />Export CSV</button>
      </div>

      {tab === "log" ? (
        <div className="grid k4" style={{marginBottom: 16}}>
          <KPI label="Today's events" value="1,247" delta="+ 4% vs avg" deltaKind="up" spark={[40,55,60,72,90,110,124]} />
          <KPI label="Denials" value="14" delta="↑ 3 vs yest." deltaKind="warn" spark={[1,2,1,3,2,4,1]} sparkColor="var(--warn)" />
          <KPI label="Visitors today" value="22" spark={[3,5,4,6,2,1,1]} sparkColor="var(--saffron)" />
          <KPI label="After-hours" value="3" delta="within on-call" deltaKind="up" spark={[0,0,1,2,3]} sparkColor="var(--info)" />
        </div>
      ) : null}

      {tab === "log" && (
        <div className="panel">
          <div className="panel-h">
            <h3>Access events — live</h3>
            <span className="sub">stream</span>
            <div className="actions">
              <span className="pill good"><span className="d" />live</span>
              <input className="grow" placeholder="Search…" style={{height: 26, padding: "0 10px", background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: "var(--r-md)", color: "var(--ink-0)", fontSize: 12, width: 200}} />
            </div>
          </div>
          <div style={{overflow: "auto", maxHeight: "calc(100vh - 360px)"}}>
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{width: 90}}>Time</th>
                  <th>Person</th>
                  <th>Badge</th>
                  <th>Door</th>
                  <th>Method</th>
                  <th>Result</th>
                </tr>
              </thead>
              <tbody>
                {ACCESS_LOG.map((e, i) => (
                  <tr key={i}>
                    <td className="tnum">{e.t}</td>
                    <td>{e.emp === "—" ? <span className="muted">—</span> : (
                      <span style={{display:"inline-flex", alignItems:"center", gap: 8}}>
                        <Avatar initials={e.emp.split(" ").map(x=>x[0]).slice(0,2).join("")} size={22} />
                        {e.emp}
                      </span>
                    )}</td>
                    <td className="tnum">{e.badge}</td>
                    <td>{e.door}</td>
                    <td><span style={{fontSize: 12, color: "var(--ink-2)"}}>{e.method}</span></td>
                    <td>
                      {e.result === "granted"
                        ? <span className="pill good"><span className="d" />Granted</span>
                        : <span className="pill crit"><span className="d" />Denied</span>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab === "dir" && (
        <div style={{display: "grid", gridTemplateColumns: "1fr 380px", gap: 16, height: "calc(100vh - 130px)"}}>
          <div className="panel" style={{display: "flex", flexDirection: "column", overflow: "hidden"}}>
            <div className="panel-h">
              <h3>People · {PEOPLE.length}</h3>
              <span className="sub">enrolled</span>
              <div className="actions">
                <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Search name or ID…" style={{height: 26, padding: "0 10px", background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: "var(--r-md)", color: "var(--ink-0)", fontSize: 12, width: 200}} />
                <button className="btn sm primary"><Icon name="plus" size={12} />Enroll</button>
              </div>
            </div>
            <div style={{overflow: "auto", flex: 1}}>
              <table className="tbl">
                <thead><tr><th>Name</th><th>Role</th><th>Badge</th><th>Clearance</th><th>Last seen</th></tr></thead>
                <tbody>
                  {filtered.map(p => (
                    <tr key={p.id} onClick={()=>setSel(p.id)} className={sel===p.id ? "selected" : ""}>
                      <td><span style={{display:"inline-flex", alignItems:"center", gap: 10}}><Avatar initials={p.photo} />{p.name}</span></td>
                      <td>{p.role}</td>
                      <td className="tnum">{p.badge}</td>
                      <td><span className={`pill ${p.clearance==="L5"?"crit":p.clearance==="L4"?"warn":"iris"}`}>{p.clearance}</span></td>
                      <td><span style={{fontSize: 12, color: "var(--ink-3)"}}>{p.last}</span></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          <div className="panel" style={{overflow: "auto"}}>
            <div className="panel-h"><h3>Profile</h3></div>
            <div className="panel-b" style={{textAlign: "center", paddingTop: 24}}>
              <Avatar initials={person.photo} size={88} />
              <div style={{font: "500 18px var(--font-display)", color: "var(--ink-0)", marginTop: 14}}>{person.name}</div>
              <div style={{font: "11px var(--font-mono)", color: "var(--ink-3)", marginTop: 4, letterSpacing: "0.12em", textTransform: "uppercase"}}>{person.id} · {person.role}</div>
              <div style={{display: "flex", justifyContent: "center", gap: 6, marginTop: 12}}>
                <span className={`pill ${person.clearance==="L5"?"crit":person.clearance==="L4"?"warn":"iris"}`}>{person.clearance} Clearance</span>
                <span className="pill good"><span className="d" />Enrolled</span>
              </div>
            </div>

            <div className="panel-b" style={{paddingTop: 0}}>
              <Field lbl="Badge" v={person.badge} />
              <div style={{height: 8}} />
              <Field lbl="Last seen" v={person.last} />
              <div style={{height: 8}} />
              <Field lbl="Enrolled" v="Face · Fingerprint · PIN" />

              <h4 style={{font:"500 11px var(--font-mono)", color:"var(--ink-3)", letterSpacing:"0.16em", textTransform:"uppercase", margin:"18px 0 8px"}}>Authorised zones</h4>
              <div style={{display: "flex", flexWrap: "wrap", gap: 6}}>
                {["Lobby","Common","Floor 2","Floor 3","Lab"].map(z => <span key={z} className="tag">{z}</span>)}
              </div>

              <h4 style={{font:"500 11px var(--font-mono)", color:"var(--ink-3)", letterSpacing:"0.16em", textTransform:"uppercase", margin:"18px 0 8px"}}>Recent events</h4>
              {[
                {t:"10:42", door:"Lab Door A", ok:true},
                {t:"09:18", door:"Floor 3", ok:true},
                {t:"08:46", door:"Main Lobby", ok:true},
                {t:"yest.", door:"Cafeteria", ok:true},
              ].map((e, i) => (
                <div key={i} style={{display:"flex", alignItems:"center", padding:"8px 0", borderTop:"1px solid var(--line)"}}>
                  <span className="mono" style={{width: 50, fontSize: 11, color: "var(--ink-3)"}}>{e.t}</span>
                  <span style={{flex:1, fontSize: 13, color: "var(--ink-1)"}}>{e.door}</span>
                  <span className="pill good" style={{padding:"2px 6px"}}>OK</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

/* ============ DEVICES ============ */
const ScreenDevices = () => {
  const { DEVICES } = window.NETRA;
  const counts = DEVICES.reduce((a, d) => { a[d.status] = (a[d.status]||0) + 1; return a; }, {});
  const byKind = DEVICES.reduce((a, d) => { a[d.kind] = (a[d.kind]||0)+1; return a; }, {});

  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"}}>Devices & Health</h2>
        <span className="pill iris">{DEVICES.length} devices</span>
        <div style={{flex: 1}} />
        <button className="btn sm"><Icon name="filter" size={12} />Filter</button>
        <button className="btn sm primary"><Icon name="plus" size={12} />Add device</button>
      </div>

      <div className="grid k4" style={{marginBottom: 16}}>
        <KPI label="Online" value={counts.ok || 0} delta={`${Math.round(((counts.ok||0)/DEVICES.length)*100)}% of fleet`} deltaKind="up" />
        <KPI label="Degraded" value={counts.warn || 0} delta="needs attention" deltaKind="warn" />
        <KPI label="Offline" value={counts.down || 0} delta="action required" deltaKind="dn" />
        <KPI label="Avg uptime" value="47" unit="d" spark={[10,18,22,28,35,40,47]} sparkColor="var(--good)" />
      </div>

      <div style={{display: "grid", gridTemplateColumns: "1fr 320px", gap: 16}}>
        <div className="panel">
          <div className="panel-h">
            <h3>Fleet</h3>
            <span className="sub">live</span>
          </div>
          <div style={{overflow: "auto"}}>
            <table className="tbl">
              <thead><tr>
                <th>ID</th><th>Type</th><th>Model</th><th>Firmware</th><th>Uptime</th><th>Health</th><th>Status</th>
              </tr></thead>
              <tbody>
                {DEVICES.map(d => (
                  <tr key={d.id}>
                    <td className="tnum">{d.id}</td>
                    <td><span style={{display:"inline-flex", alignItems:"center", gap: 8, fontSize: 13}}>
                      <Icon name={d.kind==="Camera"?"cam":d.kind==="NVR"?"devices":d.kind==="Badge Reader"?"door":"sensor"} size={14} />
                      {d.kind}
                    </span></td>
                    <td><span style={{fontSize: 12, color: "var(--ink-2)"}}>{d.model}</span></td>
                    <td className="tnum">{d.fw}</td>
                    <td className="tnum">{d.up}</td>
                    <td>
                      <div style={{display: "flex", alignItems: "center", gap: 8}}>
                        <div className={`meter ${d.health>90?"good":d.health>60?"warn":"crit"}`} style={{width: 80}}><i style={{width: `${d.health}%`}} /></div>
                        <span className="mono" style={{fontSize: 11, color: "var(--ink-2)", width: 32}}>{d.health}%</span>
                      </div>
                    </td>
                    <td>
                      {d.status === "ok" && <span className="pill good"><span className="d" />Online</span>}
                      {d.status === "warn" && <span className="pill warn"><span className="d" />Degraded</span>}
                      {d.status === "down" && <span className="pill crit"><span className="d" />Offline</span>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="col">
          <div className="panel">
            <div className="panel-h"><h3>By type</h3></div>
            <div className="panel-b" style={{paddingTop: 8}}>
              {Object.entries(byKind).map(([k, v]) => (
                <div key={k} style={{display: "flex", alignItems: "center", gap: 8, padding: "8px 0", borderBottom: "1px solid var(--line)"}}>
                  <Icon name={k==="Camera"?"cam":k==="NVR"?"devices":k==="Badge Reader"?"door":"sensor"} size={14} style={{color:"var(--ink-2)"}} />
                  <span style={{flex: 1, fontSize: 13, color: "var(--ink-1)"}}>{k}</span>
                  <div className="meter" style={{width: 80}}><i style={{width: `${(v/DEVICES.length)*100}%`}} /></div>
                  <span className="mono" style={{width: 24, textAlign: "right", fontSize: 11, color: "var(--ink-2)"}}>{v}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="panel">
            <div className="panel-h"><h3>Active issues</h3><span className="sub">{(counts.warn||0)+(counts.down||0)}</span></div>
            <div className="panel-b" style={{paddingTop: 6}}>
              {DEVICES.filter(d => d.status !== "ok").map(d => (
                <div key={d.id} style={{display: "flex", gap: 10, padding: "10px 0", borderBottom: "1px solid var(--line)"}}>
                  <Icon name={d.status === "down" ? "close" : "alert"} size={16} style={{color: d.status === "down" ? "var(--crit)" : "var(--warn)", flex: "none", marginTop: 2}} />
                  <div style={{flex: 1}}>
                    <div style={{fontSize: 13, color: "var(--ink-0)"}}>{d.id}</div>
                    <div style={{fontSize: 11, color: "var(--ink-3)", marginTop: 2, fontFamily: "var(--font-mono)"}}>
                      {d.status === "down" ? "Offline · last seen 12m ago" : `Health ${d.health}% · packet loss 2.1%`}
                    </div>
                  </div>
                  <button className="btn sm">Fix</button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ============ SETTINGS ============ */
const ScreenSettings = () => {
  const [section, setSection] = React.useState("org");
  const sections = [
    { id: "org",      label: "Organisation",  icon: "settings" },
    { id: "users",    label: "Users & Roles", icon: "users"    },
    { id: "ai",       label: "AI Models",     icon: "bolt"     },
    { id: "noti",     label: "Notifications", icon: "bell"     },
    { id: "ret",      label: "Retention",     icon: "history"  },
    { id: "integ",    label: "Integrations",  icon: "devices"  },
  ];

  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"}}>Settings</h2>
      </div>

      <div style={{display: "grid", gridTemplateColumns: "220px 1fr", gap: 16}}>
        <div className="panel" style={{padding: 6, height: "fit-content"}}>
          {sections.map(s => (
            <div key={s.id} className={`nav-item ${section===s.id?"active":""}`} onClick={()=>setSection(s.id)}>
              <Icon name={s.icon} size={16} className="ico" />
              <span>{s.label}</span>
            </div>
          ))}
        </div>

        <div className="col" style={{gap: 16}}>
          {section === "org" && (
            <>
              <div className="panel">
                <div className="panel-h"><h3>Organisation</h3></div>
                <div className="panel-b">
                  <div className="grid k2">
                    <div className="fld"><label>Org name</label><input defaultValue="Acme Industries Pvt Ltd" /></div>
                    <div className="fld"><label>Primary site</label><select><option>HQ — Bengaluru</option></select></div>
                    <div className="fld"><label>Timezone</label><select><option>Asia/Kolkata (IST)</option></select></div>
                    <div className="fld"><label>SOC contact</label><input defaultValue="soc@acme.in" /></div>
                  </div>
                </div>
              </div>
              <div className="panel">
                <div className="panel-h"><h3>Branding</h3></div>
                <div className="panel-b">
                  <div style={{display:"flex", gap:16, alignItems:"center"}}>
                    <div style={{width: 88, height: 88, borderRadius: 12, background: "var(--bg-2)", border: "1px solid var(--line)", display: "grid", placeItems: "center"}}>
                      <IrisMark size={56} />
                    </div>
                    <div className="col" style={{flex: 1}}>
                      <div className="fld"><label>Display name</label><input defaultValue="Netra AI" /></div>
                      <div className="fld"><label>Tagline</label><input defaultValue="नेत्र · the eye that never blinks" /></div>
                    </div>
                  </div>
                </div>
              </div>
            </>
          )}

          {section === "ai" && (
            <div className="panel">
              <div className="panel-h"><h3>AI Models</h3><span className="sub">on-prem inference</span></div>
              <div className="panel-b">
                {[
                  ["Person Detection v4.2", "Inference", 99, true],
                  ["Face Recognition v3.1", "Identity", 98, true],
                  ["Object / Bag Tracker v2", "Inference", 96, true],
                  ["Behavior Classifier v1.4", "Correlation", 92, true],
                  ["Anomaly Vector v0.9 (β)", "Experimental", 78, false],
                ].map(([n, k, h, on]) => (
                  <div key={n} style={{display:"flex", alignItems:"center", gap:12, padding:"12px 0", borderBottom:"1px solid var(--line)"}}>
                    <Icon name="bolt" size={16} style={{color: "var(--iris)"}} />
                    <div style={{flex:1}}>
                      <div style={{color:"var(--ink-0)", fontSize: 13}}>{n}</div>
                      <div style={{color:"var(--ink-3)", fontSize: 11, fontFamily: "var(--font-mono)", marginTop: 2}}>{k} · accuracy {h}%</div>
                    </div>
                    <div className={`meter ${h>95?"good":h>85?"warn":"crit"}`} style={{width: 100}}><i style={{width: `${h}%`}} /></div>
                    <Toggle on={on} onChange={()=>{}} />
                  </div>
                ))}
              </div>
            </div>
          )}

          {section === "noti" && (
            <div className="panel">
              <div className="panel-h"><h3>Notifications</h3></div>
              <div className="panel-b">
                {[
                  ["Critical alerts", "Pager + SMS + Email", true],
                  ["Warning alerts", "Email + In-app", true],
                  ["Info alerts", "In-app only", true],
                  ["Daily digest", "08:00 IST · Email", true],
                  ["Weekly review", "Monday · 09:00 IST", false],
                ].map(([n, ch, on]) => (
                  <div key={n} style={{display:"flex", alignItems:"center", gap:12, padding:"12px 0", borderBottom:"1px solid var(--line)"}}>
                    <Icon name="bell" size={16} style={{color: "var(--ink-2)"}} />
                    <div style={{flex:1}}>
                      <div style={{color:"var(--ink-0)", fontSize: 13}}>{n}</div>
                      <div style={{color:"var(--ink-3)", fontSize: 11, fontFamily: "var(--font-mono)", marginTop: 2}}>{ch}</div>
                    </div>
                    <Toggle on={on} onChange={()=>{}} />
                  </div>
                ))}
              </div>
            </div>
          )}

          {section === "users" && (
            <div className="panel">
              <div className="panel-h"><h3>Users & Roles</h3><div className="actions"><button className="btn sm primary"><Icon name="plus" size={12} />Invite user</button></div></div>
              <div className="panel-b">
                <table className="tbl">
                  <thead><tr><th>User</th><th>Role</th><th>Last active</th><th>2FA</th></tr></thead>
                  <tbody>
                    {[
                      ["Vivaan Mehta",  "Admin",       "Just now",   true],
                      ["S. Rao",        "SOC Operator","2 min ago",  true],
                      ["Priya Iyer",    "Manager",     "1 h ago",    true],
                      ["IT Service",    "Service",     "—",          true],
                    ].map(([n, r, t, two]) => (
                      <tr key={n}>
                        <td><span style={{display:"inline-flex", alignItems:"center", gap:8}}><Avatar initials={n.split(" ").map(x=>x[0]).slice(0,2).join("")} size={22} />{n}</span></td>
                        <td><span className="pill iris">{r}</span></td>
                        <td><span style={{fontSize:12, color:"var(--ink-3)"}}>{t}</span></td>
                        <td>{two ? <span className="pill good"><span className="d" />Enabled</span> : <span className="pill warn"><span className="d" />Disabled</span>}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {section === "ret" && (
            <div className="panel">
              <div className="panel-h"><h3>Retention</h3></div>
              <div className="panel-b">
                <div className="grid k2">
                  <div className="fld"><label>Video — standard</label><input defaultValue="30 days" /></div>
                  <div className="fld"><label>Video — incident</label><input defaultValue="365 days" /></div>
                  <div className="fld"><label>Access logs</label><input defaultValue="730 days" /></div>
                  <div className="fld"><label>AI thumbnails</label><input defaultValue="90 days" /></div>
                </div>
                <div style={{marginTop: 14, padding: 14, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: "var(--r-md)"}}>
                  <div style={{font: "10px var(--font-mono)", color: "var(--ink-3)", letterSpacing: "0.16em", textTransform: "uppercase"}}>STORAGE USED</div>
                  <div style={{display:"flex", alignItems:"center", gap: 12, marginTop: 8}}>
                    <div className="meter warn" style={{flex: 1}}><i style={{width: "72%"}} /></div>
                    <span className="mono" style={{fontSize: 12, color: "var(--ink-1)"}}>14.4 / 20 TB</span>
                  </div>
                </div>
              </div>
            </div>
          )}

          {section === "integ" && (
            <div className="panel">
              <div className="panel-h"><h3>Integrations</h3></div>
              <div className="panel-b" style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 10}}>
                {[
                  ["PagerDuty","Incidents → Pager","connected"],
                  ["Slack","Alert routing","connected"],
                  ["ServiceNow","Ticketing","connected"],
                  ["Okta","SSO","connected"],
                  ["Splunk","SIEM logs","pending"],
                  ["AWS S3","Archive","disconnected"],
                ].map(([n, d, st]) => (
                  <div key={n} style={{padding: 14, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: "var(--r-md)"}}>
                    <div style={{display:"flex", alignItems:"center", gap: 8, marginBottom: 8}}>
                      <span style={{width: 28, height: 28, borderRadius: 6, background: "var(--bg-3)", display: "grid", placeItems: "center", color: "var(--ink-1)", fontSize: 11, fontFamily: "var(--font-mono)"}}>{n[0]}</span>
                      <span style={{color:"var(--ink-0)", fontSize: 13}}>{n}</span>
                      <span style={{flex:1}} />
                      <span className={`pill ${st==="connected"?"good":st==="pending"?"warn":""}`}><span className="d" />{st}</span>
                    </div>
                    <div style={{color:"var(--ink-3)", fontSize: 11, fontFamily:"var(--font-mono)"}}>{d}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenAccess, ScreenDevices, ScreenSettings });