/* SkyOps — Site › Team and Site › Overview tabs */

const { useState: uSST } = React;

const ST_ROLES = [
  ["manager", "Site manager", "Accountable for the site · approves work orders and reports"],
  ["om", "O&M lead", "Dispatches maintenance crews · owns work-order execution"],
  ["pilot", "Lead pilot", "Default pilot for inspections at this site"],
  ["analyst", "Reviewing analyst", "Validates detections and signs off reports"],
  ["hse", "HSE contact", "Site access, permits, safety induction"],
  ["owner", "Asset owner contact", "Receives reports and financial impact"],
];
const ST_DEFAULT = {
  "pt-ev-03": { manager: "M. Rivera", om: "R. Pardal", pilot: "T. Aragón", analyst: "I. Duarte", hse: "J. Mota", owner: "E. Vasconcelos" },
};
const stLoad = (id) => { try { return JSON.parse(localStorage.getItem("skyops_site_team_v1") || "{}")[id]; } catch { return null; } };

function SiteTeamTab({ site, go }) {
  const R = window.useRes();
  window.useWOs && window.useWOs();
  const T = window.SKY_TODAY || "2026-04-17";
  const insps = (window.INSPECTIONS || []).filter(i => i.siteId === site.id);
  const wos = (window.woStore?.list || []).filter(w => w.siteId === site.id);
  const lastLead = insps.find(i => i.lead)?.lead;
  const def = ST_DEFAULT[site.id] || { manager: "M. Rivera", om: "J. Mota", pilot: lastLead || "T. Aragón", analyst: "I. Duarte", hse: "S. Lima", owner: "E. Vasconcelos" };
  const [roles, setRoles] = uSST(() => ({ ...def, ...stLoad(site.id) }));
  const [editing, setEditing] = uSST(null);
  const setRole = (k, v) => { const n = { ...roles, [k]: v }; setRoles(n); try { const all = JSON.parse(localStorage.getItem("skyops_site_team_v1") || "{}"); all[site.id] = n; localStorage.setItem("skyops_site_team_v1", JSON.stringify(all)); } catch {} setEditing(null); };
  const people = R.people || [], comps = R.companies || [];
  const byName = (n) => people.find(p => p.name === n);
  const options = [...new Set([...people.map(p => p.name), "I. Duarte", "E. Vasconcelos"])];

  // who is actually working here
  const crew = {};
  const add = (name, what) => { if (!name || name === "Unassigned") return; const base = name.split(" · ")[0].replace(/ \(contractor\)$/, ""); (crew[base] = crew[base] || []).push(what); };
  insps.filter(i => !["closed", "archived"].includes(i.status)).forEach(i => add(i.lead, { t: "insp", id: i.id, s: i.status, d: i.plannedFor || i.startedAt }));
  wos.filter(w => !["done", "verified"].includes(w.status)).forEach(w => add(w.assignee, { t: "wo", id: w.id, s: w.status, d: w.due, title: w.title }));
  const crewList = Object.entries(crew).map(([n, items]) => ({ n, items, p: byName(n), c: comps.find(c => c.name === n) }));
  const contractors = comps.filter(c => wos.some(w => (w.assignee || "").startsWith(c.name)) || /PT|Alentejo|ES/.test(c.region));
  const certIssue = (p) => p && (p.certs || []).find(c => c[1] < window.skyAdd(60));
  const hist = insps.filter(i => i.lead).reduce((a, i) => (a[i.lead] = (a[i.lead] || 0) + 1, a), {});

  return (
    <div className="st">
      <section className="card st-card">
        <div className="st-h"><b>Site roles</b><span className="sec">who is responsible for what at {site.name}</span></div>
        <div className="st-roles">
          {ST_ROLES.map(([k, l, d]) => { const n = roles[k]; const p = byName(n); const iss = certIssue(p);
            return <div key={k} className="st-role">
              <div className="st-role-l"><b>{l}</b><em>{d}</em></div>
              {editing === k ? <select className="sel" autoFocus value={n} onChange={e => setRole(k, e.target.value)} onBlur={() => setEditing(null)}>{options.map(o => <option key={o}>{o}</option>)}</select>
                : <button className="st-who" onClick={() => setEditing(k)} title="Change">
                    <span className="st-av">{n.split(/[ .]+/).filter(Boolean).map(w => w[0]).slice(0, 2).join("")}</span>
                    <span className="st-who-n"><b>{n}</b><em>{p ? `${p.role} · ${p.org}` : k === "analyst" ? "Asset Intelligence" : "Iberdrola Renovables"}</em></span>
                    {iss && <span className="st-warn" title={`${iss[0]} expires ${iss[1]}`}><Icon name="alert" size={11}/></span>}
                    <Icon name="settings" size={11}/>
                  </button>}
            </div>; })}
        </div>
      </section>

      <div className="st-grid">
        <section className="card st-card">
          <div className="st-h"><b>Working on this site now</b><span className="sec">{crewList.length} people & companies · from open inspections and work orders</span></div>
          {crewList.length === 0 && <div className="sec" style={{ fontSize: 12 }}>Nobody is assigned to open work at this site.</div>}
          {crewList.map(({ n, items, p, c }) => { const iss = certIssue(p);
            return <div key={n} className="st-crew">
              <span className="st-av">{n.split(/[ .]+/).filter(Boolean).map(w => w[0]).slice(0, 2).join("")}</span>
              <div className="st-crew-m">
                <div className="st-crew-n"><b>{n}</b>{p && <span className={`fl-st fl-st-${p.status}`}><i/>{p.status.replace("_", " ")}</span>}{(p || c) && <span className="pr-tag pr-tag-kind">{p ? p.kind : "company"}</span>}</div>
                <div className="st-crew-items">{items.map(it => <button key={it.id} className="st-item" onClick={() => go(it.t === "wo" ? "workorders" : "workspace")}><Icon name={it.t === "wo" ? "flag" : "crosshair"} size={10}/><span className="mono">{it.id}</span><em>{it.title ? it.title : it.s}{it.d ? " · " + (it.t === "wo" ? "due " : "") + it.d : ""}</em></button>)}</div>
                {iss && <div className="st-iss"><Icon name="alert" size={10}/>{iss[0]} {iss[1] < T ? "expired" : "expires"} {iss[1]}</div>}
              </div>
            </div>; })}
        </section>

        <div className="st-col">
          <section className="card st-card">
            <div className="st-h"><b>Contractors</b><span className="sec">companies with work or coverage here</span></div>
            {contractors.map(c => <div key={c.id} className="st-co"><Icon name="layers" size={12}/><span><b>{c.name}</b><em>{c.service}</em></span><span className="mono sec st-co-t">{c.contract}<br/>SLA {c.sla}</span></div>)}
          </section>
          <section className="card st-card">
            <div className="st-h"><b>Inspection history by pilot</b></div>
            {Object.entries(hist).sort((a, b) => b[1] - a[1]).map(([n, k]) => <div key={n} className="st-hist"><span>{n}</span><span className="st-hist-bar"><i style={{ width: k / Math.max(...Object.values(hist)) * 100 + "%" }}/></span><b className="mono">{k}</b></div>)}
          </section>
          <section className="card st-card">
            <div className="st-h"><b>Access</b></div>
            {[["Admin", "M. Rivera"], ["Operator", "T. Aragón, R. Pardal, J. Mota"], ["Analyst", "I. Duarte"], ["Viewer", "E. Vasconcelos · asset owner"]].map(([a, b]) => <div key={a} className="ps-kv"><span>{a}</span><b>{b}</b></div>)}
            <button className="cm-link" style={{ alignSelf: "flex-start", marginTop: 4 }} onClick={() => go("fleet")}>Manage people in Fleet & crew →</button>
          </section>
        </div>
      </div>
    </div>
  );
}

