// ════════════════════════════════════════════════════════════════
// LOGS SCREEN
// ════════════════════════════════════════════════════════════════

const LogsScreen = ({ empresas, allLogs, setRoute, filterEmpresaId }) => {
  const [filter, setFilter] = React.useState("all"); // all | success | error | refresh
  const [search, setSearch] = React.useState("");
  const [selectedEmpresa, setSelectedEmpresa] = React.useState(filterEmpresaId || "all");

  const filtered = allLogs.filter(l => {
    if (selectedEmpresa !== "all" && l.empresaId !== selectedEmpresa) return false;
    if (filter === "success" && !(l.status >= 200 && l.status < 300)) return false;
    if (filter === "error" && l.status < 400) return false;
    if (filter === "refresh" && !l.refresh) return false;
    if (search && !l.endpoint.toLowerCase().includes(search.toLowerCase()) && !l.empresaNome.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  const counts = {
    all: allLogs.length,
    success: allLogs.filter(l => l.status >= 200 && l.status < 300).length,
    error: allLogs.filter(l => l.status >= 400).length,
    refresh: allLogs.filter(l => l.refresh).length,
  };

  return (
    <div>
      <PageHead
        overline="Histórico"
        title="Logs da API"
        sub="Todas as chamadas feitas pela sua integração — Power BI, scripts, testes. Filtre por empresa, status ou tipo."
      >
        <button className="btn btn-ghost btn-sm"><Icon name="download" size={13}/> Exportar CSV</button>
      </PageHead>

      <div className="logs-toolbar">
        <div className="search-input">
          <Icon name="search" size={14}/>
          <input placeholder="Buscar por endpoint ou empresa…" value={search} onChange={e => setSearch(e.target.value)}/>
        </div>
        <select className="select" style={{ maxWidth: 200, padding: "8px 12px", fontSize: 13 }} value={selectedEmpresa} onChange={e => setSelectedEmpresa(e.target.value)}>
          <option value="all">Todas as empresas</option>
          {empresas.map(emp => <option key={emp.id} value={emp.id}>{emp.nome}</option>)}
        </select>
        <span style={{ width: 1, height: 22, background: "var(--rev-border)" }}/>
        <button className={"chip" + (filter === "all" ? " active" : "")} onClick={() => setFilter("all")}>
          Todos <span className="chip-count">{counts.all}</span>
        </button>
        <button className={"chip" + (filter === "success" ? " active" : "")} onClick={() => setFilter("success")}>
          Sucesso <span className="chip-count">{counts.success}</span>
        </button>
        <button className={"chip" + (filter === "error" ? " active" : "")} onClick={() => setFilter("error")}>
          Erros <span className="chip-count">{counts.error}</span>
        </button>
        <button className={"chip" + (filter === "refresh" ? " active" : "")} onClick={() => setFilter("refresh")}>
          Refresh disparado <span className="chip-count">{counts.refresh}</span>
        </button>
      </div>

      <div className="logs-table">
        <div className="logs-thead">
          <span>Timestamp</span>
          <span>Empresa</span>
          <span>Endpoint</span>
          <span>Status</span>
          <span>Duração</span>
          <span></span>
        </div>
        {filtered.length === 0 && (
          <div className="logs-empty">
            <Icon name="search" size={20}/>
            <div style={{ marginTop: 6 }}>Nenhum log encontrado para esse filtro.</div>
          </div>
        )}
        {filtered.map((l, i) => (
          <div key={i} className="logs-row" onClick={() => setRoute({ name: "empresa", empresaId: l.empresaId })}>
            <span className="logs-cell-ts">{l.ts}</span>
            <span className="logs-cell-empresa">{l.empresaNome}</span>
            <span className="logs-cell-endpoint">
              <span className={"logs-method " + (l.method === "GET" ? "logs-method-get" : "logs-method-post")}>{l.method}</span>
              {l.endpoint}
              {l.refresh && <span className="refresh-tag"><Icon name="refresh" size={9}/> refresh</span>}
            </span>
            <span className="logs-cell-status">
              <span className={"badge " + (l.status >= 200 && l.status < 300 ? "badge-green" : l.status >= 400 ? "badge-red" : "badge-yellow")}>{l.status}</span>
            </span>
            <span className="logs-cell-dur">{l.dur}ms</span>
            <span className="logs-cell-action">
              <Icon name="chevronRight" size={14}/>
            </span>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 16, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--rev-t4)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
        <span>Exibindo {filtered.length} de {allLogs.length} chamadas</span>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <button className="btn btn-ghost btn-sm" disabled style={{ opacity: 0.4 }}>← Anterior</button>
          <button className="btn btn-ghost btn-sm">Próximo →</button>
        </div>
      </div>
    </div>
  );
};

// ════════════════════════════════════════════════════════════════
// CONTA SCREEN
// ════════════════════════════════════════════════════════════════

const ContaScreen = ({ user, empresas, onLogout }) => {
  const [name, setName] = React.useState(user.name);
  const [email, setEmail] = React.useState(user.email);
  const [notifConnect, setNotifConnect] = React.useState(true);
  const [notifError, setNotifError] = React.useState(true);
  const [notifRefresh, setNotifRefresh] = React.useState(false);

  return (
    <div>
      <PageHead
        overline="Minha conta"
        title="Perfil e preferências"
        sub="Gerencie suas informações, segurança e notificações."
      />

      <div className="profile-grid">
        <div className="dashboard-col" style={{ gap: 16 }}>
          <div className="profile-card">
            <div className="profile-card-title">
              Perfil
              <button className="btn btn-ghost btn-sm"><Icon name="pen" size={12}/> Editar</button>
            </div>
            <div className="avatar-block">
              <div className="avatar-lg">{user.name.split(" ").map(s => s[0]).slice(0, 2).join("")}</div>
              <div className="avatar-info">
                <div className="avatar-name">{user.name}</div>
                <div className="avatar-mail">{user.email}</div>
                <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
                  <span className="badge badge-orange"><Icon name="sparkle" size={9}/> Plano Pro</span>
                  <span className="badge badge-neutral">Desde mai/2025</span>
                </div>
              </div>
            </div>

            <div className="form-grid">
              <div className="field">
                <label className="field-label">Nome completo</label>
                <input className="input" value={name} onChange={e => setName(e.target.value)}/>
              </div>
              <div className="field">
                <label className="field-label">E-mail</label>
                <input className="input" value={email} onChange={e => setEmail(e.target.value)}/>
              </div>
              <div className="field">
                <label className="field-label">Idioma</label>
                <select className="select" defaultValue="pt-BR">
                  <option>pt-BR</option>
                  <option disabled>en-US (em breve)</option>
                </select>
              </div>
              <div className="field">
                <label className="field-label">Fuso horário</label>
                <select className="select" defaultValue="BRT">
                  <option>America/São_Paulo (BRT)</option>
                  <option>UTC</option>
                </select>
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", gap: 10 }}>
              <button className="btn btn-ghost">Cancelar</button>
              <button className="btn btn-primary">Salvar alterações</button>
            </div>
          </div>

          <div className="profile-card">
            <div className="profile-card-title">Segurança</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              <div className="kv-row">
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: "var(--rev-t1)" }}>Senha</div>
                  <div style={{ fontSize: 12, color: "var(--rev-t4)", marginTop: 2 }}>Atualizada há 3 meses</div>
                </div>
                <button className="btn btn-ghost btn-sm">Alterar</button>
              </div>
              <div className="kv-row">
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: "var(--rev-t1)" }}>Autenticação em 2 fatores</div>
                  <div style={{ fontSize: 12, color: "var(--rev-t4)", marginTop: 2 }}>Aumenta a segurança da conta</div>
                </div>
                <span className="badge badge-neutral">Desativada</span>
              </div>
              <div className="kv-row">
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: "var(--rev-t1)" }}>Sessões ativas</div>
                  <div style={{ fontSize: 12, color: "var(--rev-t4)", marginTop: 2 }}>2 dispositivos · macOS · Chrome</div>
                </div>
                <button className="btn btn-danger btn-sm">Encerrar todas</button>
              </div>
            </div>
          </div>

          <div className="profile-card">
            <div className="profile-card-title">Notificações</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              <ToggleRow
                title="Nova empresa conectada"
                desc="Receba um e-mail toda vez que uma autorização OAuth for concluída."
                value={notifConnect} onChange={setNotifConnect}
              />
              <ToggleRow
                title="Falhas de refresh token"
                desc="Avisos sobre tokens invalidados que requerem reautorização."
                value={notifError} onChange={setNotifError}
              />
              <ToggleRow
                title="Resumo diário de refreshes"
                desc="Relatório por e-mail às 8h com todos os refreshes do dia anterior."
                value={notifRefresh} onChange={setNotifRefresh}
              />
            </div>
          </div>
        </div>

        <div className="dashboard-col" style={{ gap: 16 }}>
          <div className="card card-plain">
            <div className="card-accent"/>
            <div className="card-body">
              <div className="card-label">Plano Pro</div>
              <div className="card-title">R$ 89<span style={{ fontSize: 13, color: "var(--rev-t4)", fontWeight: 500 }}>/mês</span></div>
              <div className="card-desc">Até 10 empresas conectadas · chamadas ilimitadas · refresh automático · suporte prioritário.</div>
              <div style={{ marginTop: 6, display: "flex", flexDirection: "column", gap: 0 }}>
                <div className="kv-row">
                  <span className="kv-label">Empresas usadas</span>
                  <span className="kv-val">{empresas.length} de 10</span>
                </div>
                <div className="kv-row">
                  <span className="kv-label">Próxima cobrança</span>
                  <span className="kv-val">12 jun 2026</span>
                </div>
                <div className="kv-row">
                  <span className="kv-label">Método</span>
                  <span className="kv-val">•••• 4242</span>
                </div>
              </div>
            </div>
            <div className="card-footer">
              <button className="btn btn-ghost btn-sm">Mudar plano</button>
              <button className="btn btn-ghost btn-sm">Faturas</button>
            </div>
          </div>

          <div className="card card-plain">
            <div className="card-body">
              <div className="card-label">API & Webhooks</div>
              <div className="card-title" style={{ fontSize: 14 }}>Chaves de integração</div>
              <div className="card-desc">Use chaves de admin para automação. Diferentes das URLs por empresa.</div>
              <div style={{ marginTop: 10, padding: "10px 12px", background: "var(--rev-s2)", border: "1px solid var(--rev-border)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--rev-t3)" }}>sk_live_•••••••••••••42a</span>
                <button className="btn btn-ghost btn-sm" style={{ padding: "4px 10px" }}><Icon name="copy" size={11}/></button>
              </div>
              <a style={{ marginTop: 8, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--rev-orange)", display: "flex", alignItems: "center", gap: 6, fontWeight: 600, cursor: "pointer" }}>
                Documentação da API <Icon name="external" size={11}/>
              </a>
            </div>
          </div>

          <div className="card card-plain" style={{ borderColor: "rgba(255,68,68,0.2)" }}>
            <div className="card-body">
              <div className="card-label" style={{ color: "var(--rev-red)" }}>Zona de risco</div>
              <div className="card-title" style={{ fontSize: 14 }}>Encerrar conta</div>
              <div className="card-desc">
                Remove permanentemente sua conta, todas as empresas e tokens do Vault. Não há volta.
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 8, marginTop: 6 }}>
                <button className="btn btn-ghost btn-sm" onClick={onLogout}>
                  <Icon name="logout" size={12}/> Sair desta sessão
                </button>
                <button className="btn btn-danger btn-sm">Excluir conta</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const ToggleRow = ({ title, desc, value, onChange }) => (
  <div className="kv-row" style={{ alignItems: "flex-start" }}>
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 13, fontWeight: 600, color: "var(--rev-t1)" }}>{title}</div>
      <div style={{ fontSize: 12, color: "var(--rev-t4)", marginTop: 2, lineHeight: 1.5 }}>{desc}</div>
    </div>
    <button
      onClick={() => onChange(!value)}
      style={{
        width: 38, height: 22, borderRadius: 9999,
        background: value ? "var(--rev-orange)" : "var(--rev-s4)",
        border: "1px solid " + (value ? "var(--rev-orange)" : "var(--rev-s5)"),
        position: "relative", cursor: "pointer", transition: "background 150ms",
        flexShrink: 0,
      }}
    >
      <span style={{
        position: "absolute", width: 14, height: 14, borderRadius: "50%",
        background: value ? "#000" : "#fff",
        top: 3, left: value ? 19 : 3,
        boxShadow: "0 1px 2px rgba(0,0,0,0.15)",
        transition: "left 150ms, background 150ms",
      }}/>
    </button>
  </div>
);

Object.assign(window, { LogsScreen, ContaScreen, ToggleRow });