/* global React */
/* ===========================================================
   VOLTLAB · CONFIGURAÇÕES
   - VL_PREFS: store global de preferências de engenharia,
     persistido em localStorage + pub/sub (módulos podem ler
     window.VL_PREFS.get("tensao") etc. como ponto de partida).
   - VL_Settings: página de configurações (Aparência, Padrões de
     cálculo, Identificação & Relatórios, Dados & privacidade).
=========================================================== */

const VL_PREFS_KEY = "vl_prefs_v1";

const VL_PREFS_DEFAULTS = {
  // Padrões de cálculo
  tensao:       220,
  tensaoCustom: false,
  sistema:      "trifasico",
  frequencia:   60,
  material:     "Cu",
  tempAmbiente: 30,
  isolacao:     "PVC",
  quedaMax:     4,
  fpAlvo:       0.92,
  // Identificação & relatórios
  empresa:      "",
  responsavel:  "",
  crea:         "",
  exportFmt:    "json",
  decimais:     2,
};
window.VL_PREFS_DEFAULTS = VL_PREFS_DEFAULTS;

/* ---------- store singleton ---------- */
const VL_PREFS = (() => {
  const subs = new Set();
  let data = (() => {
    try {
      const r = localStorage.getItem(VL_PREFS_KEY);
      return r ? { ...VL_PREFS_DEFAULTS, ...JSON.parse(r) } : { ...VL_PREFS_DEFAULTS };
    } catch { return { ...VL_PREFS_DEFAULTS }; }
  })();
  const persist = () => { try { localStorage.setItem(VL_PREFS_KEY, JSON.stringify(data)); } catch {} };
  const emit = () => { persist(); subs.forEach(f => f(data)); window.dispatchEvent(new CustomEvent("vl:prefs", { detail: data })); };
  return {
    all: () => data,
    get: (k) => data[k],
    set(k, v) { data = { ...data, [k]: v }; emit(); },
    setMany(obj) { data = { ...data, ...obj }; emit(); },
    reset() { data = { ...VL_PREFS_DEFAULTS }; emit(); },
    subscribe(f) { subs.add(f); return () => subs.delete(f); },
  };
})();
window.VL_PREFS = VL_PREFS;

function useVLPrefs() {
  const [, force] = React.useState(0);
  React.useEffect(() => VL_PREFS.subscribe(() => force(x => x + 1)), []);
  return VL_PREFS;
}
window.useVLPrefs = useVLPrefs;

/* ---------- ícones locais ---------- */
const StIcon = ({ n, s = 16 }) => {
  const p = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  const d = {
    palette:  <><circle cx="12" cy="12" r="9"/><circle cx="8" cy="9" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16" cy="9" r="1"/><path d="M12 21c-1.5 0-2-1-2-2s.5-2 2-2c2 0 3.5-1.2 3.5-3"/></>,
    calc:     <><rect x="4" y="3" width="16" height="18" rx="2"/><line x1="4" y1="9" x2="20" y2="9"/><line x1="9" y1="17" x2="15" y2="17"/></>,
    file:     <><path d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z"/><polyline points="14 3 14 8 19 8"/><line x1="9" y1="13" x2="15" y2="13"/></>,
    shield:   <><path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z"/></>,
    check:    <polyline points="20 6 9 17 4 12"/>,
    trash:    <><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/></>,
    refresh:  <><path d="M21 12a9 9 0 11-3-6.7L21 8"/><path d="M21 3v5h-5"/></>,
    warn:     <><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12" y2="17"/></>,
    company:  <><rect x="3" y="8" width="18" height="13" rx="2"/><path d="M8 8V5a2 2 0 012-2h4a2 2 0 012 2v3"/><line x1="12" y1="12" x2="12" y2="16"/></>,
  };
  return <svg {...p}>{d[n] || null}</svg>;
};

