/* Portfolio Dashboard */

function PortfolioPage({ go, setActiveSite }) {
  const [filter, setFilter] = useState("all");
  const [sortKey, setSortKey] = useState("health");

  const stats = useMemo(() => {
    const total_mw = SITES.reduce((a, s) => a + s.capacity_mw, 0);
    const total_panels = SITES.reduce((a, s) => a + s.panels, 0);
    const crit = SITES.reduce((a, s) => a + s.criticals, 0);
    const warn = SITES.reduce((a, s) => a + s.warnings, 0);
    const health = Math.round(SITES.reduce((a, s) => a + s.health * s.capacity_mw, 0) / total_mw);
    return { total_mw, total_panels, crit, warn, health };
  }, []);

  const filtered = useMemo(() => {
    let rows = [...SITES];
    if (filter === "crit") rows = rows.filter(s => s.criticals > 0);
    if (filter === "due")  rows = rows.filter(s => new Date(s.nextInspection) < new Date("2026-06-01"));
    if (filter === "pt")   rows = rows.filter(s => s.region.endsWith("PT"));
    if (filter === "es")   rows = rows.filter(s => s.region.endsWith("ES"));
    rows.sort((a, b) => {
      if (sortKey === "health") return a.health - b.health;
      if (sortKey === "capacity") return b.capacity_mw - a.capacity_mw;
      if (sortKey === "alerts") return b.alerts - a.alerts;
      if (sortKey === "name") return a.name.localeCompare(b.name);
      return 0;
    });
    return rows;
  }, [filter, sortKey]);

  const sparkSeries = [86, 84, 82, 85, 83, 82, 81, 83, 86, 88, 87, 89, 88, 87, 88];

  return (
    <div className="page">
      <div className="page-head">
        <div className="title">
          <div className="kicker">Common operational picture</div>
          <h1>Portfolio</h1>
          <div className="sub">7 sites · 891.5 MW under management · last refreshed 38 s ago</div>
        </div>
        <div className="actions">
          <button className="btn btn-secondary"><Icon name="refresh" />Refresh</button>
          <button className="btn btn-secondary"><Icon name="download" />Export</button>
          <button className="btn btn-primary" onClick={() => window.dispatchEvent(new CustomEvent("skyops:new-insp",{detail:{}}))}><Icon name="plus" />New inspection</button>
        </div>
      </div>

      {window.CoreStrip && <window.CoreStrip title="Today's decisions across the portfolio" limit={3}/>}
      <div className="grid-6" style={{ marginBottom: 16 }}>
        <div className="card stat">
          <span className="lbl">Weighted health</span>
          <span className="val num">{stats.health}<span className="unit">/100</span></span>
          <span className="sub"><span className="trend-up">▲ 1.4</span> vs. 30d</span>
          <Sparkline values={sparkSeries} color="var(--health-ok)" />
        </div>
        <div className="card stat">
          <span className="lbl">Capacity</span>
          <span className="val num">891.5<span className="unit">MW</span></span>
          <span className="sub">1.95M panels</span>
        </div>
        <div className="card stat">
          <span className="lbl">Critical open</span>
          <span className="val num" style={{ color: "var(--sev-critical)" }}>{stats.crit}</span>
          <span className="sub"><span className="trend-dn">▼ 3</span> vs. last week</span>
        </div>
        <div className="card stat">
          <span className="lbl">High/medium open</span>
          <span className="val num" style={{ color: "var(--sev-high)" }}>{stats.warn}</span>
          <span className="sub">67 resolved this month</span>
        </div>
        <div className="card stat">
          <span className="lbl">Active missions</span>
          <span className="val num">3</span>
          <span className="sub">2 review · 1 processing</span>
        </div>
        <div className="card stat">
          <span className="lbl">Est. yield impact</span>
          <span className="val num">€84.2k<span className="unit">/mo</span></span>
          <span className="sub">From open critical + high</span>
        </div>
      </div>

      <div className="grid-3" style={{ gridTemplateColumns: "minmax(0,2fr) minmax(0,1fr)", gap: 16 }}>
        <div className="card">
          <div className="card-hd">
            Sites
            <span className="sub">{filtered.length} of {SITES.length}</span>
            <div className="actions">
              <div className="seg" role="tablist" aria-label="Filter">
                {[
                  ["all","All"], ["crit","Critical"], ["due","Due ≤ May"],
                  ["es","ES"], ["pt","PT"],
                ].map(([v,l]) => (
                  <button key={v} className={filter===v?"on":""} onClick={() => setFilter(v)}>{l}</button>
                ))}
              </div>
            </div>
          </div>
          <div style={{ maxHeight: 520, overflow: "auto" }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th onClick={() => setSortKey("name")} style={{ cursor: "pointer" }}>Site</th>
                  <th>Region</th>
                  <th className="r" onClick={() => setSortKey("capacity")} style={{ cursor: "pointer" }}>MW</th>
                  <th className="r" onClick={() => setSortKey("health")} style={{ cursor: "pointer" }}>Health</th>
                  <th>Open</th>
                  <th>Coverage</th>
                  <th>Next inspection</th>
                  <th className="r" onClick={() => setSortKey("alerts")} style={{ cursor: "pointer" }}>Alerts</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(s => {
                  const tone = s.health >= 90 ? "ok" : s.health >= 80 ? "warn" : "crit";
                  return (
                    <tr key={s.id} onClick={() => { setActiveSite(s.id); go("site"); }}>
                      <td>
                        <div style={{ display:"flex", flexDirection:"column", gap:2 }}>
                          <span style={{ fontWeight: 500 }}>{s.name}</span>
                          <span className="mono" style={{ fontSize:10, color:"var(--fg-muted)" }}>{s.id.toUpperCase()}</span>
                        </div>
                      </td>
                      <td className="sec">{s.region}</td>
                      <td className="r num">{s.capacity_mw.toFixed(1)}</td>
                      <td className="r">
                        <div style={{ display:"flex", justifyContent:"flex-end", alignItems:"center", gap:8 }}>
                          <span className="num" style={{ fontWeight:600, color:`var(--health-${tone==="ok"?"ok":tone==="warn"?"warn":"crit"})` }}>{s.health}</span>
                          <div style={{ width: 50 }}>
                            <div style={{ height: 4, background: "var(--bg-inset)", borderRadius: 99, overflow:"hidden" }}>
                              <div style={{ width: `${s.health}%`, height: "100%", background: `var(--health-${tone==="ok"?"ok":tone==="warn"?"warn":"crit"})` }} />
                            </div>
                          </div>
                        </div>
                      </td>
                      <td>
                        <div style={{ display:"flex", gap:6 }}>
                          {s.criticals > 0 && <Pill tone="crit"><span className="dot"/>{s.criticals}</Pill>}
                          {s.warnings > 0 && <Pill tone="warn"><span className="dot"/>{s.warnings}</Pill>}
                        </div>
                      </td>
                      <td><span className="num sec">{s.coverage.toFixed(1)}%</span></td>
                      <td className="mono sec" style={{ fontSize: 11 }}>{s.nextInspection}</td>
                      <td className="r num">
                        {s.alerts > 0
                          ? <span style={{ color: s.alerts > 5 ? "var(--sev-critical)" : "var(--sev-high)", fontWeight: 600 }}>{s.alerts}</span>
                          : <span className="muted">–</span>}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        <div className="col" style={{ gap: 16 }}>
          <div className="card">
            <div className="card-hd">
              Active alerts
              <span className="sub">Acknowledge from detail</span>
              <div className="actions"><button className="btn btn-ghost btn-xs" onClick={() => go("inspections")}>Open inspections</button></div>
            </div>
            <div style={{ padding: 4 }}>
              {ALERTS.map(a => (
                <div key={a.id} style={{ display:"flex", alignItems:"flex-start", gap:10, padding:"10px 10px", borderBottom:"1px solid var(--border-base)" }}>
                  <div style={{ width: 3, alignSelf:"stretch", borderRadius:3, background: a.sev === "critical" ? "var(--sev-critical)" : a.sev === "high" ? "var(--sev-high)" : "var(--sev-medium)" }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                      <Sev level={a.sev} />
                      <span style={{ fontWeight:500 }}>{a.kind}</span>
                    </div>
                    <div className="sec" style={{ fontSize:11, marginTop:2 }}>{a.site} · <span className="mono">{a.mic}</span></div>
                  </div>
                  <span className="mono muted" style={{ fontSize:10 }}>{a.when}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-hd">Recent activity<span className="sub">Last 2h</span></div>
            <div style={{ padding: 6 }}>
              {ACTIVITY.map((a, i) => (
                <div key={i} style={{ display:"flex", gap:10, padding:"8px 8px", borderRadius:6 }}>
                  <span className="mono muted" style={{ fontSize:10, width:32, flexShrink:0, marginTop:2 }}>{a.t}</span>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:12 }}><span style={{fontWeight:500}}>{a.who}</span> <span className="sec">{a.what}</span></div>
                    <div className="sec" style={{ fontSize:11, marginTop:2 }}>{a.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PortfolioPage = PortfolioPage;