/* MedBridge — in-app Settings screen (shared by dashboard + clinician view) */

const { useState: useSet, useEffect: useSetEff } = React;

function usePersist(key, init) {
  const [v, setV] = useSet(() => {
    try { const s = localStorage.getItem(key); return s != null ? JSON.parse(s) : init; } catch (e) { return init; }
  });
  useSetEff(() => { try { localStorage.setItem(key, JSON.stringify(v)); } catch (e) {} }, [v]);
  return [v, setV];
}

function Toggle({ on, onChange }) {
  return <button className={`tgl ${on ? "on" : ""}`} role="switch" aria-checked={on} onClick={() => onChange(!on)} />;
}

function SetRow({ label, desc, children }) {
  return (
    <div className="set-row">
      <div className="sr-main"><div className="sr-label">{label}</div>{desc && <div className="sr-desc">{desc}</div>}</div>
      <div className="sr-ctrl">{children}</div>
    </div>
  );
}

function Seg({ value, options, onChange }) {
  return (
    <div className="set-seg">
      {options.map((o) => {
        const val = typeof o === "string" ? o : o.v;
        const lab = typeof o === "string" ? o : o.l;
        return <button key={val} className={value === val ? "active" : ""} onClick={() => onChange(val)}>{lab}</button>;
      })}
    </div>
  );
}

const SET_TABS = [
  { id: "account", label: "Account", icon: "user" },
  { id: "appearance", label: "Appearance", icon: "sliders" },
  { id: "ai", label: "AI & summaries", icon: "activity" },
  { id: "notifications", label: "Notifications", icon: "bell" },
  { id: "privacy", label: "Data & privacy", icon: "shield" },
  { id: "security", label: "Security & access", icon: "shield" },
  { id: "integrations", label: "Integrations", icon: "layers" },
];