/* ---------- primitivos de linha de configuração ---------- */
const SetRow = ({ label, hint, children, full }) => (
  <div className={"set-row " + (full ? "is-full" : "")}>
    <div className="set-row-l">
      <span className="set-row-label">{label}</span>
      {hint && <span className="set-row-hint">{hint}</span>}
    </div>
    <div className="set-row-c">{children}</div>
  </div>
);

const SetSeg = ({ value, onChange, options }) => (
  <div className="seg">
    {options.map(o => (
      <button key={o.value} className={value === o.value ? "is-active" : ""} onClick={() => onChange(o.value)}>{o.label}</button>
    ))}
  </div>
);

const SetNum = ({ value, onChange, unit, step = 1, min, max, placeholder }) => (
  <span className="set-num field-input">
    <input
      type="number" value={value} step={step} min={min} max={max} placeholder={placeholder}
      onChange={e => onChange(e.target.value === "" ? "" : parseFloat(e.target.value))}
    />
    {unit && <em className="set-num-unit">{unit}</em>}
  </span>
);

const SetText = ({ value, onChange, placeholder, icon }) => (
  <span className="set-text field-input">
    {icon && <StIcon n={icon} s={15}/>}
    <input type="text" value={value} placeholder={placeholder} onChange={e => onChange(e.target.value)} />
  </span>
);

const SetToggle = ({ value, onChange, on = "Ativado", off = "Desativado" }) => (
  <button className={"set-switch " + (value ? "is-on" : "")} role="switch" aria-checked={value} onClick={() => onChange(!value)}>
    <span className="set-switch-track"><span className="set-switch-thumb"/></span>
    <span className="set-switch-label">{value ? on : off}</span>
  </button>
);

/* swatches de cor de acento (mesmos hex do ACCENT_MAP do app) */
const ACCENT_SWATCHES = [
  { hex: "#3D8BFF", name: "Azul", color: "oklch(72% 0.18 245)" },
  { hex: "#3DD6E6", name: "Ciano", color: "oklch(82% 0.14 200)" },
  { hex: "#5BE38C", name: "Verde", color: "oklch(84% 0.18 145)" },
  { hex: "#F2B043", name: "Âmbar", color: "oklch(80% 0.16 75)" },
];

