/* Shared UI: Shell (sidebar + topbar + tweaks), common components */

const { useState, useEffect, useMemo, useRef, useCallback } = React;

/* ------------ Tweaks (persisted via edit_mode) ------------ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "blue",
  "persona": "site_manager"
}/*EDITMODE-END*/;

function useTweaks() {
  const [tweaks, setTweaks] = useState(() => {
    try {
      const saved = localStorage.getItem("skyops_tweaks");
      if (saved) return { ...TWEAK_DEFAULTS, ...JSON.parse(saved) };
    } catch {}
    return TWEAK_DEFAULTS;
  });
  const [editMode, setEditMode] = useState(false);

  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.dataset.accent = tweaks.accent;
    document.documentElement.dataset.persona = tweaks.persona;
    try { localStorage.setItem("skyops_tweaks", JSON.stringify(tweaks)); } catch {}
  }, [tweaks]);

  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setEditMode(true);
      if (d.type === "__deactivate_edit_mode") setEditMode(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const update = (patch) => {
    setTweaks(t => ({ ...t, ...patch }));
    try {
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
    } catch {}
  };

  return { tweaks, update, editMode };
}

function TweaksPanel({ tweaks, update, visible }) {
  if (!visible) return null;
  return (
    <div className="tweaks" role="dialog" aria-label="Tweaks">
      <h4>Tweaks</h4>
      <div className="row-between">
        <span className="sec">Theme</span>
        <div className="seg">
          {["dark","light"].map(v => (
            <button key={v} className={tweaks.theme === v ? "on" : ""} onClick={() => update({ theme: v })}>{v}</button>
          ))}
        </div>
      </div>
      <div className="row-between">
        <span className="sec">Accent</span>
        <div className="seg">
          {["blue","cyan","violet"].map(v => (
            <button key={v} className={tweaks.accent === v ? "on" : ""} onClick={() => update({ accent: v })}>{v}</button>
          ))}
        </div>
      </div>
      <div className="row-between">
        <span className="sec">Persona</span>
        <select className="sel" style={{ width: 150, height: 26, padding: "0 8px", fontSize: 11 }}
                value={tweaks.persona} onChange={(e) => update({ persona: e.target.value })}>
          <option value="pilot">Drone Pilot</option>
          <option value="analyst">Analyst</option>
          <option value="site_manager">Site Manager</option>
          <option value="service_mgr">Service Co. Mgr</option>
          <option value="portfolio">Portfolio Manager</option>
        </select>
      </div>
      <div style={{ fontSize: 10, color: "var(--fg-muted)", marginTop: 8, borderTop: "1px solid var(--border-base)", paddingTop: 8 }}>
        Persona changes sidebar focus and surface defaults. Edits persist to localStorage.
      </div>
    </div>
  );
}

/* ------------ Brand ------------ */
function Brand() {
  return (
    <div className="sb-brand">
      <div className="sb-glyph" aria-label="SkyOps">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 18 L12 4 L20 18" />
          <path d="M8 18 L12 11 L16 18" opacity="0.55" />
        </svg>
      </div>
      <div className="sb-wordmark"><b>Sky</b>Ops</div>
      <div className="sb-tag">INTEL</div>
    </div>
  );
}

