/* SkyOps — Settings: regional & units, data formats, thresholds, notifications, integrations, data & privacy.
   Persisted in localStorage (skyops_settings_v1); window.skyFmt exposes formatters. */

const { useState: uSST, useEffect: uEST } = React;

const SET_DEFAULTS = {
  language: "en", region: "PT", timezone: "Europe/Lisbon", weekStart: "monday",
  dateFmt: "YYYY-MM-DD", timeFmt: "24h", numFmt: "1,234.56", currency: "EUR", currencyPos: "prefix",
  temp: "C", length: "m", area: "ha", energy: "MWh", power: "MW", irradiance: "W/m²", speed: "m/s", gsd: "cm/px", crs: "EPSG:25829",
  coordFmt: "decimal", fiscalStart: "01", tariffBasis: "PPA blended", price: 52, discount: 7,
  hotCell: 18, soiling: 5, coverage: 95, minIrr: 600, maxWind: 10, confidence: 70,
  notifEmail: true, notifPush: true, notifDigest: "daily", notifCrit: true, notifWO: true, notifCert: true, notifWeather: true,
  quietFrom: "22:00", quietTo: "07:00",
  retentionRaw: "24", retentionProducts: "120", autoArchive: true, aiContext: true, aiModel: "haiku-4.5",
};
const setStore = {
  v: (() => { try { return { ...SET_DEFAULTS, ...JSON.parse(localStorage.getItem("skyops_settings_v1") || "{}") }; } catch { return SET_DEFAULTS; } })(),
  subs: new Set(),
  set(p) { this.v = { ...this.v, ...p }; try { localStorage.setItem("skyops_settings_v1", JSON.stringify(this.v)); } catch {} this.subs.forEach(s => s(this.v)); },
};
const CUR = { EUR: "€", USD: "$", GBP: "£", BRL: "R$", MAD: "MAD " };
window.skyFmt = {
  date(iso) { if (!iso) return "—"; const [y, m, d] = iso.split("-"); const f = setStore.v.dateFmt;
    return f === "DD/MM/YYYY" ? `${d}/${m}/${y}` : f === "MM/DD/YYYY" ? `${m}/${d}/${y}` : f === "DD MMM YYYY" ? `${+d} ${["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][+m - 1]} ${y}` : iso; },
  num(n, dp = 0) { const s = (+n).toFixed(dp); const [i, f] = s.split("."); const fm = setStore.v.numFmt;
    const sep = fm === "1.234,56" ? "." : fm === "1 234,56" ? "\u202f" : ","; const dec = fm === "1,234.56" ? "." : ",";
    return i.replace(/\B(?=(\d{3})+(?!\d))/g, sep) + (f ? dec + f : ""); },
  money(n) { const c = CUR[setStore.v.currency] || "€"; const v = this.num(n); return setStore.v.currencyPos === "prefix" ? c + v : v + " " + c.trim(); },
  temp(c, dp = 1) { return setStore.v.temp === "F" ? `${this.num(c * 9 / 5 + 32, dp)} °F` : `${this.num(c, dp)} °C`; },
  area(ha, dp = 1) { const u = setStore.v.area; return u === "acre" ? `${this.num(ha * 2.47105, dp)} ac` : u === "km²" ? `${this.num(ha / 100, 2)} km²` : u === "m²" ? `${this.num(ha * 1e4)} m²` : `${this.num(ha, dp)} ha`; },
};

function useSettings() { const [v, setV] = uSST(setStore.v); uEST(() => { setStore.subs.add(setV); return () => setStore.subs.delete(setV); }, []); return v; }

const SET_SECTIONS = [
  ["regional", "Language & region", "globe"], ["formats", "Data formats", "tag"], ["units", "Units of measure", "ruler"],
  ["financial", "Financial", "zap"], ["thresholds", "Inspection thresholds", "thermometer"], ["notifications", "Notifications", "bell"],
  ["integrations", "Integrations", "link"], ["data", "Data & privacy", "database"],
];

