/* Report + Admin pages */

function ReportPage({ go }) {
  const [section, setSection] = useState("summary");
  const [branded, setBranded] = useState(true);

  return (
    <div className="page">
      <div className="page-head">
        <div className="title">
          <div className="kicker">Report · IEC TS 62446-3</div>
          <h1>Évora Plana PV · April 2026 inspection</h1>
          <div className="sub">
            <span className="mono">RPT-2026-04-033 v2</span> · draft · client-branded · 42 pages
          </div>
        </div>
        <div className="actions">
          <div className="seg">
            {[["es","ES"],["en","EN"],["pt","PT"]].map(([v,l]) => (
              <button key={v} className={v==="en"?"on":""}>{l}</button>
            ))}
          </div>
          <button className="btn btn-secondary"><Icon name="history"/>v1 · v2</button>
          <button className="btn btn-secondary"><Icon name="download"/>PDF</button>
          <button className="btn btn-primary"><Icon name="send"/>Deliver to client</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "220px 1fr 320px", gap: 16 }}>
        {/* Outline */}
        <aside className="card" style={{ height: "fit-content" }}>
          <div className="card-hd">Outline</div>
          <nav style={{ padding: 6 }}>
            {[
              ["summary","1 · Executive summary"],
              ["context","2 · Site context"],
              ["coverage","3 · Coverage"],
              ["inventory","4 · Defect inventory"],
              ["severity","5 · Severity breakdown"],
              ["temporal","6 · Temporal comparison"],
              ["recs","7 · Recommendations"],
              ["plan","8 · Action plan"],
              ["annex","A · Annex — methodology"],
            ].map(([k,l]) => (
              <a key={k} href="#" onClick={e => { e.preventDefault(); setSection(k); }}
                 className={section === k ? "active" : ""}
                 style={{ display: "block", padding: "6px 10px", borderRadius: 6, fontSize: 12,
                          color: section === k ? "var(--fg-primary)" : "var(--fg-secondary)",
                          background: section === k ? "var(--bg-active)" : "transparent",
                          textDecoration: "none" }}>
                {l}
              </a>
            ))}
          </nav>
        </aside>

        {/* Document */}
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ borderBottom: "1px solid var(--border-base)", padding: "8px 14px", display: "flex", alignItems: "center", gap: 10, background: "var(--bg-inset)" }}>
            <span className="mono muted" style={{ fontSize: 11 }}>Preview · A4 portrait</span>
            <span className="grow"/>
            <div className="seg">
              <button className="on">100%</button><button>75%</button><button>Fit</button>
            </div>
          </div>
          <div style={{ padding: 28, background: "var(--bg-inset)", overflow: "auto", maxHeight: 720 }}>
            <article style={{ background: "#0b1322", color: "#e2e8f0", padding: "40px 48px", maxWidth: 720, margin: "0 auto", border: "1px solid var(--border-base)", borderRadius: 6, fontSize: 11, lineHeight: 1.6 }}>
              {/* Branded header */}
              {branded && (
                <header style={{ display: "flex", alignItems: "center", gap: 14, paddingBottom: 20, borderBottom: "2px solid #2E75B6", marginBottom: 24 }}>
                  <div style={{ width: 42, height: 42, borderRadius: 8, background: "var(--brand-grad)", display: "grid", placeItems: "center", color: "#fff", fontWeight: 800, fontSize: 14 }}>IR</div>
                  <div>
                    <div style={{ fontSize: 10, letterSpacing: "0.18em", color: "#94a3b8", textTransform: "uppercase" }}>Iberdrola Renovables</div>
                    <div style={{ fontSize: 16, fontWeight: 700 }}>PV Asset Inspection Report</div>
                  </div>
                  <div style={{ marginLeft: "auto", textAlign: "right", fontSize: 10, fontFamily: "var(--font-mono)", color: "#94a3b8" }}>
                    RPT-2026-04-033 v2<br/>
                    Issued 2026-04-17<br/>
                    IEC TS 62446-3
                  </div>
                </header>
              )}

              <h2 style={{ fontSize: 18, margin: "0 0 8px" }}>Executive summary</h2>
              <div style={{ color: "#94a3b8", fontSize: 10, marginBottom: 16 }}>Évora Plana PV · Alentejo, PT · 210.5 MW · 460,100 modules · flight window 2026-04-16 10:40–14:10 UTC</div>

              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginBottom: 20 }}>
                {[
                  ["Site health", "78", "/100", "#eab308"],
                  ["Critical", "9", "", "#ef4444"],
                  ["High", "34", "", "#f97316"],
                  ["Coverage", "92.4", "%", "#22c55e"],
                ].map(([l,v,u,c], i) => (
                  <div key={i} style={{ border: "1px solid #1e293b", padding: 10, borderRadius: 6 }}>
                    <div style={{ fontSize: 9, color: "#94a3b8", letterSpacing: "0.12em", textTransform: "uppercase" }}>{l}</div>
                    <div style={{ fontSize: 20, fontWeight: 700, color: c, fontVariantNumeric: "tabular-nums" }}>{v}<span style={{ fontSize: 11, color: "#94a3b8" }}>{u}</span></div>
                  </div>
                ))}
              </div>

              <p style={{ margin: "0 0 12px", fontSize: 11.5 }}>
                The April 2026 thermographic inspection of Évora Plana PV detected <b>1,204 observations</b> across 460,100 modules,
                of which <b>9 are critical</b> and <b>34 are high</b> severity. Weighted site health declined 2.4 points versus
                the January 2026 baseline, driven chiefly by <b>offline string INV-08.CMB-04.STR-11</b> (out since 2026-03-29) and
                a cluster of activated bypass diodes in Zone A. Coverage was 92.4%, below the 95% MIC target, due to
                wind-abort on sortie 11. A re-fly of 7.6% of the AOI is scheduled for 2026-04-28.
              </p>

              <p style={{ margin: "0 0 20px", fontSize: 11.5 }}>
                The prioritized action plan (§8) projects a recoverable yield of <b>€84.2k/month</b> if all critical items
                are addressed within 14 days.
              </p>

              <h3 style={{ fontSize: 14, margin: "0 0 10px" }}>Defect inventory — top findings</h3>
              <table style={{ width: "100%", fontSize: 10, borderCollapse: "collapse", marginBottom: 20 }}>
                <thead>
                  <tr style={{ background: "#0f172a" }}>
                    <th style={{ textAlign: "left", padding: "6px 8px", color: "#94a3b8", fontWeight: 500, letterSpacing: "0.1em", textTransform: "uppercase", fontSize: 9 }}>OBS</th>
                    <th style={{ textAlign: "left", padding: "6px 8px", color: "#94a3b8", fontWeight: 500, letterSpacing: "0.1em", textTransform: "uppercase", fontSize: 9 }}>Type</th>
                    <th style={{ textAlign: "left", padding: "6px 8px", color: "#94a3b8", fontWeight: 500, letterSpacing: "0.1em", textTransform: "uppercase", fontSize: 9 }}>Location</th>
                    <th style={{ textAlign: "right", padding: "6px 8px", color: "#94a3b8", fontWeight: 500, letterSpacing: "0.1em", textTransform: "uppercase", fontSize: 9 }}>ΔT</th>
                    <th style={{ textAlign: "left", padding: "6px 8px", color: "#94a3b8", fontWeight: 500, letterSpacing: "0.1em", textTransform: "uppercase", fontSize: 9 }}>Sev · Temporal</th>
                  </tr>
                </thead>
                <tbody>
                  {DETECTIONS.slice(0, 6).map(d => (
                    <tr key={d.id} style={{ borderBottom: "1px solid #1e293b" }}>
                      <td style={{ padding: "6px 8px", fontFamily: "var(--font-mono)" }}>{d.id}</td>
                      <td style={{ padding: "6px 8px" }}>{d.label}</td>
                      <td style={{ padding: "6px 8px", fontFamily: "var(--font-mono)", color: "#94a3b8" }}>{d.string}</td>
                      <td style={{ padding: "6px 8px", textAlign: "right", fontFamily: "var(--font-mono)" }}>+{d.dT.toFixed(1)}°C</td>
                      <td style={{ padding: "6px 8px" }}>
                        <span style={{ color: `var(--sev-${d.severity})`, fontWeight: 500 }}>● {d.severity}</span>
                        <span style={{ color: "#64748b", marginLeft: 6, fontSize: 9 }}>· {d.temporal}</span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>

              <h3 style={{ fontSize: 14, margin: "0 0 10px" }}>Temporal comparison vs. MIC-2026-01-017</h3>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginBottom: 20 }}>
                {[
                  ["NEW", 41, "#4a90d9"],
                  ["PERSISTENT", 82, "#64748b"],
                  ["DEGRADED", 14, "#ef4444"],
                  ["RESOLVED", 37, "#22c55e"],
                ].map(([l,v,c]) => (
                  <div key={l} style={{ border: `1px solid ${c}40`, background: `${c}12`, padding: 10, borderRadius: 6 }}>
                    <div style={{ fontSize: 9, letterSpacing: "0.12em", color: c }}>{l}</div>
                    <div style={{ fontSize: 20, fontWeight: 700, fontVariantNumeric: "tabular-nums", color: c }}>{v}</div>
                  </div>
                ))}
              </div>

              <h3 style={{ fontSize: 14, margin: "0 0 10px" }}>Recommended action plan (excerpt)</h3>
              <ol style={{ padding: "0 0 0 18px", margin: 0, fontSize: 11 }}>
                <li style={{ marginBottom: 6 }}>Re-energize string INV-08.CMB-04.STR-11 and replace module MOD-1982. <b>Urgency 14d · impact €11.4k/mo</b></li>
                <li style={{ marginBottom: 6 }}>Replace 6 modules in bypass-diode cluster, Zone A. <b>Urgency 30d · impact €6.2k/mo</b></li>
                <li style={{ marginBottom: 6 }}>Clear vegetation from sector NW (156 m²). <b>Urgency 45d · impact €1.8k/mo</b></li>
                <li style={{ marginBottom: 6 }}>Calibrate tilt-tracker actuators on 14 rows. <b>Urgency 14d · impact €4.9k/mo</b></li>
              </ol>

              <footer style={{ marginTop: 32, paddingTop: 12, borderTop: "1px solid #1e293b", color: "#64748b", fontSize: 9, display: "flex", justifyContent: "space-between" }}>
                <span>SkyOps · Intelligence that compounds with every flight.</span>
                <span>Page 1 of 42</span>
              </footer>
            </article>
          </div>
        </div>

        {/* Side editor */}
        <aside className="col" style={{ gap: 16 }}>
          <div className="card">
            <div className="card-hd">Template & branding</div>
            <div style={{ padding: 14 }}>
              <div className="field" style={{ marginBottom: 10 }}>
                <label>Template</label>
                <select className="sel"><option>IEC TS 62446-3 · Standard</option><option>Warranty (extended)</option></select>
              </div>
              <label className="row" style={{ gap: 8, fontSize: 12, cursor: "pointer", marginBottom: 6 }}>
                <input type="checkbox" checked={branded} onChange={e => setBranded(e.target.checked)}/>Client branding (Iberdrola)
              </label>
              <label className="row" style={{ gap: 8, fontSize: 12, cursor: "pointer" }}>
                <input type="checkbox" defaultChecked/>Include annex · methodology
              </label>
            </div>
          </div>

          <div className="card">
            <div className="card-hd">Executive summary<span className="sub">AI-drafted · edit below</span></div>
            <div style={{ padding: 14 }}>
              <textarea className="inp" rows={8} style={{ height: "auto", resize: "vertical", fontSize: 12, lineHeight: 1.5 }}
                defaultValue={"The April 2026 thermographic inspection detected 1,204 observations across 460,100 modules (9 critical, 34 high). Weighted site health declined 2.4 points versus the January baseline..."}/>
              <div className="row" style={{ gap: 6, marginTop: 8 }}>
                <button className="btn btn-ghost btn-xs"><Icon name="refresh" size={11}/>Regenerate</button>
                <button className="btn btn-ghost btn-xs">Shorten</button>
                <span className="grow"/>
                <span className="mono muted" style={{ fontSize: 10 }}>84 words</span>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-hd">Versions</div>
            <div style={{ padding: 8 }}>
              {[["v2","current", "you · 4m ago"],["v1","archived","M. Rivera · yesterday"]].map(([v,st,w]) => (
                <div key={v} style={{ display: "flex", gap: 10, padding: "6px 8px", alignItems: "center" }}>
                  <span className="mono" style={{ fontSize: 11, fontWeight: 600 }}>{v}</span>
                  <span className="sec" style={{ fontSize: 11 }}>{w}</span>
                  <span className="grow"/>
                  <Pill tone={st === "current" ? "ok" : ""}><span className="dot"/>{st}</Pill>
                </div>
              ))}
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function AdminPage() {
  const [tab, setTab] = useState("users");
  return (
    <div className="page">
      <div className="page-head">
        <div className="title">
          <div className="kicker">System</div>
          <h1>Users & admin</h1>
          <div className="sub">Tenants, roles, integrations, report templates</div>
        </div>
        <div className="actions">
          <button className="btn btn-primary"><Icon name="plus"/>Invite user</button>
        </div>
      </div>

      <div className="tabs" style={{ marginBottom: 16 }}>
        {[["users","Users"],["tenants","Tenants"],["integrations","Integrations"],["templates","Report templates"],["billing","Billing & cost"]].map(([v,l]) => (
          <button key={v} className={tab === v ? "on" : ""} onClick={()=>setTab(v)}>{l}</button>
        ))}
      </div>

      {tab === "users" && (
        <div className="card">
          <div className="card-hd">Users<span className="sub">12 active</span></div>
          <table className="tbl">
            <thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Sites</th><th>Last seen</th><th>Status</th></tr></thead>
            <tbody>
              {[
                ["Marta Rivera","m.rivera@iberdrola.es","Admin","All","1 min ago","active"],
                ["Tomás Aragón","t.aragon@skyops.pt","Operator","3","23 min ago","active"],
                ["Luís Ferreira","l.ferreira@skyops.pt","Operator","5","1h ago","active"],
                ["Elena Vasconcelos","e.vasconcelos@iberdrola.es","Admin","All","3h ago","active"],
                ["Jordi Montaña","j.montana@iberdrola.es","Viewer","2","yesterday","idle"],
                ["Alba Soriano","a.soriano@skyops.pt","Operator","1","yesterday","invited"],
                ["Helena Duarte","h.duarte@iberdrola.es","Viewer","All","3d ago","active"],
              ].map((u, i) => (
                <tr key={i}>
                  <td><div className="row" style={{ gap: 8 }}>
                    <div style={{ width: 22, height: 22, borderRadius: 99, background: "linear-gradient(135deg,#4a90d9,#7B5EA7)", color:"#fff", fontSize:10, fontWeight:600, display: "grid", placeItems: "center" }}>{u[0].split(" ").map(w=>w[0]).join("")}</div>
                    <span style={{ fontWeight: 500 }}>{u[0]}</span>
                  </div></td>
                  <td className="sec mono" style={{ fontSize: 11 }}>{u[1]}</td>
                  <td><Pill tone={u[2] === "Admin" ? "warn" : ""}><span className="dot"/>{u[2]}</Pill></td>
                  <td className="num sec">{u[3]}</td>
                  <td className="mono sec" style={{ fontSize: 11 }}>{u[4]}</td>
                  <td><Pill tone={u[5] === "active" ? "ok" : u[5] === "invited" ? "warn" : ""}><span className="dot"/>{u[5]}</Pill></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === "integrations" && (
        <div className="grid-3">
          {[
            ["SCADA · Bentek", "radio", "connected", "32 s ago · 7 sites"],
            ["Weather · Meteomatics", "cloud", "connected", "4 min ago · EU-WEST"],
            ["Satellite · Sentinel-2", "satellite", "connected", "2 d ago · 1.2 GB/wk"],
            ["Billing · Stripe", "zap", "connected", "sync daily"],
            ["LLM cost visibility", "activity", "connected", "€412/mo · Haiku"],
            ["DJI FlightHub 2", "drone", "disconnected", "not configured"],
          ].map(([n,i,s,sub]) => (
            <div key={n} className="card">
              <div style={{ padding: 14 }}>
                <div className="row" style={{ gap: 10 }}>
                  <div style={{ width: 30, height: 30, borderRadius: 6, background: "var(--bg-inset)", display: "grid", placeItems: "center" }}>
                    <Icon name={i} size={15}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 500 }}>{n}</div>
                    <div className="sec" style={{ fontSize: 11 }}>{sub}</div>
                  </div>
                  <Pill tone={s === "connected" ? "ok" : "crit"}><span className="dot"/>{s}</Pill>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {(tab === "tenants" || tab === "templates" || tab === "billing") && (
        <div className="card" style={{ padding: 48, textAlign: "center", color: "var(--fg-muted)" }}>
          <Icon name="layers" size={24}/>
          <div style={{ marginTop: 10, fontSize: 13 }}>{tab} — not expanded in this prototype</div>
        </div>
      )}
    </div>
  );
}

window.ReportPage = ReportPage;
window.AdminPage = AdminPage;