/** Aviso de sessão encerrada: cobre a tela, explica o motivo e leva ao login
 *  depois de alguns segundos — tempo de ler, sem despejo seco. */
function AvisoSessao() {
  const [aviso, setAviso] = React.useState(null);
  const [resta, setResta] = React.useState(8);

  React.useEffect(() => {
    const aoExpirar = (e) => setAviso((a) => a || { message: e.detail?.message, reason: e.detail?.reason });
    window.addEventListener("flowtix:sessao-expirada", aoExpirar);
    return () => window.removeEventListener("flowtix:sessao-expirada", aoExpirar);
  }, []);

  const sair = React.useCallback(() => {
    try { localStorage.removeItem("flowtix.tela"); localStorage.removeItem("flowtix.demandId"); } catch {}
    window.location.reload();
  }, []);

  React.useEffect(() => {
    if (!aviso) return;
    setResta(8);
    const t = setInterval(() => setResta((n) => {
      if (n <= 1) { clearInterval(t); sair(); return 0; }
      return n - 1;
    }), 1000);
    return () => clearInterval(t);
  }, [aviso, sair]);

  if (!aviso) return null;

  const titulo = {
    inatividade: "Sessão expirada por inatividade",
    encerrada: "Sessão encerrada",
    desativada: "Conta desativada",
  }[aviso.reason] || "Sessão expirada";

  return (
    <div role="alertdialog" aria-live="assertive"
      style={{ position: "fixed", inset: 0, zIndex: 9000, display: "grid", placeItems: "center", background: "rgba(15,23,42,0.55)", backdropFilter: "blur(3px)", padding: 24 }}>
      <div style={{ maxWidth: 420, width: "100%", background: "var(--surface-raised, #fff)", borderRadius: "var(--radius-card, 14px)", border: "1px solid var(--border-subtle)", boxShadow: "0 24px 60px rgba(15,23,42,0.28)", padding: 28, display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ display: "grid", placeItems: "center", width: 40, height: 40, borderRadius: 999, background: "var(--accent-warning-soft, #fef3c7)", color: "var(--accent-warning, #b45309)" }}>
            <Icon name="clock-alert" size={20} />
          </span>
          <span style={{ font: "var(--type-title)", color: "var(--text-strong)" }}>{titulo}</span>
        </div>
        <p style={{ margin: 0, font: "var(--type-body)", color: "var(--text-body)", textWrap: "pretty" }}>
          {aviso.message || "Sua sessão expirou. Entre novamente para continuar."}
        </p>
        <p style={{ margin: 0, font: "var(--type-caption)", color: "var(--text-muted)" }}>
          Nenhum dado enviado foi perdido. Levando para a tela de entrada em {resta}s…
        </p>
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 10, marginTop: 4 }}>
          <Button onClick={sair}>Entrar novamente</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AvisoSessao });