function SettingsPage() {
  const v = useSettings();
  const [sec, setSec] = uSST("regional");
  const [saved, setSaved] = uSST(false);
  const set = (k) => (e) => { setStore.set({ [k]: e.target.type === "checkbox" ? e.target.checked : e.target.type === "number" || e.target.type === "range" ? +e.target.value : e.target.value }); setSaved(true); clearTimeout(window.__setT); window.__setT = setTimeout(() => setSaved(false), 1400); };
  const Sel = ({ k, opts }) => <select className="sel" value={v[k]} onChange={set(k)}>{opts.map(o => Array.isArray(o) ? <option key={o[0]} value={o[0]}>{o[1]}</option> : <option key={o}>{o}</option>)}</select>;
  const Row = ({ l, h, children }) => <div className="st-row"><div className="st-row-l"><b>{l}</b>{h && <span>{h}</span>}</div><div className="st-row-c">{children}</div></div>;
  const Tog = ({ k }) => <label className="st-tog"><input type="checkbox" checked={!!v[k]} onChange={set(k)}/><i/></label>;
  const Seg = ({ k, opts }) => <div className="ps-seg">{opts.map(([o, l]) => <button key={o} className={v[k] === o ? "on" : ""} onClick={() => set(k)({ target: { value: o } })}>{l}</button>)}</div>;
  const now = new Date("2026-10-22T14:35:00Z");
  const tzTime = (() => { try { return now.toLocaleTimeString("en-GB", { timeZone: v.timezone, hour: "2-digit", minute: "2-digit", hour12: v.timeFmt === "12h" }); } catch { return "—"; } })();
  const F = window.skyFmt;

  return (
    <div className="page st-page">
      <div className="page-head">
        <div className="title"><div className="kicker">System</div><h1>Settings</h1>
          <div className="sub">Workspace defaults for Iberdrola Renovables. Users can override language and notifications in their profile.</div></div>
        <div className="actions">
          <span className={`st-saved ${saved ? "on" : ""}`}><Icon name="check_circle" size={12}/>Saved</span>
          <button className="btn btn-secondary" onClick={() => { setStore.set(SET_DEFAULTS); setSaved(true); }}><Icon name="refresh" size={12}/>Reset to defaults</button>
        </div>
      </div>

      <div className="st-wrap">
        <nav className="st-nav">{SET_SECTIONS.map(([k, l, ic]) => <button key={k} className={sec === k ? "on" : ""} onClick={() => setSec(k)}><Icon name={ic} size={13}/>{l}</button>)}</nav>

        <div className="st-main">
          {sec === "regional" && <div className="card st-card">
            <div className="st-card-h">Language & region</div>
            <Row l="Interface language" h="Reports can be generated in a different language"><Sel k="language" opts={[["en","English"],["pt","Português (PT)"],["pt-BR","Português (BR)"],["es","Español"],["fr","Français"]]}/></Row>
            <Row l="Region" h="Sets regional defaults for formats and units"><Sel k="region" opts={[["PT","Portugal"],["ES","Spain"],["FR","France"],["BR","Brazil"],["US","United States"],["UK","United Kingdom"]]}/></Row>
            <Row l="Time zone" h={`Current time · ${tzTime}`}><Sel k="timezone" opts={["Europe/Lisbon","Europe/Madrid","Europe/Paris","Europe/London","America/Sao_Paulo","America/New_York","UTC"]}/></Row>
            <Row l="Flight logs time base" h="Drone telemetry and SCADA are always stored in UTC"><div className="inp mono st-ro">UTC · shown in local time</div></Row>
            <Row l="First day of week" h="Calendar and weekly reports"><Seg k="weekStart" opts={[["monday","Monday"],["sunday","Sunday"]]}/></Row>
          </div>}

          {sec === "formats" && <div className="card st-card">
            <div className="st-card-h">Data formats</div>
            <Row l="Date" h={`Preview · ${F.date("2026-10-22")}`}><Sel k="dateFmt" opts={["YYYY-MM-DD","DD/MM/YYYY","MM/DD/YYYY","DD MMM YYYY"]}/></Row>
            <Row l="Time" h={`Preview · ${tzTime}`}><Seg k="timeFmt" opts={[["24h","24-hour"],["12h","12-hour"]]}/></Row>
            <Row l="Numbers" h={`Preview · ${F.num(1234567.89, 2)}`}><Sel k="numFmt" opts={["1,234.56","1.234,56","1 234,56"]}/></Row>
            <Row l="Currency" h={`Preview · ${F.money(84200)}`}><Sel k="currency" opts={[["EUR","Euro (€)"],["USD","US dollar ($)"],["GBP","Pound (£)"],["BRL","Real (R$)"],["MAD","Dirham (MAD)"]]}/></Row>
            <Row l="Currency symbol position"><Seg k="currencyPos" opts={[["prefix","€ 1,234"],["suffix","1,234 €"]]}/></Row>
            <Row l="Coordinates" h={v.coordFmt === "dms" ? "38°34′22″N 7°54′58″W" : v.coordFmt === "utm" ? "29S 586428 4268712" : "38.57290, −7.91620"}><Sel k="coordFmt" opts={[["decimal","Decimal degrees"],["dms","Degrees · minutes · seconds"],["utm","UTM"]]}/></Row>
            <Row l="Default projected CRS" h="Used for new sites and exports"><Sel k="crs" opts={["EPSG:25829","EPSG:25830","EPSG:3763","EPSG:3857","EPSG:4326"]}/></Row>
          </div>}

          {sec === "units" && <div className="card st-card">
            <div className="st-card-h">Units of measure<span>Stored internally in SI; converted only for display</span></div>
            <Row l="Temperature" h={`Hot-cell ΔT 28.4 °C → ${F.temp(28.4)}`}><Seg k="temp" opts={[["C","°C"],["F","°F"]]}/></Row>
            <Row l="Length & distance"><Seg k="length" opts={[["m","m · km"],["ft","ft · mi"]]}/></Row>
            <Row l="Area" h={`412.4 ha → ${F.area(412.4)}`}><Seg k="area" opts={[["ha","ha"],["km²","km²"],["m²","m²"],["acre","acre"]]}/></Row>
            <Row l="Energy"><Seg k="energy" opts={[["kWh","kWh"],["MWh","MWh"],["GWh","GWh"]]}/></Row>
            <Row l="Power"><Seg k="power" opts={[["kW","kW"],["MW","MW"]]}/></Row>
            <Row l="Irradiance"><Seg k="irradiance" opts={[["W/m²","W/m²"],["kWh/m²/day","kWh/m²·d"]]}/></Row>
            <Row l="Wind speed"><Seg k="speed" opts={[["m/s","m/s"],["km/h","km/h"],["kn","kn"]]}/></Row>
            <Row l="Ground sample distance"><Seg k="gsd" opts={[["cm/px","cm/px"],["in/px","in/px"]]}/></Row>
          </div>}

          {sec === "financial" && <div className="card st-card">
            <div className="st-card-h">Financial assumptions<span>Used in revenue at risk, NPV and work-order payback</span></div>
            <Row l="Tariff basis"><Sel k="tariffBasis" opts={["PPA blended","Spot (OMIE)","Fixed feed-in","Custom per site"]}/></Row>
            <Row l="Default energy price" h={`${CUR[v.currency]}/MWh`}><input className="inp mono st-num" type="number" value={v.price} onChange={set("price")}/></Row>
            <Row l="Discount rate" h="% per year for NPV"><input className="inp mono st-num" type="number" value={v.discount} onChange={set("discount")}/></Row>
            <Row l="Fiscal year starts"><Sel k="fiscalStart" opts={[["01","January"],["04","April"],["07","July"],["10","October"]]}/></Row>
          </div>}

          {sec === "thresholds" && <div className="card st-card">
            <div className="st-card-h">Inspection thresholds<span>Defaults for new inspections · each MIC can override</span></div>
            {[["hotCell","Hot-cell ΔT alarm", 5, 40, "°C"], ["soiling","Soiling loss alarm", 1, 15, "%"], ["coverage","Coverage target", 80, 100, "%"], ["minIrr","Minimum irradiance to fly", 300, 900, "W/m²"], ["maxWind","Maximum wind to fly", 4, 15, "m/s"], ["confidence","AI detection confidence floor", 40, 95, "%"]].map(([k, l, mn, mx, u]) => (
              <Row key={k} l={l} h={k === "minIrr" ? "IEC TS 62446-3 requires ≥ 600 W/m²" : null}><div className="st-range"><input type="range" min={mn} max={mx} value={v[k]} onChange={set(k)}/><b className="mono">{v[k]} {u}</b></div></Row>
            ))}
          </div>}

          {sec === "notifications" && <div className="card st-card">
            <div className="st-card-h">Notifications</div>
            <Row l="Email"><Tog k="notifEmail"/></Row>
            <Row l="Push (mobile & browser)"><Tog k="notifPush"/></Row>
            <Row l="Digest"><Seg k="notifDigest" opts={[["off","Off"],["daily","Daily"],["weekly","Weekly"]]}/></Row>
            <div className="st-sub">Notify me about</div>
            <Row l="Critical detections" h="Hot cells, offline strings, fire risk"><Tog k="notifCrit"/></Row>
            <Row l="Work order changes" h="Assigned, overdue, verified"><Tog k="notifWO"/></Row>
            <Row l="Certifications & drone service" h="30 days before expiry"><Tog k="notifCert"/></Row>
            <Row l="Flight-window weather" h="Wind or irradiance outside limits on scheduled days"><Tog k="notifWeather"/></Row>
            <Row l="Quiet hours" h="Critical alerts still come through"><div className="st-quiet"><input className="inp mono" type="time" value={v.quietFrom} onChange={set("quietFrom")}/><span>to</span><input className="inp mono" type="time" value={v.quietTo} onChange={set("quietTo")}/></div></Row>
          </div>}

          {sec === "integrations" && <div className="card st-card">
            <div className="st-card-h">Integrations</div>
            {[["SCADA · Bentek", "Inverter & string telemetry · 7 sites", "connected", "32 s ago"], ["Weather · Meteomatics", "Irradiance, wind, cloud cover", "connected", "4 min ago"], ["Market · OMIE", "Spot price & curtailment", "connected", "1 h ago"],
              ["Satellite · Sentinel-2", "Soiling & vegetation change", "connected", "2 d ago"], ["DJI FlightHub 2", "Flight plans & telemetry sync", "disconnected", "—"], ["CMMS · SAP PM", "Push work orders, pull status", "disconnected", "—"], ["SSO · Azure AD", "Single sign-on & user provisioning", "connected", "—"]].map(([n, d, s, t]) => (
              <Row key={n} l={n} h={d}><div className="st-int"><span className={`pill ${s === "connected" ? "ok" : ""}`}><span className="dot"/>{s}</span><span className="mono sec">{t}</span><button className="btn btn-secondary btn-xs">{s === "connected" ? "Configure" : "Connect"}</button></div></Row>
            ))}
          </div>}

          {sec === "data" && <div className="card st-card">
            <div className="st-card-h">Data & privacy</div>
            <Row l="Keep raw imagery" h="Original drone frames"><Sel k="retentionRaw" opts={[["12","12 months"],["24","24 months"],["60","5 years"],["0","Forever"]]}/></Row>
            <Row l="Keep processed products" h="Orthos, point clouds, reports"><Sel k="retentionProducts" opts={[["60","5 years"],["120","10 years"],["0","Forever"]]}/></Row>
            <Row l="Auto-archive closed inspections" h="Move to cold storage 90 days after report delivery"><Tog k="autoArchive"/></Row>
            <Row l="Data residency"><div className="inp mono st-ro">EU-WEST · Frankfurt</div></Row>
            <div className="st-sub">Argus · AI</div>
            <Row l="Use screen context in AI answers" h="Sends the data shown on screen with each question"><Tog k="aiContext"/></Row>
            <Row l="Model"><Sel k="aiModel" opts={[["haiku-4.5","Claude Haiku 4.5 · fast"],["sonnet-4.5","Claude Sonnet 4.5 · deeper analysis"]]}/></Row>
            <Row l="Export all workspace data" h="Sites, inspections, detections, work orders as GeoPackage + CSV"><button className="btn btn-secondary btn-xs"><Icon name="download" size={11}/>Request export</button></Row>
          </div>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SettingsPage, useSettings, setStore });