/* ------------ Sidebar ------------ */
const NAV = [
  { section: "Intelligence", hint: "the value", items: [
    { id: "portfolio",   label: "Portfolio", icon: "grid", tab: "ops" },
    { id: "insights",    label: "Production & losses", icon: "zap", tab: "production" },
    { id: "financial",   label: "Financial impact", icon: "tag", tab: "financial" },
    { id: "compare",     label: "Temporal intelligence", icon: "history" },
    { id: "alerts",      label: "Alerts", icon: "bell", get badge() { return window.alOpenCount ? window.alOpenCount() || null : null; } },
    { id: "zonereport",  label: "Reports", icon: "file" },
    { id: "warranty",    label: "Warranty recovery", icon: "shield" },
  ]},
  { section: "Operations", hint: "the means", items: [
    { id: "sites",       label: "Sites", icon: "layers" },
    { id: "inspections", label: "Inspections", icon: "crosshair", get badge() { return (window.INSPECTIONS || []).filter(i => !["closed", "archived"].includes(i.status)).length; } },
    { id: "workorders",  label: "Work orders", icon: "flag" },
    { id: "fleet",       label: "Fleet & crew", icon: "drone" },
    { id: "field",       label: "Field app", icon: "phone" },
    { id: "calendar",    label: "Calendar", icon: "calendar" },
  ]},
  { section: "Business", items: [
    { id: "commercial", label: "Commercial", icon: "tag" },
  ]},
  { section: "System", items: [
    { id: "admin",     label: "Users & admin", icon: "users" },
    { id: "settings",  label: "Settings", icon: "settings" },
  ]},
];

function Sidebar({ route, go }) {
  const [, setTick] = React.useState(0);
  React.useEffect(() => {
    const f = () => setTick(t => t + 1);
    window.addEventListener("skyops:phtab", f);
    const stores = [window.coreStore, window.alStore].filter(Boolean);
    stores.forEach(s => s.subs.add(f));
    const unsubWo = window.woStore ? (window.woStore.subs.add(f), () => window.woStore.subs.delete(f)) : null;
    return () => { window.removeEventListener("skyops:phtab", f); stores.forEach(s => s.subs.delete(f)); unsubWo && unsubWo(); };
  }, []);
  return (
    <aside className="sidebar" aria-label="Primary">
      <Brand />
      <nav style={{ overflow: "auto", flex: 1 }}>
        {NAV.map((sect) => (
          <div key={sect.section}>
            <div className="sb-section">{sect.section}{sect.hint && <em className="sb-hint">{sect.hint}</em>}</div>
            <div className="sb-nav">
              {sect.items.map(it => (
                <a key={it.id}
                   className={(it.tab ? route === "portfolio" && (window.__phTab || "ops") === it.tab : route === it.id) ? "active" : ""}
                   onClick={(e) => { e.preventDefault(); if (it.tab) { localStorage.setItem("skyops_ph_jump", it.tab); window.dispatchEvent(new CustomEvent("skyops:phtab-set", { detail: it.tab })); go("portfolio"); } else go(it.id); }}
                   href={`#${it.id}`}
                   tabIndex={0}>
                  <Icon name={it.icon} />
                  <span>{it.label}</span>
                  {it.badge != null && <span className="badge">{it.badge}</span>}
                </a>
              ))}
            </div>
          </div>
        ))}
      </nav>
      <div className="sb-footer">
        <div className="kv"><span>TENANT</span><span style={{color:"var(--fg-secondary)"}}>Iberdrola Renovables</span></div>
        <div className="kv"><span>REGION</span><span style={{color:"var(--fg-secondary)"}}>EU-WEST</span></div>
        <div className="kv"><span>v</span><span>2026.04.03</span></div>
      </div>
    </aside>
  );
}

