/* SkyOps — My profile. Adapts to what the person does:
   field (pilot / technician) · analyst (thermography & performance) · manager (site / service) · executive (portfolio).
   Crew-linked fields (certs, status, phone) are shared with Fleet & crew. */

const { useState: uSPR } = React;

const PR_P = {
  pilot:        { type: "field",    person: "P-01", title: "Pilot · thermographer", org: "Iberdrola O&M", role: ["Operator", "Fly missions, capture, review detections, create work orders"] },
  analyst:      { type: "analyst",  person: null,   title: "PV performance & thermography analyst", org: "Iberdrola Renovables · Asset Intelligence", role: ["Analyst", "Validate detections, sign off reports, run temporal and production analysis. No flight or asset admin."] },
  site_manager: { type: "manager",  person: "P-03", title: "Site manager", org: "Iberdrola Renovables", role: ["Admin", "Full access to sites, inspections, reports, users and billing"] },
  service_mgr:  { type: "manager",  person: "P-02", title: "Service company manager", org: "AeroScan Ibérica", role: ["Operator", "Schedule jobs, assign crew, view margin and SLA"] },
  portfolio:    { type: "exec",     person: null,   title: "Portfolio manager", org: "Iberdrola Renovables", role: ["Viewer", "Read-only portfolio, production and financial views · export reports"] },
};
const PR_NOTIF = {
  field:   [["wo", "Work assigned to me", "missions, work orders"], ["wx", "Flight weather changes", "no-fly windows on my planned days"], ["certs", "Certificate expiry", "60 / 30 / 7 days before"], ["crit", "Critical alerts on my sites", "safety, SCADA trips"]],
  analyst: [["queue", "Review queue ready", "processing finished on an inspection I review"], ["signoff", "Reports awaiting my sign-off", ""], ["disagree", "AI–reviewer disagreement", "when my reclassification conflicts with the model or a peer"], ["drift", "Model drift on my classes", "confidence drops on defect classes I validate"], ["watch", "Watchlist thresholds", "PR, availability or loss crosses a limit on a site I follow"], ["digest", "Weekly analysis digest", "Mondays 08:00"]],
  manager: [["crit", "Critical alerts", "SCADA trips, critical detections, safety"], ["argus", "Argus decisions", "new decisions on my sites"], ["sla", "SLA at risk", "reports or work orders close to deadline"], ["insp", "Inspection milestones", "report ready, review done"], ["digest", "Weekly digest", "Mondays 08:00"]],
  exec:    [["digest", "Weekly portfolio digest", "KPIs, losses, top decisions"], ["fin", "Financial impact over threshold", "single event > €25,000"], ["report", "Reports published", ""]],
};
const PR_DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const PR_AV = { available: ["Available", "var(--sev-low)"], mission: ["On mission", "var(--accent-primary)"], off: ["Off", "var(--fg-disabled)"] };
const PR_AN_CERTS = [["Thermography Level 3 (ISO 18436-7)", "2028-02-10"], ["IEC TS 62446-3 assessor training", "2027-09-01"], ["PV performance monitoring (IEC 61724-1)", "2026-05-30"]];
const PR_AN_CLASSES = [["Hot Cell", 96.8, 1240], ["Activated Bypass Diode", 95.1, 412], ["PID", 91.4, 318], ["Module Cracking", 88.2, 207], ["Soiling", 97.3, 655], ["Delamination", 84.6, 96], ["Offline String", 98.9, 141]];

function prStore() { try { return JSON.parse(localStorage.getItem("skyops_profile_v1") || "{}"); } catch { return {}; } }