/* ===========================================================
   SETTINGS PAGE
=========================================================== */
const VL_Settings = ({ tweaks = {}, setTweak = () => {}, onNav = () => {} }) => {
  const prefs = useVLPrefs();
  const P = prefs.all();
  const [active, setActive] = React.useState("aparencia");
  const scrollerRef = React.useRef(null);

  const SECTIONS = [
    { id: "aparencia",   label: "Aparência",            icon: "palette" },
    { id: "calculo",     label: "Padrões de cálculo",   icon: "calc" },
    { id: "relatorios",  label: "Identificação & Relatórios", icon: "file" },
    { id: "dados",       label: "Dados & privacidade",  icon: "shield" },
  ];

  const toast = (m) => window.vlToast ? window.vlToast(m) : null;
  const set = (k, v) => prefs.set(k, v);

  /* navegação por âncoras dentro do scroller do app */
  const goSection = (id) => {
    setActive(id);
    const root = scrollerRef.current;
    const target = root && root.querySelector(`#sec-${id}`);
    const scroller = root && root.closest(".main-scroll");
    if (target && scroller) {
      const top = target.offsetTop - 14;
      scroller.scrollTo({ top, behavior: "smooth" });
    }
  };

  /* destaca seção ativa conforme rolagem */
  React.useEffect(() => {
    const root = scrollerRef.current;
    const scroller = root && root.closest(".main-scroll");
    if (!scroller) return;
    const onScroll = () => {
      const secs = SECTIONS.map(s => root.querySelector(`#sec-${s.id}`)).filter(Boolean);
      const y = scroller.scrollTop + 80;
      let cur = SECTIONS[0].id;
      for (const el of secs) { if (el.offsetTop <= y) cur = el.id.replace("sec-", "") || el.id; }
      const found = secs.reverse().find(el => el.offsetTop <= y);
      if (found) setActive(found.id.replace("sec-", ""));
    };
    scroller.addEventListener("scroll", onScroll, { passive: true });
    return () => scroller.removeEventListener("scroll", onScroll);
  }, []);

  const handleResetAppearance = () => {
    setTweak("accent", "#3D8BFF");
    setTweak("density", "comfortable");
    setTweak("showCircuitry", true);
    setTweak("monoReadouts", true);
    toast("Aparência restaurada ao padrão");
  };

  const handleResetPrefs = () => {
    prefs.reset();
    toast("Padrões de cálculo restaurados");
  };

  const handleClearProjeto = () => {
    if (window.VL_PROJETO) { window.VL_PROJETO.clear(); toast("Barramento do projeto limpo"); }
  };

  const handleWipe = () => {
    const ok = window.confirm(
      "Apagar TODOS os dados locais?\n\nIsto remove preferências, projeto compartilhado e o histórico salvo de todas as calculadoras neste navegador. Esta ação não pode ser desfeita."
    );
    if (!ok) return;
    try {
      Object.keys(localStorage)
        .filter(k => k.startsWith("vl_") || k.startsWith("voltlab"))
        .forEach(k => localStorage.removeItem(k));
    } catch {}
    prefs.reset();
    if (window.VL_PROJETO) window.VL_PROJETO.clear();
    toast("Dados locais apagados");
    setTimeout(() => window.location.reload(), 600);
  };

  const tensoesComuns = [127, 220, 380, 440];

  return (
    <div className="settings-page" ref={scrollerRef}>
      {/* RAIL */}
      <aside className="set-rail">
        <div className="set-rail-eyebrow">CONFIGURAÇÕES</div>
        <nav className="set-rail-nav">
          {SECTIONS.map(s => (
            <button key={s.id} className={"set-rail-item " + (active === s.id ? "is-active" : "")} onClick={() => goSection(s.id)}>
              <StIcon n={s.icon} s={16}/>
              <span>{s.label}</span>
            </button>
          ))}
        </nav>
        <div className="set-rail-foot">
          <span className="set-saved"><StIcon n="check" s={13}/> Salvo automaticamente</span>
          <span className="set-rail-version mono">VOLTLAB v4.2 · pt-BR</span>
        </div>
      </aside>

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

        {/* ───────── APARÊNCIA ───────── */}
        <section className="panel set-section" id="sec-aparencia">
          <div className="panel-head">
            <div>
              <div className="panel-eyebrow">INTERFACE</div>
              <h3>Aparência</h3>
            </div>
            <button className="btn btn-ghost set-mini" onClick={handleResetAppearance}>
              <StIcon n="refresh" s={13}/> Restaurar
            </button>
          </div>

          <SetRow label="Cor de acento" hint="Define o destaque dos gráficos, botões e leituras.">
            <div className="set-swatches">
              {ACCENT_SWATCHES.map(sw => (
                <button
                  key={sw.hex}
                  className={"set-swatch " + (tweaks.accent === sw.hex ? "is-sel" : "")}
                  style={{ "--sw": sw.color }}
                  onClick={() => setTweak("accent", sw.hex)}
                  title={sw.name}
                >
                  <span className="set-swatch-dot"/>
                  <span className="set-swatch-name">{sw.name}</span>
                </button>
              ))}
            </div>
          </SetRow>

          <SetRow label="Densidade" hint="Espaçamento geral dos painéis e tabelas.">
            <SetSeg
              value={tweaks.density}
              onChange={(v) => setTweak("density", v)}
              options={[{ value: "comfortable", label: "Conforto" }, { value: "compact", label: "Compacta" }]}
            />
          </SetRow>

          <SetRow label="Circuitos animados" hint="Fundo decorativo com trilhas de circuito.">
            <SetToggle value={!!tweaks.showCircuitry} onChange={(v) => setTweak("showCircuitry", v)}/>
          </SetRow>

          <SetRow label="Leituras monoespaçadas" hint="Usa fonte mono nos valores numéricos (readouts).">
            <SetToggle value={!!tweaks.monoReadouts} onChange={(v) => setTweak("monoReadouts", v)}/>
          </SetRow>
        </section>

        {/* ───────── PADRÕES DE CÁLCULO ───────── */}
        <section className="panel set-section" id="sec-calculo">
          <div className="panel-head">
            <div>
              <div className="panel-eyebrow">ENGENHARIA · VALORES INICIAIS</div>
              <h3>Padrões de cálculo</h3>
            </div>
            <div className="status-chip"><span className="status-dot status-ok"/>APLICADO AOS MÓDULOS</div>
          </div>
          <p className="set-section-lead">
            Estes valores são usados como ponto de partida ao abrir as calculadoras. Você pode sobrescrevê-los em cada módulo.
          </p>

          <SetRow label="Tensão padrão" hint="Tensão de referência para corrente, queda de tensão e demandas.">
            <div className="set-tensao">
              <SetSeg
                value={P.tensaoCustom ? "custom" : String(P.tensao)}
                onChange={(v) => {
                  if (v === "custom") { set("tensaoCustom", true); }
                  else { prefs.setMany({ tensaoCustom: false, tensao: parseFloat(v) }); }
                }}
                options={[...tensoesComuns.map(t => ({ value: String(t), label: t + " V" })), { value: "custom", label: "Outra" }]}
              />
              {P.tensaoCustom && (
                <SetNum value={P.tensao} unit="V" step={1} min={1} onChange={(v) => set("tensao", v)}/>
              )}
            </div>
          </SetRow>

          <div className="set-grid-2">
            <SetRow label="Sistema" hint="Nº de fases padrão.">
              <SetSeg
                value={P.sistema}
                onChange={(v) => set("sistema", v)}
                options={[
                  { value: "monofasico", label: "Mono" },
                  { value: "bifasico", label: "Bi" },
                  { value: "trifasico", label: "Tri" },
                ]}
              />
            </SetRow>
            <SetRow label="Frequência" hint="Rede elétrica.">
              <SetSeg
                value={String(P.frequencia)}
                onChange={(v) => set("frequencia", parseFloat(v))}
                options={[{ value: "60", label: "60 Hz" }, { value: "50", label: "50 Hz" }]}
              />
            </SetRow>
          </div>

          <div className="set-grid-2">
            <SetRow label="Material do condutor" hint="Cobre ou alumínio.">
              <SetSeg
                value={P.material}
                onChange={(v) => set("material", v)}
                options={[{ value: "Cu", label: "Cobre" }, { value: "Al", label: "Alumínio" }]}
              />
            </SetRow>
            <SetRow label="Isolação padrão" hint="Tipo de isolação do condutor.">
              <SetSeg
                value={P.isolacao}
                onChange={(v) => set("isolacao", v)}
                options={[{ value: "PVC", label: "PVC" }, { value: "EPR", label: "EPR" }, { value: "XLPE", label: "XLPE" }]}
              />
            </SetRow>
          </div>

          <div className="set-grid-3">
            <SetRow label="Temp. ambiente" hint="Referência térmica.">
              <SetNum value={P.tempAmbiente} unit="°C" step={1} min={0} max={90} onChange={(v) => set("tempAmbiente", v)}/>
            </SetRow>
            <SetRow label="Queda de tensão máx." hint="Limite NBR 5410.">
              <SetNum value={P.quedaMax} unit="%" step={0.5} min={0.5} max={10} onChange={(v) => set("quedaMax", v)}/>
            </SetRow>
            <SetRow label="Fator de potência alvo" hint="Meta de correção.">
              <SetNum value={P.fpAlvo} unit="" step={0.01} min={0.5} max={1} onChange={(v) => set("fpAlvo", v)}/>
            </SetRow>
          </div>

          <div className="set-section-actions">
            <button className="btn btn-ghost" onClick={handleResetPrefs}>
              <StIcon n="refresh" s={14}/> Restaurar padrões de cálculo
            </button>
          </div>
        </section>

        {/* ───────── IDENTIFICAÇÃO & RELATÓRIOS ───────── */}
        <section className="panel set-section" id="sec-relatorios">
          <div className="panel-head">
            <div>
              <div className="panel-eyebrow">EXPORTAÇÃO</div>
              <h3>Identificação & Relatórios</h3>
            </div>
          </div>
          <p className="set-section-lead">
            Dados que aparecem no cabeçalho dos relatórios e exportações geradas pelas calculadoras.
          </p>

          <SetRow label="Empresa / Escritório" full>
            <SetText value={P.empresa} icon="company" placeholder="Ex.: CCR Engenharia Elétrica" onChange={(v) => set("empresa", v)}/>
          </SetRow>

          <div className="set-grid-2">
            <SetRow label="Responsável técnico" full>
              <SetText value={P.responsavel} placeholder="Nome do engenheiro" onChange={(v) => set("responsavel", v)}/>
            </SetRow>
            <SetRow label="CREA / Registro" full>
              <SetText value={P.crea} placeholder="Ex.: CREA-SP 0000000000" onChange={(v) => set("crea", v)}/>
            </SetRow>
          </div>

          <div className="set-grid-2">
            <SetRow label="Formato de exportação" hint="Usado nos botões de exportar.">
              <SetSeg
                value={P.exportFmt}
                onChange={(v) => set("exportFmt", v)}
                options={[{ value: "json", label: "JSON" }, { value: "csv", label: "CSV" }]}
              />
            </SetRow>
            <SetRow label="Casas decimais" hint="Precisão exibida nos resultados.">
              <SetSeg
                value={String(P.decimais)}
                onChange={(v) => set("decimais", parseInt(v, 10))}
                options={[{ value: "0", label: "0" }, { value: "1", label: "1" }, { value: "2", label: "2" }, { value: "3", label: "3" }]}
              />
            </SetRow>
          </div>
        </section>

        {/* ───────── DADOS & PRIVACIDADE ───────── */}
        <section className="panel set-section set-danger" id="sec-dados">
          <div className="panel-head">
            <div>
              <div className="panel-eyebrow">ARMAZENAMENTO LOCAL</div>
              <h3>Dados & privacidade</h3>
            </div>
          </div>
          <p className="set-section-lead">
            Suas preferências e o histórico das calculadoras ficam guardados apenas neste navegador.
          </p>

          <div className="set-danger-row">
            <div className="set-danger-meta">
              <b>Limpar barramento do projeto</b>
              <em>Remove todos os valores compartilhados entre calculadoras (tensão, corrente, seção…).</em>
            </div>
            <button className="btn btn-ghost" onClick={handleClearProjeto}>
              <StIcon n="refresh" s={14}/> Limpar projeto
            </button>
          </div>

          <div className="set-danger-row">
            <div className="set-danger-meta">
              <b>Restaurar todas as configurações</b>
              <em>Volta aparência e padrões de cálculo aos valores de fábrica.</em>
            </div>
            <button className="btn btn-ghost" onClick={() => { handleResetAppearance(); handleResetPrefs(); }}>
              <StIcon n="refresh" s={14}/> Restaurar tudo
            </button>
          </div>

          <div className="set-danger-row is-critical">
            <div className="set-danger-meta">
              <b><StIcon n="warn" s={14}/> Apagar todos os dados locais</b>
              <em>Exclui preferências, projeto e histórico de todas as calculadoras. Ação irreversível.</em>
            </div>
            <button className="btn btn-danger-solid" onClick={handleWipe}>
              <StIcon n="trash" s={14}/> Apagar dados
            </button>
          </div>
        </section>

      </div>
    </div>
  );
};
window.VL_Settings = VL_Settings;