const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "regular",
  "formLayout": "sections",
  "headerStyle": "navy"
}/*EDITMODE-END*/;

function initialTheme() {
  try {
    const saved = localStorage.getItem("nz_theme");
    if (saved === "dark" || saved === "light") return saved;
  } catch (e) {}
  try {
    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
  } catch (e) {}
  return "light";
}

const DENSITY_SCALE = { compact: 0.92, regular: 1, comfy: 1.1 };

// Nomes de negócio dos três perfis de RF-USUARIOS-01 (ESP-0001). A chave é o
// valor que a API devolve em `perfil`; o texto é o que a pessoa lê.
const NOME_DO_PERFIL = {
  administrador: "Administração",
  editor: "Editoração",
  operador: "Operação",
};

// Rotas privativas de `administrador` (RF-USUARIOS-05, RF-AUDITORIA-07,
// RF-CONFIG-01).
const AREA_ADMINISTRATIVA = ["users", "audit", "devices", "settings"];

function NavItem({ icon, label, count, active, onClick }) {
  return (
    <button className={"nav-item" + (active ? " active" : "")} onClick={onClick}>
      <Icon name={icon} size={18} className="ico" />{label}
      {count != null && <span className="count">{count}</span>}
    </button>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem("nz_route")) || { view: "dashboard" }; } catch (e) { return { view: "dashboard" }; }
  });
  const [toast, setToast] = React.useState(null);
  const [theme, setTheme] = React.useState(initialTheme);
  const [navOpen, setNavOpen] = React.useState(false);

  const [auth, setAuth] = React.useState({ loggedIn: false, user: null, loading: true });
  const [loginError, setLoginError] = React.useState(null);
  const [loginBusy, setLoginBusy] = React.useState(false);

  React.useEffect(() => {
    if (window.API && window.API.isAuthenticated()) {
      window.API.getMe().then(u => {
        setAuth({ loggedIn: true, user: u, loading: false });
      }).catch(() => {
        window.API.logout();
        setAuth({ loggedIn: false, user: null, loading: false });
      });
    } else {
      setAuth(p => ({ ...p, loading: false }));
    }
  }, []);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--ui-scale", DENSITY_SCALE[t.density] || 1);
  }, [t.density]);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try { localStorage.setItem("nz_theme", theme); } catch (e) {}
  }, [theme]);

  // RF-UI-01: `nz_route` é persistida em localStorage. Uma rota salva apontando
  // para a área de administração faria um editor que já foi administrador abrir
  // o portal numa tela proibida — que chamaria a API e receberia 403. Cair para
  // o painel corrige o estado guardado; a proteção continua sendo do backend.
  //
  // Fica aqui, junto dos demais hooks, e **antes** dos retornos antecipados
  // abaixo: um `useEffect` depois deles só é chamado em parte das renderizações,
  // e o React aborta com "rendered more hooks than during the previous render".
  const rotaProibida = auth.user
    ? auth.user.perfil !== "administrador" && AREA_ADMINISTRATIVA.includes(route.view)
    : false;
  React.useEffect(() => {
    if (rotaProibida) go("dashboard");
  }, [rotaProibida]);

  const toggleTheme = () => setTheme(p => (p === "dark" ? "light" : "dark"));

  const go = (view, extra = {}) => { const nr = { view, ...extra }; setRoute(nr); setNavOpen(false); try { localStorage.setItem("nz_route", JSON.stringify(nr)); } catch (e) {} document.querySelector(".scroll")?.scrollTo(0, 0); };

  const handleLogin = (email, pwd) => {
    setLoginBusy(true);
    setLoginError(null);
    window.API.login(email, pwd).then(() => {
      return window.API.getMe();
    }).then(user => {
      setAuth({ loggedIn: true, user: user, loading: false });
      setLoginBusy(false);
      go("dashboard");
    }).catch(err => {
      setLoginError(err.message || "Erro ao autenticar");
      setLoginBusy(false);
    });
  };

  const handleLogout = () => {
    window.API.logout();
    setAuth({ loggedIn: false, user: null, loading: false });
    go("login");
  };

  if (auth.loading) {
    return (
      <div style={{ display: "grid", placeItems: "center", height: "100vh", color: "var(--text-faint)" }}>
        Carregando...
      </div>
    );
  }

  if (!auth.loggedIn) {
    return (
      <>
        <LoginView onLogin={handleLogin} busy={loginBusy} error={loginError}
          theme={theme} onToggleTheme={toggleTheme} />
        <TweaksPanelMount t={t} setTweak={setTweak} theme={theme} onToggleTheme={toggleTheme} />
      </>
    );
  }

  // RF-AUTH-11: o diálogo abre imediatamente após o login e precede o portal
  // inteiro. Não é só cortesia — com senha provisória o backend recusa toda
  // requisição autenticada, e as telas atrás dele não teriam o que mostrar.
  if (auth.user.senha_provisoria) {
    return (
      <>
        <PasswordChangeModal onTrocada={() => {
          // RF-AUTH-12: o token que trouxe a pessoa até aqui morreu na troca.
          // Deslogar é o único caminho — atualizar o estado em memória deixaria
          // a aplicação com uma credencial que o backend já recusa.
          setLoginError("Senha alterada. Entre novamente com a nova senha.");
          handleLogout();
        }} />
        <TweaksPanelMount t={t} setTweak={setTweak} theme={theme} onToggleTheme={toggleTheme} />
      </>
    );
  }

  const user = auth.user;
  // RF-USUARIOS-01: três perfis, sem hierarquia. Sem valor de recurso — um
  // usuário sem perfil não é "editor por omissão"; o backend não emite mais
  // esse caso, e assumi-lo aqui daria à interface um poder que a API recusaria.
  const perfil = user.perfil || null;
  const ehAdministrador = perfil === "administrador";
  const podeEditar = ehAdministrador || perfil === "editor";

  const vista = rotaProibida ? "dashboard" : route.view;

  return (
    <div className={"app" + (navOpen ? " nav-open" : "")}>
      <div className="nav-overlay" onClick={() => setNavOpen(false)} aria-hidden="true"></div>
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark"><BrandGlyph size={22} color="var(--accent)" /></div>
          <div>
            <div className="brand-name">NAZIDE <span className="pressus">PRESSUS</span></div>
            <div className="brand-sub">Portal de gerenciamento</div>
          </div>
        </div>
        <nav className="nav">
          <div className="nav-label">Principal</div>
          <NavItem icon="dashboard" label="Visão geral" active={vista === "dashboard"} onClick={() => go("dashboard")} />
          <div className="nav-label">Acervo clínico</div>
          <NavItem icon="patients" label="Casos" active={vista === "patients" || vista === "patient-form"} onClick={() => go("patients")} />
          {/* RF-UI-01: a área de administração some para quem não é
              administrador. Omitir não é proteger — a autorização é de
              RF-USUARIOS-05 e RF-AUDITORIA-07, no backend. */}
          {ehAdministrador && <div className="nav-label">Administração</div>}
          {ehAdministrador && <NavItem icon="user" label="Usuários" active={vista === "users"} onClick={() => go("users")} />}
          {ehAdministrador && <NavItem icon="shield" label="Auditoria" active={vista === "audit"} onClick={() => go("audit")} />}
          {ehAdministrador && <NavItem icon="headset" label="Dispositivos" active={vista === "devices"} onClick={() => go("devices")} />}
          {ehAdministrador && <NavItem icon="sessions" label="Sessões & telemetria" />}
          {ehAdministrador && <NavItem icon="settings" label="Configurações" active={vista === "settings"} onClick={() => go("settings")} />}
        </nav>
        <div className="sidebar-foot">
          <div className="user">
            <div className="avatar">{(user.nome || user.email || "?").split(" ").map(w => w[0]).slice(0, 2).join("") || "?"}</div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div className="user-name">{user.nome || user.email}</div>
              <div className="user-role">{NOME_DO_PERFIL[perfil] || "Perfil não definido"}</div>
            </div>
            <button className="icon-btn" title="Sair" onClick={handleLogout}><Icon name="logout" size={16} /></button>
          </div>
        </div>
      </aside>

      {vista === "patient-form" ? (
        <PatientForm patient={route.patientId ? { id: route.patientId } : null} isNew={!route.patientId} initialPublicationIssues={route.publicationIssues || []} headerStyle={t.headerStyle} layout={t.formLayout}
          theme={theme} onToggleTheme={toggleTheme} onMenu={() => setNavOpen(true)}
          onBack={() => go("patients")}
          onSave={(savedCase) => { go("patients"); setToast(savedCase.status === "published" ? "Caso publicado no acervo." : "Caso salvo como rascunho."); }} />
      ) : (
        <div className="main">
          <div className="appbar">
            <NavToggle onClick={() => setNavOpen(true)} />
            <div className="spacer"></div>
            <ThemeToggle theme={theme} onToggle={toggleTheme} />
          </div>
          {vista === "dashboard" && (
            <DashboardView perfil={perfil} podeEditar={podeEditar}
              onGoPatients={() => go("patients")}
              onOpenPatient={(id, extra = {}) => go("patient-form", { patientId: id, ...extra })} />
          )}
          {vista === "patients" && (
            <PatientsView
              onOpenPatient={(id) => go("patient-form", { patientId: id })}
              podeEditar={podeEditar}
              onNewPatient={() => go("patient-form", { patientId: null })} />
          )}
          {vista === "users" && (
            <UsersView usuarioCorrente={user} onToast={setToast} />
          )}
          {vista === "audit" && (
            <AuditView onToast={setToast} />
          )}
          {vista === "devices" && (
            <DevicesView onToast={setToast} />
          )}
          {vista === "settings" && (
            <SettingsView onToast={setToast} />
          )}
        </div>
      )}

      {toast && <Toast msg={toast} onDone={() => setToast(null)} />}
      <TweaksPanelMount t={t} setTweak={setTweak} theme={theme} onToggleTheme={toggleTheme} />
    </div>
  );
}

function TweaksPanelMount({ t, setTweak, theme, onToggleTheme }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Identidade visual" />
      <TweakToggle label="Tema escuro" value={theme === "dark"} onChange={onToggleTheme} />
      <TweakSection label="Layout" />
      <TweakRadio label="Densidade" value={t.density} options={["compact", "regular", "comfy"]} onChange={v => setTweak("density", v)} />
      <TweakRadio label="Formulário" value={t.formLayout} options={[{ value: "sections", label: "Seções" }, { value: "single", label: "Coluna única" }]} onChange={v => setTweak("formLayout", v)} />
      <TweakRadio label="Cabeçalho do formulário" value={t.headerStyle} options={[{ value: "navy", label: "Navy" }, { value: "light", label: "Claro" }]} onChange={v => setTweak("headerStyle", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);