function ProfilePage({ persona, personaName, go, setActiveSite, setActiveMic, setWsStage }) {
  const R = window.useRes();
  const cfg = PR_P[persona] || PR_P.pilot;
  const type = cfg.type;
  const person = cfg.person ? (R.people || []).find(x => x.id === cfg.person) : null;
  const T = window.SKY_TODAY || "2026-04-17";
  const notifs = PR_NOTIF[type];
  const mail = personaName.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z ]/g, "").replace(" ", ".") + "@iberdrola.com";
  const [p, setP] = uSPR(() => ({ email: mail, phone: person?.phone || "+34 600 412 077", region: person?.region || "Madrid", notif: Object.fromEntries(notifs.map(([k], i) => [k, i < 2 ? ["push", "email"] : ["email"]])), avail: ["available", "available", "mission", "mission", "available", "off", "off"], mfa: true, watch: ["pt-ev-03", "es-mu-02"], ...prStore()[persona] }));
  const [edit, setEdit] = uSPR(false);
  const [f, setF] = uSPR(p);
  const [saved, setSaved] = uSPR(null);
  const save = (np) => { setP(np); const all = prStore(); all[persona] = np; localStorage.setItem("skyops_profile_v1", JSON.stringify(all)); if (person && window.resStore) window.resStore.set(d => ({ ...d, people: d.people.map(x => x.id === person.id ? { ...x, phone: np.phone, region: np.region } : x) })); setSaved("Saved"); setTimeout(() => setSaved(null), 1600); };
  const short = person ? person.name : personaName;
  const [role, roleD] = cfg.role;
  const initials = personaName.split(" ").map(w => w[0]).slice(0, 2).join("");
  const S = window.SITES || [], I = window.INSPECTIONS || [];
  const sName = (id) => S.find(s => s.id === id)?.name;
  const certSt = (d) => d < T ? ["Expired", "crit"] : d < window.skyAdd(60) ? ["Expires soon", "warn"] : ["Valid", "ok"];
  const notifOf = (k) => p.notif[k] || [];
  const togN = (k, ch) => save({ ...p, notif: { ...p.notif, [k]: notifOf(k).includes(ch) ? notifOf(k).filter(x => x !== ch) : [...notifOf(k), ch] } });
  const openMic = (i, stage) => { setActiveSite(i.siteId); setActiveMic(i.id); setWsStage && setWsStage(stage); go("workspace"); };

  const insps = I.filter(i => i.lead === short && !["closed", "archived"].includes(i.status));
  const wos = (window.woStore?.list || []).filter(w => (w.assignee || "").startsWith(short) && !["done", "verified"].includes(w.status));
  const reviewQ = I.filter(i => ["review", "processing"].includes(i.status));
  const signoff = I.filter(i => ["reported", "review"].includes(i.status) || (i.progress && i.progress.review && !i.progress.reported)).filter(i => i.status !== "processing").slice(0, 3);
  const pend = (window.DETECTIONS || []).filter(d => d.review === "pending").length;
  const mySites = type === "manager" ? S.filter(s => persona === "site_manager" ? ["es-mu-02", "es-ab-01", "es-ca-05"].includes(s.id) : true).slice(0, 4) : [];

  const stats = {
    field: [["Flight hours · 12 mo", "186"], ["Missions · 12 mo", "41"], ["Coverage achieved", "97.2%"], ["Re-flies", "3"]],
    analyst: [["Detections validated · 12 mo", "3,069"], ["Agreement with consensus", "94.6%"], ["Median time / detection", "18 s"], ["Reports signed off", "27"]],
    manager: [["Sites", mySites.length], ["Open work orders", (window.woStore?.list || []).filter(w => mySites.some(s => s.id === w.siteId) && !["done", "verified"].includes(w.status)).length], ["SLA met · 90 d", "96.0%"], ["Decisions approved · 30 d", "14"]],
    exec: [["Sites in scope", S.length], ["Capacity", S.reduce((a, s) => a + s.capacity_mw, 0).toFixed(1) + " MWp"], ["Reports received · 12 mo", 22], ["Exports · 12 mo", 37]],
  }[type];
  const certs = type === "analyst" ? PR_AN_CERTS : person ? person.certs : [];
  const skills = type === "analyst" ? ["Thermography", "Review", "Performance analysis", "Temporal analysis", "Report sign-off"] : person ? person.skills : [];

  const Card = ({ title, sub, right, children }) => <section className="card pr-card"><div className="pr-h"><b>{title}</b>{sub && <span className="sec">{sub}</span>}<span className="grow"/>{right}</div>{children}</section>;

  const contact = <Card title="Contact & details" right={<>{saved && <span className="pr-saved"><Icon name="check" size={11}/>{saved}</span>}
      <button className={`btn btn-xs ${edit ? "btn-primary" : "btn-secondary"}`} onClick={() => { if (edit) save(f); else setF(p); setEdit(!edit); }}>{edit ? "Save" : "Edit"}</button>
      {edit && <button className="btn btn-ghost btn-xs" onClick={() => setEdit(false)}>Cancel</button>}</>}>
    {edit ? <div className="wo-dr-grid">{[["email", "Email"], ["phone", "Phone"], ["region", type === "field" ? "Base region" : "Office"]].map(([k, l]) => <label key={k} className="field"><span>{l}</span><input className="inp" value={f[k]} onChange={e => setF(x => ({ ...x, [k]: e.target.value }))}/></label>)}</div>
      : [["Email", p.email], ["Phone", p.phone], [type === "field" ? "Base region" : "Office", p.region]].map(([a, b]) => <div key={a} className="ps-kv"><span>{a}</span><b className={a === "Phone" ? "mono" : ""}>{b}</b></div>)}
    <div className="ps-kv"><span>Language · time zone · units</span><b><button className="cm-link" onClick={() => go("settings")}>English · Europe/Madrid · metric →</button></b></div>
  </Card>;

  const access = <Card title="Role & access">
    <div className="pr-access"><span className="pr-role pr-role-lg">{role}</span><span>{roleD}</span></div>
    <div className="ps-kv"><span>Sites</span><b>{type === "field" ? [...new Set(insps.map(i => sName(i.siteId)))].filter(Boolean).join(", ") || "Assigned sites only" : type === "manager" ? mySites.map(s => s.name).join(", ") : "All sites in tenant"}</b></div>
    {type === "analyst" && <div className="ps-kv"><span>Can sign off</span><b>Reports · IEC TS 62446-3 · up to "critical"</b></div>}
    <div className="ps-kv"><span>Managed by</span><b>Tenant admin · Marta Rivera</b></div>
  </Card>;

  const quals = certs.length > 0 && <Card title={type === "analyst" ? "Expertise & qualifications" : "Qualifications"} sub={person ? "shared with Fleet & crew" : null} right={<button className="btn btn-ghost btn-xs"><Icon name="upload" size={11}/>Upload renewal</button>}>
    {certs.map(([n, d]) => { const [l, c] = certSt(d); return <div key={n} className="pr-cert"><Icon name="shield" size={13}/><span><b>{n}</b><em className="mono">valid until {d}</em></span><span className={`pr-cst ${c}`}>{l}</span></div>; })}
    <div className="pr-skills">{skills.map(s => <span key={s} className="pr-tag">{s}</span>)}</div>
  </Card>;

  const notif = <Card title="Notifications">
    <div className="pr-nt"><span/><span className="caps">Push</span><span className="caps">Email</span></div>
    {notifs.map(([k, l, d]) => <div key={k} className="pr-nt"><span><b>{l}</b>{d && <em>{d}</em>}</span>{["push", "email"].map(ch => <label key={ch} className="pr-ck"><input type="checkbox" checked={notifOf(k).includes(ch)} onChange={() => togN(k, ch)}/></label>)}</div>)}
  </Card>;

  const security = <Card title="Security">
    <div className="ps-kv"><span>Sign-in</span><b>Iberdrola SSO · Azure AD</b></div>
    <div className="ps-kv"><span>Two-factor authentication</span><b><label className="pr-tog"><input type="checkbox" checked={p.mfa} onChange={() => save({ ...p, mfa: !p.mfa })}/><span>{p.mfa ? "On · authenticator app" : "Off"}</span></label></b></div>
    {type === "analyst" && <div className="ps-kv"><span>API token</span><b className="mono">sk_live_…9f2c · read-only · <button className="cm-link">Rotate</button></b></div>}
    <div className="caps" style={{ marginTop: 8 }}>Active sessions</div>
    {[["Chrome · macOS", "Madrid · this device", true], type === "field" ? ["SkyOps Field · iPad", "Évora · 2 days ago", false] : ["Edge · Windows", "Madrid HQ · yesterday", false]].map(([a, b, cur]) => <div key={a} className="pr-sess"><Icon name={cur ? "grid" : "phone"} size={12}/><span><b>{a}</b><em>{b}</em></span>{cur ? <span className="pr-tag">Current</span> : <button className="btn btn-ghost btn-xs">Sign out</button>}</div>)}
  </Card>;

  /* type-specific */
  const fieldWork = <Card title="My work" sub={`${insps.length} inspections · ${wos.length} work orders open`}>
    {insps.map(i => <button key={i.id} className="wo-src" onClick={() => openMic(i, "plan")}><Icon name="crosshair" size={12}/><span><b className="mono">{i.id}</b> · {sName(i.siteId)} · {i.status}{i.plannedFor && !i.startedAt ? " · " + i.plannedFor : ""}</span><Icon name="arrow_right" size={11}/></button>)}
    {wos.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} · due {w.due}</span><Icon name="arrow_right" size={11}/></button>)}
    {insps.length + wos.length === 0 && <div className="sec" style={{ fontSize: 11.5 }}>Nothing assigned to you right now.</div>}
  </Card>;
  const availability = <Card title="Availability · this week" sub="click a day to change · used by scheduling">
    <div className="pr-week">{PR_DAYS.map((d, i) => { const [l, c] = PR_AV[p.avail[i]]; return <button key={d} onClick={() => { const o = Object.keys(PR_AV); save({ ...p, avail: p.avail.map((a, j) => j === i ? o[(o.indexOf(a) + 1) % o.length] : a) }); }} style={{ "--c": c }}><span>{d}</span><i/><em>{l}</em></button>; })}</div>
  </Card>;

  const analystWork = <Card title="My analysis work" sub={`${pend} detections pending · ${signoff.length} reports to sign off`}>
    <div className="caps">Review queues</div>
    {reviewQ.map(i => <button key={i.id} className="wo-src" onClick={() => openMic(i, "review")}><Icon name="eye" size={12}/><span><b className="mono">{i.id}</b> · {sName(i.siteId)} · {i.status === "review" ? `${i.detections || 0} detections` : "processing — ready soon"}</span><Icon name="arrow_right" size={11}/></button>)}
    <div className="caps" style={{ marginTop: 6 }}>Awaiting my sign-off</div>
    {signoff.length === 0 && <div className="sec" style={{ fontSize: 11.5 }}>No reports waiting. Drafts appear here when review is complete.</div>}
    {signoff.map(i => <button key={i.id} className="wo-src" onClick={() => openMic(i, "report")}><Icon name="file" size={12}/><span><b className="mono">{i.id}</b> · {sName(i.siteId)} · {i.status === "reported" ? "report draft" : "report draft after review"}</span><Icon name="arrow_right" size={11}/></button>)}
    <div className="caps" style={{ marginTop: 6 }}>Saved analyses</div>
    {[["Évora · Q3 25 → Q2 26 temporal comparison", "compare", "pt-ev-03"], ["Portfolio · production losses by cause, YTD", "portfolio", null], ["Lorca · soiling vs rainfall, 12 mo", "site", "es-mu-02"]].map(([l, r, sid]) => <button key={l} className="wo-src" onClick={() => { if (sid) setActiveSite(sid); go(r); }}><Icon name="layers" size={12}/><span>{l}</span><Icon name="arrow_right" size={11}/></button>)}
  </Card>;
  const quality = <Card title="Review quality" sub="last 12 months · by defect class">
    <div className="pr-q-h"><span>Class</span><span>Agreement with consensus</span><span className="r">Validated</span></div>
    {PR_AN_CLASSES.map(([c, a, n]) => <div key={c} className="pr-q"><span>{c}</span><span className="pr-q-bar"><i style={{ width: (a - 70) / 30 * 100 + "%", background: a >= 95 ? "var(--sev-low)" : a >= 90 ? "var(--accent-primary)" : "var(--sev-medium)" }}/><b className="mono">{a.toFixed(1)}%</b></span><span className="mono r sec">{n.toLocaleString("en-US")}</span></div>)}
    <div className="pr-q-note"><Icon name="sparkles" size={11}/><span>Your reclassifications of <b>Delamination</b> disagree with the model 15% of the time. Argus uses them as training feedback once a second analyst confirms.</span></div>
  </Card>;
  const watch = <Card title="Watchlist" sub="sites I follow · alerts when thresholds cross">
    {S.map(s => { const on = p.watch.includes(s.id); return <label key={s.id} className="pr-w"><input type="checkbox" checked={on} onChange={() => save({ ...p, watch: on ? p.watch.filter(x => x !== s.id) : [...p.watch, s.id] })}/><span><b>{s.name}</b><em>{s.capacity_mw} MWp · health {s.health}/100</em></span>{on && <span className="mono sec">PR &lt; 80% · loss &gt; 2%</span>}</label>; })}
  </Card>;

  const mgrSites = <Card title="My sites" sub="responsibility">
    {mySites.map(s => <button key={s.id} className="wo-src" onClick={() => { setActiveSite(s.id); go("site"); }}><Icon name="map" size={12}/><span><b>{s.name}</b> · {s.capacity_mw} MWp · health {s.health}/100{s.criticals ? ` · ${s.criticals} critical` : ""}</span><Icon name="arrow_right" size={11}/></button>)}
  </Card>;
  const delegation = <Card title="Approvals & delegation">
    <div className="ps-kv"><span>Approve work orders up to</span><b className="mono">€5,000</b></div>
    <div className="ps-kv"><span>Approve warranty / insurance claims</span><b>Yes</b></div>
    <div className="ps-kv"><span>Out-of-office delegate</span><b>— <button className="cm-link">Set delegate</button></b></div>
  </Card>;
  const execReports = <Card title="Report subscriptions">
    {[["Monthly portfolio performance", "PDF · 1st of month"], ["Quarterly inspection summary · all sites", "PDF · after each cycle"], ["Financial impact & recovered value", "XLSX · monthly"]].map(([a, b]) => <div key={a} className="pr-sess"><Icon name="file" size={12}/><span><b>{a}</b><em>{b}</em></span><span className="pr-tag">Subscribed</span></div>)}
  </Card>;

  const left = { field: [contact, access, quals], analyst: [contact, access, quals, watch], manager: [contact, access, delegation, quals], exec: [contact, access, execReports] }[type];
  const right = { field: [fieldWork, availability, notif, security], analyst: [analystWork, quality, notif, security], manager: [mgrSites, notif, security], exec: [notif, security] }[type];

  return (
    <div className="page pr">
      <div className="pr-hero">
        <span className="pr-av">{initials}</span>
        <div className="pr-id">
          <h1>{personaName}</h1>
          <div className="pr-sub">{person ? person.role : cfg.title} · {person ? person.org : cfg.org}</div>
          <div className="pr-tags">
            <span className="pr-role">{role}</span>
            {person && <span className={`fl-st fl-st-${person.status}`}><i/>{person.status.replace("_", " ")}</span>}
            {person && <span className="pr-tag pr-tag-kind">{person.kind}</span>}
            <span className="pr-tag mono">{localStorage.getItem("skyops_tenant") || "Iberdrola Renovables"}</span>
          </div>
        </div>
        <div className="pr-stats">{stats.map(([l, v]) => <div key={l}><b className="mono">{v}</b><span>{l}</span></div>)}</div>
      </div>
      <div className="pr-grid">
        <div className="pr-col">{left.filter(Boolean).map((c, i) => <React.Fragment key={i}>{c}</React.Fragment>)}</div>
        <div className="pr-col">{right.filter(Boolean).map((c, i) => <React.Fragment key={i}>{c}</React.Fragment>)}</div>
      </div>
    </div>
  );
}

window.ProfilePage = ProfilePage;