/* ------------ Topbar ------------ */
const TB_TENANTS = [["Iberdrola Renovables", "6 sites · 214 MWp"], ["Solaria Energía", "3 sites · 96 MWp"], ["SkyOps demo tenant", "sandbox"]];
const TB_CRUMB_ROUTE = { Portfolio: "portfolio", Sites: "sites", Inspections: "inspections", Alerts: "alerts", "Work orders": "workorders", Calendar: "calendar", Reports: "zonereport", Settings: "settings", Commercial: "commercial", "Fleet & crew": "fleet" };
const TB_KEYS = [["⌘K", "Command bar · search & navigate"], ["⌘J", "Open / close Argus"], ["A / R", "Accept / reject detection (Review)"], ["C", "Reclassify detection"], ["J / K", "Next / previous detection"], ["Esc", "Close panel or dialog"]];
function Topbar({ crumbs, personaName, ctx, nav }) {
  const [menu, setMenu] = React.useState(null);
  const [tenant, setTenant] = React.useState(() => localStorage.getItem("skyops_tenant") || TB_TENANTS[0][0]);
  React.useEffect(() => { if (!menu) return; const c = () => setMenu(null); const k = (e) => e.key === "Escape" && setMenu(null); setTimeout(() => document.addEventListener("click", c), 0); document.addEventListener("keydown", k); return () => { document.removeEventListener("click", c); document.removeEventListener("keydown", k); }; }, [menu]);
  const go = (r) => { setMenu(null); nav && nav.go ? nav.go(r) : window.dispatchEvent(new CustomEvent("skyops:go", { detail: r })); };
  const tog = (m) => (e) => { e.stopPropagation(); setMenu(x => x === m ? null : m); };
  const crumbGo = (c, i) => { if (i === crumbs.length - 1) return null; if (i === 1 && crumbs[0] === "Sites") return () => go("site"); return TB_CRUMB_ROUTE[c] ? () => go(TB_CRUMB_ROUTE[c]) : null; };
  return (
    <header className="topbar" role="banner">
      <div className="crumbs">
        <span className="tb-pop-wrap">
          <button className={`tenant ${menu === "tenant" ? "on" : ""}`} onClick={tog("tenant")} aria-haspopup="menu" aria-expanded={menu === "tenant"}><span className="dot"/>{tenant}<Icon name="chevron_down" size={12} /></button>
          {menu === "tenant" && <div className="tb-pop tb-pop-l" role="menu" onClick={e => e.stopPropagation()}>
            <div className="tb-pop-h">Switch tenant</div>
            {TB_TENANTS.map(([n, d]) => <button key={n} role="menuitem" className={`tb-pop-i ${n === tenant ? "on" : ""}`} onClick={() => { setTenant(n); localStorage.setItem("skyops_tenant", n); setMenu(null); }}><span className="dot"/><span><b>{n}</b><em>{d}</em></span>{n === tenant && <Icon name="check" size={12}/>}</button>)}
            <div className="tb-pop-sep"/>
            <button className="tb-pop-i" onClick={() => go("settings")}><Icon name="settings" size={12}/><span><b>Tenant settings</b></span></button>
          </div>}
        </span>
        {crumbs.map((c, i) => { const f = crumbGo(c, i); return (
          <React.Fragment key={i}>
            <span className="sep">/</span>
            {f ? <button className="tb-crumb" onClick={f}>{c}</button> : <span className={i === crumbs.length - 1 ? "here" : ""}>{c}</span>}
          </React.Fragment>); })}
      </div>
      {window.CommandBar && ctx ? <window.CommandBar ctx={ctx} nav={nav}/> : <div className="spacer" />}
      {window.AgentToggle && <window.AgentToggle/>}
      <button className="tb-new" onClick={() => window.dispatchEvent(new CustomEvent("skyops:new-insp", { detail: {} }))}><Icon name="plus" size={12}/>New inspection</button>
      <button className="tb-icon-btn" aria-label="Alerts" title="Alerts" onClick={() => go("alerts")}>
        <Icon name="bell" size={15} />
        {window.alOpenCount && window.alOpenCount() > 0 && <span className="dot-alert" />}
      </button>
      <span className="tb-pop-wrap">
        <button className={`tb-icon-btn ${menu === "help" ? "on" : ""}`} aria-label="Help & shortcuts" title="Help & shortcuts" onClick={tog("help")}><Icon name="terminal" size={15} /></button>
        {menu === "help" && <div className="tb-pop" role="dialog" aria-label="Keyboard shortcuts" onClick={e => e.stopPropagation()}>
          <div className="tb-pop-h">Keyboard shortcuts</div>
          {TB_KEYS.map(([k, d]) => <div key={k} className="tb-key"><kbd>{k}</kbd><span>{d}</span></div>)}
          <div className="tb-pop-sep"/>
          <button className="tb-pop-i" onClick={() => { setMenu(null); window.agOpen ? window.agOpen({ text: "How do I " }) : null; }}><Icon name="sparkles" size={12}/><span><b>Ask Argus how to…</b></span></button>
          <div className="tb-pop-foot mono">SkyOps · v0.9 · IEC TS 62446-3</div>
        </div>}
      </span>
      <span className="tb-pop-wrap">
        <button className={`tb-avatar ${menu === "me" ? "on" : ""}`} title={personaName} aria-haspopup="menu" aria-expanded={menu === "me"} onClick={tog("me")}>{personaName.split(" ").map(w=>w[0]).slice(0,2).join("")}</button>
        {menu === "me" && <div className="tb-pop" role="menu" onClick={e => e.stopPropagation()}>
          <div className="tb-me" role="button" style={{ cursor: "pointer" }} onClick={() => go("profile")}><span className="tb-avatar sm">{personaName.split(" ").map(w=>w[0]).slice(0,2).join("")}</span><span><b>{personaName}</b><em>{tenant} · Admin</em></span></div>
          <div className="tb-pop-sep"/>
          <button className="tb-pop-i" onClick={() => go("settings")}><Icon name="settings" size={12}/><span><b>Settings</b><em>units, time zone, language</em></span></button>
          <button className="tb-pop-i" onClick={() => go("profile")}><Icon name="user" size={12}/><span><b>My profile</b><em>details, qualifications, notifications</em></span></button>
          <button className="tb-pop-i" onClick={() => go("field")}><Icon name="phone" size={12}/><span><b>Open field app</b></span></button>
          <div className="tb-pop-sep"/>
          <button className="tb-pop-i" onClick={() => { setMenu(null); window.skySignOut(); }}><Icon name="arrow_right" size={12}/><span><b>Sign out</b><em>{(window.lgSession && window.lgSession()?.email) || ""}</em></span></button>
        </div>}
      </span>
    </header>
  );
}