function SettingsScreen({ persona, t, setTweak, appearanceControls = ["accent", "density"], accentOptions = [], scope = "dashboard", onClose, onGoIntegration }) {
  const [tab, setTab] = useSet("account");
  const pkey = "mb_settings_" + scope;

  // realistic product settings (persisted)
  const [s, setS] = usePersist(pkey, {
    critAlerts: true, alertChannel: "inapp", quietHours: false,
    weeklyDigest: true, departureWindow: 30,
    aiDefault: "bullets", aiModel: "claude-haiku", aiAttribution: true, aiAutoRun: true,
    retain: true, deidentify: true, auditView: true, residency: "aws",
    twofa: true, sessionMins: 30, sso: true,
  });
  const set = (k, v) => setS((o) => ({ ...o, [k]: v }));
  const [savedAt, setSavedAt] = useSet(null);
  useSetEff(() => { if (savedAt) { const id = setTimeout(() => setSavedAt(null), 1800); return () => clearTimeout(id); } }, [savedAt]);

  const hue = persona.hue != null ? persona.hue : 168;

  return (
    <div className="set-wrap">
      <div className="set-head">
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
          <div><h1>Settings</h1><div className="sub">{scope === "clinician" ? "Clinician preferences · " : "Workspace & platform configuration · "}changes are audit-logged</div></div>
          {onClose && <button className="btn btn-ghost" onClick={onClose}><Icon name="x" size={15} />Close</button>}
        </div>
      </div>

      <div className="set-grid">
        {/* tab nav */}
        <nav className="set-tabs">
          {SET_TABS.map((x) => (
            <button key={x.id} className={`set-tab ${tab === x.id ? "active" : ""}`} onClick={() => setTab(x.id)}>
              <span className="st-ic"><Icon name={x.icon} size={16} /></span>{x.label}
            </button>
          ))}
        </nav>

        {/* content */}
        <div className="set-content">

          {tab === "account" && (
            <>
              <div className="set-card">
                <div className="set-profile">
                  <span className="av" style={{ background: `hsl(${hue} 42% 46%)` }}>{persona.initials}</span>
                  <div className="grow">
                    <div className="pn">{persona.name}</div>
                    <div className="pt">{persona.title}</div>
                    <div className="badges">
                      <Badge kind="good" icon="check">Verified · {persona.org || "NSHA"}</Badge>
                      <Badge kind="neutral">{scope === "clinician" ? "Clinical user" : "Analyst"}</Badge>
                    </div>
                  </div>
                </div>
              </div>
              <div className="set-card">
                <div className="set-card-h"><h3>Profile</h3><p>Identity is provisioned by your health authority directory. Some fields are read-only.</p></div>
                <SetRow label="Full name"><input className="set-input" defaultValue={persona.name} /></SetRow>
                <SetRow label="Role title" desc="Managed by your organization"><input className="set-input" value={persona.title} disabled /></SetRow>
                <SetRow label="Organization"><input className="set-input" value={persona.org || "Nova Scotia Health"} disabled /></SetRow>
                <SetRow label="Preferred language"><Seg value="en" options={[{ v: "en", l: "English" }, { v: "fr", l: "Français" }]} onChange={() => setSavedAt(Date.now())} /></SetRow>
              </div>
              <div className="set-foot">
                {savedAt && <span className="set-saved"><Icon name="check" size={14} />Saved</span>}
                <button className="btn btn-primary" onClick={() => setSavedAt(Date.now())}>Save changes</button>
              </div>
            </>
          )}

          {tab === "appearance" && (
            <>
              <div className="set-card">
                <div className="set-card-h"><h3>Theme</h3><p>Applies to your workspace only. Synced with the live Tweaks panel.</p></div>
                {appearanceControls.includes("theme") && (
                  <SetRow label="Surface theme" desc="Light clinical or deep data-platform navy">
                    <Seg value={t.theme} options={["clinical", "navy"]} onChange={(v) => setTweak("theme", v)} />
                  </SetRow>
                )}
                {appearanceControls.includes("accent") && (
                  <SetRow label="Accent color" desc="Used for highlights, links and primary actions">
                    <div className="set-accents">
                      {accentOptions.map((a, i) => {
                        const on = JSON.stringify(t.accent) === JSON.stringify(a);
                        return (
                          <button key={i} className={`set-acc ${on ? "active" : ""}`} onClick={() => setTweak("accent", a)} title={a[0]}>
                            <span style={{ background: a[0] }} /><span style={{ background: a[1] }} /><span style={{ background: a[2] }} /><span style={{ background: a[3] }} />
                            {on && <span className="chk"><Icon name="check" size={16} /></span>}
                          </button>
                        );
                      })}
                    </div>
                  </SetRow>
                )}
                {appearanceControls.includes("density") && (
                  <SetRow label="Density" desc="Compact fits more rows per screen">
                    <Seg value={t.density} options={["regular", "compact"]} onChange={(v) => setTweak("density", v)} />
                  </SetRow>
                )}
              </div>
              <div className="set-info"><Icon name="info" size={14} />These match the floating <b>Tweaks</b> panel used for design review — set them here for a persistent, per-user preference.</div>
            </>
          )}

          {tab === "ai" && (
            <>
              <div className="set-card">
                <div className="set-card-h"><h3>AI summaries</h3><p>How MedBridge assembles and presents the cross-source patient summary.</p></div>
                <SetRow label="Default summary format" desc="Bullet-based & chronological, or narrative prose">
                  {appearanceControls.includes("format")
                    ? <Seg value={t.format} options={["bullets", "prose"]} onChange={(v) => setTweak("format", v)} />
                    : <Seg value={s.aiDefault} options={["bullets", "prose"]} onChange={(v) => set("aiDefault", v)} />}
                </SetRow>
                <SetRow label="Generation model"><Seg value={s.aiModel} options={[{ v: "claude-haiku", l: "Haiku · fast" }, { v: "claude-sonnet", l: "Sonnet · deep" }]} onChange={(v) => set("aiModel", v)} /></SetRow>
                <SetRow label="Show source attribution" desc="Tag every fact with the EMR it came from"><Toggle on={s.aiAttribution} onChange={(v) => set("aiAttribution", v)} /></SetRow>
                <SetRow label="Auto-generate on open" desc="Compose the summary as soon as a record loads"><Toggle on={s.aiAutoRun} onChange={(v) => set("aiAutoRun", v)} /></SetRow>
              </div>
              <div className="set-info"><Icon name="shield" size={14} />AI output is decision-support only. Clinicians accept, edit, or flag every summary; the model never writes to the chart.</div>
            </>
          )}

          {tab === "notifications" && (
            <div className="set-card">
              <div className="set-card-h"><h3>Alerts & notifications</h3><p>Critical-gap alerts fire when a required field is missing before a patient departs.</p></div>
              <SetRow label="Critical-gap alerts" desc="Allergy list or active medications missing at transfer"><Toggle on={s.critAlerts} onChange={(v) => set("critAlerts", v)} /></SetRow>
              <SetRow label="Delivery channel"><Seg value={s.alertChannel} options={[{ v: "inapp", l: "In-app" }, { v: "email", l: "Email" }, { v: "both", l: "Both" }]} onChange={(v) => set("alertChannel", v)} /></SetRow>
              <SetRow label="Departure alert window" desc={`Notify ${s.departureWindow} min before the departure window closes`}>
                <span className="set-slider"><input type="range" min="10" max="60" step="5" value={s.departureWindow} onChange={(e) => set("departureWindow", +e.target.value)} /></span>
              </SetRow>
              <SetRow label="Quiet hours" desc="Mute non-critical alerts 22:00–06:00"><Toggle on={s.quietHours} onChange={(v) => set("quietHours", v)} /></SetRow>
              <SetRow label="Weekly performance digest" desc="Completeness trend emailed every Monday"><Toggle on={s.weeklyDigest} onChange={(v) => set("weeklyDigest", v)} /></SetRow>
            </div>
          )}

          {tab === "privacy" && (
            <>
              <div className="set-card">
                <div className="set-card-h"><h3>Data residency & retention</h3><p>Federated query architecture — patient records never leave the source hospital.</p></div>
                <SetRow label="Hosting region"><Seg value={s.residency} options={[{ v: "aws", l: "AWS ca-central-1" }, { v: "azure", l: "Azure Canada East" }]} onChange={(v) => set("residency", v)} /></SetRow>
                <SetRow label="Store de-identified scores only" desc="Tier 3 only — no name, health card, or DOB retained"><Toggle on={s.deidentify} onChange={(v) => set("deidentify", v)} /></SetRow>
                <SetRow label="Discard raw data after scoring" desc="Tier 2 fields read in real time, never persisted"><Toggle on={s.retain} onChange={(v) => set("retain", v)} /></SetRow>
                <SetRow label="My query audit log" desc="Every FHIR query retained 7 years per PHIA"><button className="btn btn-ghost btn-sm" onClick={() => setSavedAt(Date.now())}><Icon name="file" size={13} />View log</button></SetRow>
              </div>
              <div className="set-info"><Icon name="check" size={14} />Compliant with PHIA (Nova Scotia) and PIPEDA. OCAP principles apply to territory deployments.</div>
            </>
          )}

          {tab === "security" && (
            <div className="set-card">
              <div className="set-card-h"><h3>Security & access</h3><p>Role-based access control with full audit logging.</p></div>
              <SetRow label="Single sign-on" desc="Authenticate through your health authority identity provider"><Toggle on={s.sso} onChange={(v) => set("sso", v)} /></SetRow>
              <SetRow label="Two-factor authentication" desc="Required for all clinical and analyst roles"><Toggle on={s.twofa} onChange={(v) => set("twofa", v)} /></SetRow>
              <SetRow label="Auto sign-out" desc="Idle session timeout">
                <Seg value={String(s.sessionMins)} options={[{ v: "15", l: "15 min" }, { v: "30", l: "30 min" }, { v: "60", l: "60 min" }]} onChange={(v) => set("sessionMins", +v)} />
              </SetRow>
              <SetRow label="Access tier" desc="Granted by your organization — read-only here"><span className="mono-tag">{scope === "clinician" ? "CLINICAL · read" : "ANALYST · read"}</span></SetRow>
              <SetRow label="Encryption" desc="AES-256 at rest · TLS 1.3 in transit"><Badge kind="good" icon="shield">Enforced</Badge></SetRow>
            </div>
          )}

          {tab === "integrations" && (
            <>
              <div className="set-card">
                <div className="set-card-h"><h3>Connected systems</h3><p>Federated FHIR R4 / HL7 v2 endpoints feeding your workspace.</p></div>
                {[
                  { n: "Oracle Health — OPOR", s: "Connected", k: "good", d: "FHIR R4 + HL7 v2 · all NS sites" },
                  { n: "MEDITECH Expanse", s: "Connected", k: "good", d: "Per-hospital endpoint · Cape Breton" },
                  { n: "TELUS Health — NWT", s: "Degraded", k: "warn", d: "Legacy system end-of-life" },
                  { n: "Epic", s: "Sandbox", k: "info", d: "Synthetic patients · fhir.epic.com" },
                ].map((e, i) => (
                  <SetRow key={i} label={e.n} desc={e.d}><Badge kind={e.k}>{e.s}</Badge></SetRow>
                ))}
              </div>
              {onGoIntegration && <div className="set-foot"><button className="btn btn-primary" onClick={onGoIntegration}><Icon name="layers" size={14} />Open Integration Monitor</button></div>}
            </>
          )}

        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SettingsScreen });