function SiteOverviewTab({ site, go, setTab, setActiveMic }) {
  window.useWOs && window.useWOs();
  const T = window.SKY_TODAY || "2026-04-17";
  const insps = (window.INSPECTIONS || []).filter(i => i.siteId === site.id).sort((a, b) => (b.startedAt || b.plannedFor || "").localeCompare(a.startedAt || a.plannedFor || ""));
  const last = insps.find(i => ["closed", "reported", "review"].includes(i.status));
  const next = insps.filter(i => !i.startedAt && i.plannedFor).sort((a, b) => a.plannedFor.localeCompare(b.plannedFor))[0];
  const active = insps.filter(i => ["flying", "capture", "processing", "review"].includes(i.status));
  const wos = (window.woStore?.list || []).filter(w => w.siteId === site.id && !["done", "verified"].includes(w.status));
  const alerts = window.alBuild ? window.alBuild().filter(a => a.siteId === site.id && a.status !== "resolved") : [];
  const prof = window.siteProfile ? window.siteProfile(site) : null;
  return (
    <div className="so">
      {window.CoreStrip && <window.CoreStrip siteId={site.id} title={`Argus · what needs attention at ${site.name}`} limit={3}/>}
      <div className="so-grid">
        <section className="card st-card">
          <div className="st-h"><b>Inspections</b><span className="grow"/><button className="cm-link" onClick={() => setTab("inspections")}>All →</button></div>
          {active.map(i => <button key={i.id} className="wo-src" onClick={() => { setActiveMic(i.id); go("workspace"); }}><span className={`mic-rail-status mic-rail-status-${i.status}`}><span className="mic-rail-dot"/>{i.status}</span><span><b className="mono">{i.id}</b> · {i.cycle}</span><Icon name="arrow_right" size={11}/></button>)}
          <div className="ps-kv"><span>Last completed</span><b>{last ? <span className="mono">{last.id} · {last.startedAt}</span> : "—"}</b></div>
          <div className="ps-kv"><span>Next planned</span><b>{next ? <span className="mono">{next.id} · {next.plannedFor}</span> : <button className="cm-link" onClick={() => window.dispatchEvent(new CustomEvent("skyops:new-insp", { detail: { siteId: site.id } }))}>Schedule next cycle →</button>}</b></div>
          {last && <div className="ps-kv"><span>Last cycle findings</span><b className="mono">{(last.detections || 0).toLocaleString("en-US")} · {last.critical || 0} critical · {last.coverage || 0}% coverage</b></div>}
        </section>
        <section className="card st-card">
          <div className="st-h"><b>Open work orders</b><span className="mono sec">{wos.length}</span><span className="grow"/><button className="cm-link" onClick={() => setTab("workorders")}>All →</button></div>
          {wos.slice(0, 5).map(w => <button key={w.id} className="wo-src" onClick={() => go("workorders")}><span className={`wo-prio wo-prio-${w.prio}`}>{w.prio}</span><span><b className="mono">{w.id}</b> {w.title}<em className={`so-due ${w.due < T ? "late" : ""}`}> · due {w.due}</em></span><Icon name="arrow_right" size={11}/></button>)}
          {wos.length === 0 && <div className="sec" style={{ fontSize: 11.5 }}>No open work orders.</div>}
        </section>
        <section className="card st-card">
          <div className="st-h"><b>Active alerts</b><span className="mono sec">{alerts.length}</span><span className="grow"/><button className="cm-link" onClick={() => go("alerts")}>All →</button></div>
          {alerts.slice(0, 5).map(a => <button key={a.id} className="wo-src" onClick={() => go("alerts")}><span className={`sev ${a.sev}`}>{a.sev}</span><span>{a.title}</span><Icon name="arrow_right" size={11}/></button>)}
          {alerts.length === 0 && <div className="sec" style={{ fontSize: 11.5 }}>No active alerts.</div>}
        </section>
        <section className="card st-card">
          <div className="st-h"><b>Site facts</b><span className="grow"/><button className="cm-link" onClick={() => go("siteconfig")}>Edit site →</button></div>
          {[["Capacity", `${site.capacity_mw.toFixed(1)} MWp`], ["Modules", site.panels.toLocaleString("en-US")], ["Region", site.region], ["Mounting", prof?.mount || (site.tracker ? "Single-axis tracker" : "Fixed tilt")], ["Module model", prof?.module || site.model || "—"], ["Zones", prof?.zones ? prof.zones.length : "—"]].map(([a, b]) => <div key={a} className="ps-kv"><span>{a}</span><b>{b}</b></div>)}
        </section>
      </div>
    </div>
  );
}

Object.assign(window, { SiteTeamTab, SiteOverviewTab });