const PERSONA_LABEL = {
  pilot: "Tomás Aragón",
  analyst: "Inês Duarte",
  site_manager: "Marta Rivera",
  service_mgr: "Luís Ferreira",
  portfolio: "E. Vasconcelos",
};

/* ------------ Little shared bits ------------ */
const Pill = ({ tone = "", children }) => <span className={`pill ${tone}`}>{children}</span>;
const Sev  = ({ level, children }) => <span className={`sev ${level}`}>{children || level}</span>;
const Tstat = ({ v }) => <span className={`tstat ${v.toLowerCase()}`}>{v}</span>;
const Src  = ({ v }) => <span className="src" title="source_channel">{v}</span>;

function Confidence({ value }) {
  const cls = value < 65 ? "low" : value < 50 ? "crit" : "";
  return (
    <div style={{ display:"flex", alignItems:"center", gap:8, minWidth:120 }}>
      <div className={`cbar ${cls}`}>
        <span style={{ width: `${value}%` }} />
      </div>
      <span className="mono num" style={{ fontSize:11, color:"var(--fg-secondary)", minWidth:28, textAlign:"right" }}>{value}</span>
    </div>
  );
}

function Sparkline({ values, color = "var(--accent-primary)", h = 22 }) {
  const max = Math.max(...values), min = Math.min(...values);
  const range = max - min || 1;
  const pts = values.map((v, i) => {
    const x = (i / (values.length - 1)) * 100;
    const y = 100 - ((v - min) / range) * 100;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(" ");
  return (
    <svg className="spark" viewBox="0 0 100 100" preserveAspectRatio="none" style={{ height: h }}>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="2.5" vectorEffect="non-scaling-stroke"/>
    </svg>
  );
}

function Ring({ pct, color }) {
  const c = color || (pct >= 90 ? "var(--health-ok)" : pct >= 75 ? "var(--health-warn)" : "var(--health-crit)");
  return (
    <div className="ring" style={{ "--pct": pct, "--ring-color": c }}>
      <span>{pct}</span>
    </div>
  );
}

Object.assign(window, { useTweaks, TweaksPanel, Sidebar, Topbar, Pill, Sev, Tstat, Src, Confidence, Sparkline, Ring, PERSONA_LABEL });