// ════════════════════════════════════════════════════════════════
// EMPRESA DETAIL / DASHBOARD — FR6
// ════════════════════════════════════════════════════════════════

const EmpresaDetail = ({ empresa, setRoute, updateEmpresa, copy, urlStyle, dashboardLayout }) => {
  const [token] = React.useState(empresa.token);
  const fullUrl = `https://api.bridge.choraapi.com.br/v1/empresa/${empresa.id}?token=${token}`;
  const isConnected = empresa.status === "connected" || empresa.status === "needs_refresh";

  const refreshNow = () => {
    updateEmpresa(empresa.id, { status: "connecting" });
    setTimeout(() => {
      updateEmpresa(empresa.id, {
        status: "connected",
        lastRefresh: "agora mesmo",
        minutesElapsed: 0,
      });
    }, 1400);
  };

  const reconnect = () => {
    setRoute({ name: "oauth", empresaId: empresa.id });
  };

  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--rev-t4)" }}>
        <a onClick={() => setRoute({ name: "empresas" })} style={{ cursor: "pointer", textTransform: "uppercase", letterSpacing: "0.1em" }}>← Empresas</a>
        <span>/</span>
        <span style={{ color: "var(--rev-t2)", textTransform: "uppercase", letterSpacing: "0.1em" }}>{empresa.nome}</span>
      </div>

      {/* Header */}
      <div className="connection-header" style={{ marginBottom: 20 }}>
        <div className="empresa-logo" style={{ width: 56, height: 56, fontSize: 20 }}>
          {empresa.nome.split(" ").map(s => s[0]).slice(0,2).join("")}
        </div>
        <div className="connection-header-info">
          <div className="connection-header-top">
            <h1 className="connection-name">{empresa.nome}</h1>
            <StatusBadge status={empresa.status}/>
          </div>
          <div className="connection-meta">
            <span className="connection-meta-item"><Icon name="file" size={11}/> CNPJ {empresa.cnpj}</span>
            <span className="connection-meta-sep">·</span>
            {empresa.segmento && (
              <>
                <span className="connection-meta-item">{empresa.segmento}</span>
                <span className="connection-meta-sep">·</span>
              </>
            )}
            <span className="connection-meta-item">Criada em {empresa.createdAt}</span>
            {isConnected && (
              <>
                <span className="connection-meta-sep">·</span>
                <span className="connection-meta-item">
                  <span className="live-pulse"/> Última chamada {empresa.lastCall}
                </span>
              </>
            )}
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          {empresa.status === "error" ? (
            <button className="btn btn-primary" onClick={reconnect}>
              <Icon name="refresh" size={13}/> Reconectar
            </button>
          ) : empresa.status === "pending" ? (
            <button className="btn btn-primary" onClick={reconnect}>
              <Icon name="link" size={13}/> Autorizar Conta Azul
            </button>
          ) : (
            <>
              <button className="btn btn-ghost btn-sm" onClick={refreshNow}>
                <Icon name="refresh" size={12}/> Atualizar token
              </button>
              <button className="btn btn-ghost btn-sm">
                <Icon name="moreHorizontal" size={14}/>
              </button>
            </>
          )}
        </div>
      </div>

      {/* Status-specific alerts */}
      {empresa.status === "pending" && (
        <div className="alert alert-warning" style={{ marginBottom: 20 }}>
          <div className="alert-icon"><Icon name="alert" size={12}/></div>
          <div className="alert-body">
            <div className="alert-title">Autorização pendente</div>
            <div>A empresa ainda não foi conectada à Conta Azul. A URL do Power BI só será gerada após o fluxo OAuth.</div>
          </div>
          <button className="btn btn-outline btn-sm" onClick={reconnect}>
            Autorizar agora <Icon name="arrowRight" size={11}/>
          </button>
        </div>
      )}

      {empresa.status === "error" && (
        <div className="alert alert-danger" style={{ marginBottom: 20 }}>
          <div className="alert-icon"><Icon name="alert" size={12}/></div>
          <div className="alert-body">
            <div className="alert-title">Falha na renovação do token</div>
            <div>O <code className="mono">refresh_token</code> foi invalidado pela Conta Azul (provavelmente revogado pelo usuário). É necessário refazer a autorização.</div>
          </div>
          <button className="btn btn-primary btn-sm" onClick={reconnect}>
            Reconectar <Icon name="arrowRight" size={11}/>
          </button>
        </div>
      )}

      {empresa.status === "needs_refresh" && (
        <div className="alert alert-info" style={{ marginBottom: 20 }}>
          <div className="alert-icon"><Icon name="info" size={12}/></div>
          <div className="alert-body">
            <div className="alert-title">Token expira em breve</div>
            <div>Na próxima chamada do Power BI, o sistema fará o refresh automaticamente. Você não precisa fazer nada.</div>
          </div>
        </div>
      )}

      {/* Main grid */}
      <div className={dashboardLayout === "stacked" ? "" : "dashboard-grid"} style={dashboardLayout === "stacked" ? { display: "flex", flexDirection: "column", gap: 16 } : {}}>
        <div className="dashboard-col">

          {/* URL block */}
          <div className="card card-plain">
            <div className="card-accent"/>
            <div className="card-body" style={{ paddingBottom: 16 }}>
              <div className="card-label">URL Estática para Power BI / Power Query</div>
              <div className="card-title">Endpoint da empresa</div>
              <div className="card-desc">
                Cole esta URL no <strong style={{ color: "var(--rev-t2)" }}>Web.Contents()</strong> do Power Query. O sistema gerencia o
                refresh do token automaticamente — você nunca precisa autorizar novamente.
              </div>
              {!isConnected ? (
                <div style={{ padding: "20px 0", textAlign: "center", color: "var(--rev-t4)", fontSize: 13 }}>
                  <Icon name="lock" size={16}/>
                  <div style={{ marginTop: 6 }}>URL disponível após autorizar a Conta Azul</div>
                </div>
              ) : (
                <div className="url-block" style={{ marginTop: 6 }}>
                  {urlStyle === "input" && (
                    <div className="url-input-row">
                      <input className="url-text" value={fullUrl} readOnly/>
                      <button className="url-copy" onClick={() => copy(fullUrl)}>
                        <Icon name="copy" size={12}/> Copiar
                      </button>
                    </div>
                  )}
                  {urlStyle === "mono" && (
                    <div className="url-mono">
                      <div className="url-mono-text">
                        <span className="url-host">https://api.bridge.choraapi.com.br/v1/empresa/</span>
                        <span style={{ color: "var(--rev-t1)", fontWeight: 600 }}>{empresa.id}</span>
                        <span className="url-host">?token=</span>
                        <span className="url-token">{token}</span>
                      </div>
                      <div className="url-mono-actions">
                        <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--rev-t5)", textTransform: "uppercase", letterSpacing: "0.12em" }}>
                          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--rev-green)" }}/>
                          Endpoint estático · sempre disponível
                        </div>
                        <button className="btn btn-primary btn-sm" onClick={() => copy(fullUrl)}>
                          <Icon name="copy" size={12}/> Copiar URL
                        </button>
                      </div>
                    </div>
                  )}
                  {urlStyle === "terminal" && (
                    <div className="url-term">
                      <div className="url-term-head">
                        <div className="url-term-dots">
                          <div className="url-term-dot live"/>
                          <div className="url-term-dot"/>
                          <div className="url-term-dot"/>
                        </div>
                        <span style={{ marginLeft: 6 }}>power_query.m</span>
                      </div>
                      <div className="url-term-body">
                        <div className="url-term-line">
                          <span className="term-prompt">let </span>Source = Json.Document(Web.Contents(<br/>
                          &nbsp;&nbsp;<span className="term-host">"https://api.bridge.choraapi.com.br/v1/empresa/{empresa.id}?token=</span><span className="term-token">{token}</span><span className="term-host">"</span><br/>
                          )) <span className="term-prompt">in</span> Source
                        </div>
                      </div>
                      <div className="url-term-foot">
                        <span>200 OK · 84 ms</span>
                        <button className="url-term-copy" onClick={() => copy(fullUrl)}>
                          <Icon name="copy" size={9}/> Copiar URL
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              )}
            </div>
            {isConnected && (
              <div className="card-footer">
                <div style={{ display: "flex", alignItems: "center", gap: 12, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--rev-t4)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 5 }}><Icon name="shield" size={11}/> Vault</span>
                  <span style={{ color: "var(--rev-s5)" }}>·</span>
                  <span>Token regenerado em {empresa.tokenCreated}</span>
                </div>
                <button className="btn btn-ghost btn-sm">
                  <Icon name="refresh" size={11}/> Rotacionar token
                </button>
              </div>
            )}
          </div>

          {/* Stats row */}
          {isConnected && (
            <div className="stat-row">
              <div className="stat-tile">
                <div className="stat-tile-label">Chamadas (24h)</div>
                <div className="stat-tile-val">{empresa.calls24h}</div>
                <div className="stat-tile-trend">+12% vs. ontem</div>
              </div>
              <div className="stat-tile">
                <div className="stat-tile-label">Latência média</div>
                <div className="stat-tile-val">{empresa.avgLatency}<span style={{ fontSize: 14, color: "var(--rev-t4)" }}> ms</span></div>
                <div className="stat-tile-sub">Bem abaixo do limite de 100s</div>
              </div>
              <div className="stat-tile">
                <div className="stat-tile-label">Refreshes (24h)</div>
                <div className="stat-tile-val">{empresa.refreshes}</div>
                <div className="stat-tile-sub">Automáticos via Edge Function</div>
              </div>
              <div className="stat-tile">
                <div className="stat-tile-label">Taxa de sucesso</div>
                <div className="stat-tile-val">99,4<span style={{ fontSize: 14, color: "var(--rev-t4)" }}>%</span></div>
                <div className="stat-tile-trend">Operacional</div>
              </div>
            </div>
          )}

          {/* Flow map */}
          <FlowMap activeStep={isConnected ? 3 : empresa.status === "connecting" ? 2 : 0}/>

          {/* Recent activity */}
          {isConnected && (
            <div className="card card-plain">
              <div className="card-body">
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
                  <div className="card-label">Atividade Recente</div>
                  <a onClick={() => setRoute({ name: "logs", empresaId: empresa.id })} style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--rev-orange)", letterSpacing: "0.1em", textTransform: "uppercase", cursor: "pointer", fontWeight: 600 }}>
                    Ver todos →
                  </a>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 0, marginTop: 4 }}>
                  {(empresa.recentLogs || []).slice(0, 5).map((l, i) => (
                    <div key={i} style={{ display: "grid", gridTemplateColumns: "82px 1fr auto auto", gap: 12, alignItems: "center", padding: "9px 0", borderTop: i === 0 ? "none" : "1px solid var(--rev-border)" }}>
                      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--rev-t4)" }}>{l.ts}</span>
                      <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--rev-t2)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                        <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>}
                      </div>
                      <span className={"badge " + (l.status >= 200 && l.status < 300 ? "badge-green" : l.status >= 400 ? "badge-red" : "badge-yellow")}>{l.status}</span>
                      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--rev-t4)" }}>{l.dur}ms</span>
                    </div>
                  ))}
                  {(!empresa.recentLogs || empresa.recentLogs.length === 0) && (
                    <div style={{ padding: "16px 0", color: "var(--rev-t4)", fontSize: 13, textAlign: "center" }}>
                      Nenhuma chamada registrada ainda. Assim que o Power BI fizer o primeiro request, ele aparecerá aqui.
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Right column */}
        <div className="dashboard-col">
          {isConnected ? (
            <>
              <div className="card card-plain">
                <div className="card-body">
                  <TokenTimer
                    minutesElapsed={empresa.minutesElapsed ?? 12}
                    total={30}
                  />
                </div>
              </div>

              <div className="card card-plain">
                <div className="card-body">
                  <div className="card-label">Vault</div>
                  <div className="card-title" style={{ fontSize: 14 }}>Credenciais armazenadas</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 0, marginTop: 6 }}>
                    <div className="kv-row">
                      <span className="kv-label">access_token</span>
                      <span className="kv-val mono" style={{ color: "var(--rev-orange)" }}>vault://{empresa.id.slice(0,8)}…/at</span>
                    </div>
                    <div className="kv-row">
                      <span className="kv-label">refresh_token</span>
                      <span className="kv-val mono" style={{ color: "var(--rev-orange)" }}>vault://{empresa.id.slice(0,8)}…/rt</span>
                    </div>
                    <div className="kv-row">
                      <span className="kv-label">Expira em</span>
                      <span className="kv-val">{30 - (empresa.minutesElapsed ?? 12)} min</span>
                    </div>
                    <div className="kv-row">
                      <span className="kv-label">Último refresh</span>
                      <span className="kv-val">{empresa.lastRefresh}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="card card-plain">
                <div className="card-body">
                  <div className="card-label">Como usar no Power BI</div>
                  <div className="card-title" style={{ fontSize: 14 }}>3 passos rápidos</div>
                  <ol style={{ paddingLeft: 18, marginTop: 6, fontSize: 13, color: "var(--rev-t3)", lineHeight: 1.7, display: "flex", flexDirection: "column", gap: 4 }}>
                    <li>Copie a URL ao lado.</li>
                    <li>No Power Query: <span className="mono" style={{ fontSize: 11, background: "var(--rev-s2)", padding: "1px 6px", borderRadius: 4 }}>Obter Dados → Web</span></li>
                    <li>Cole a URL. Pronto — refresh acontece sozinho.</li>
                  </ol>
                  <a style={{ marginTop: 10, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--rev-orange)", display: "flex", alignItems: "center", gap: 6, fontWeight: 600, cursor: "pointer" }}>
                    Guia completo <Icon name="external" size={11}/>
                  </a>
                </div>
              </div>
            </>
          ) : (
            <div className="card card-plain">
              <div className="card-body">
                <div className="card-label">Próximos passos</div>
                <div className="card-title" style={{ fontSize: 14 }}>O que falta para gerar a URL</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 6 }}>
                  <div style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "var(--rev-t3)", lineHeight: 1.55 }}>
                    <span className="badge badge-green" style={{ marginTop: 2 }}><Icon name="check" size={9}/></span>
                    Empresa cadastrada
                  </div>
                  <div style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "var(--rev-t1)", lineHeight: 1.55, fontWeight: 600 }}>
                    <span className="badge badge-orange" style={{ marginTop: 2 }}>2</span>
                    Autorizar Conta Azul (OAuth 2.0)
                  </div>
                  <div style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "var(--rev-t5)", lineHeight: 1.55 }}>
                    <span className="badge badge-neutral" style={{ marginTop: 2 }}>3</span>
                    Token estático gerado automaticamente
                  </div>
                  <div style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "var(--rev-t5)", lineHeight: 1.55 }}>
                    <span className="badge badge-neutral" style={{ marginTop: 2 }}>4</span>
                    Conectar URL no Power BI
                  </div>
                </div>
                <button className="btn btn-primary btn-block" style={{ marginTop: 14 }} onClick={reconnect}>
                  <Icon name="link" size={13}/> {empresa.status === "error" ? "Reconectar" : "Autorizar Conta Azul"}
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ════════════════════════════════════════════════════════════════
// DASHBOARD (root) — overview of everything
// ════════════════════════════════════════════════════════════════

const Dashboard = ({ user, empresas, setRoute }) => {
  const connected = empresas.filter(e => e.status === "connected" || e.status === "needs_refresh");
  const pending = empresas.filter(e => e.status === "pending");
  const errors = empresas.filter(e => e.status === "error");
  const totalCalls = empresas.reduce((s, e) => s + (e.calls24h || 0), 0);
  const totalRefreshes = empresas.reduce((s, e) => s + (e.refreshes || 0), 0);

  return (
    <div>
      <PageHead
        overline="Olá de novo"
        title={`Bom dia, ${user.name.split(" ")[0]}.`}
        sub="Aqui está o status de todas as suas conexões em uma página."
      >
        <button className="btn btn-primary" onClick={() => setRoute({ name: "empresa-new" })}>
          <Icon name="plus" size={14}/> Nova empresa
        </button>
      </PageHead>

      <div className="stat-row" style={{ marginBottom: 20, gridTemplateColumns: "repeat(4, 1fr)" }}>
        <div className="stat-tile">
          <div className="stat-tile-label">Empresas ativas</div>
          <div className="stat-tile-val">{connected.length}<span style={{ fontSize: 16, color: "var(--rev-t4)" }}> / {empresas.length}</span></div>
          <div className="stat-tile-sub">{pending.length} pendentes · {errors.length} com erro</div>
        </div>
        <div className="stat-tile">
          <div className="stat-tile-label">Chamadas (24h)</div>
          <div className="stat-tile-val">{totalCalls.toLocaleString("pt-BR")}</div>
          <div className="stat-tile-trend">+8% esta semana</div>
        </div>
        <div className="stat-tile">
          <div className="stat-tile-label">Refreshes (24h)</div>
          <div className="stat-tile-val">{totalRefreshes}</div>
          <div className="stat-tile-sub">100% automáticos</div>
        </div>
        <div className="stat-tile">
          <div className="stat-tile-label">Uptime do bridge</div>
          <div className="stat-tile-val">99,97<span style={{ fontSize: 16, color: "var(--rev-t4)" }}>%</span></div>
          <div className="stat-tile-trend">Operacional</div>
        </div>
      </div>

      <div className="dashboard-grid" style={{ gridTemplateColumns: "1.2fr 1fr" }}>
        <div className="dashboard-col">
          <div className="card card-plain">
            <div className="card-body">
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
                <div>
                  <div className="card-label">Suas empresas</div>
                  <div className="card-title" style={{ fontSize: 15, marginTop: 4 }}>Acesso rápido</div>
                </div>
                <a onClick={() => setRoute({ name: "empresas" })} style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--rev-orange)", letterSpacing: "0.1em", textTransform: "uppercase", cursor: "pointer", fontWeight: 600 }}>
                  Ver todas →
                </a>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 0, marginTop: 10 }}>
                {empresas.slice(0, 5).map((emp, i) => (
                  <div
                    key={emp.id}
                    onClick={() => setRoute({ name: "empresa", empresaId: emp.id })}
                    style={{ display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 12, alignItems: "center", padding: "12px 0", borderTop: i === 0 ? "none" : "1px solid var(--rev-border)", cursor: "pointer" }}
                  >
                    <div className="empresa-logo" style={{ width: 32, height: 32, fontSize: 11 }}>
                      {emp.nome.split(" ").map(s => s[0]).slice(0, 2).join("")}
                    </div>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, color: "var(--rev-t1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{emp.nome}</div>
                      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--rev-t4)" }}>{emp.cnpj}</div>
                    </div>
                    <StatusBadge status={emp.status}/>
                    <Icon name="chevronRight" size={14}/>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <FlowMap activeStep={3}/>
        </div>

        <div className="dashboard-col">
          <div className="card card-plain">
            <div className="card-body">
              <TokenTimer minutesElapsed={12} total={30}/>
              <div style={{ fontSize: 12, color: "var(--rev-t4)", marginTop: 8, lineHeight: 1.55, padding: "10px 12px", background: "var(--rev-s2)", borderRadius: 8, borderLeft: "2px solid var(--rev-orange)" }}>
                <strong style={{ color: "var(--rev-t2)" }}>Como funciona:</strong> a regra dos 30 minutos garante que tokens válidos sejam reusados,
                e dispara renovação automática on-the-fly quando necessário — sem ultrapassar o timeout do Power Query (100s).
              </div>
            </div>
          </div>

          <div className="card card-plain">
            <div className="card-body">
              <div className="card-label">Saúde da plataforma</div>
              <div className="card-title" style={{ fontSize: 14 }}>Tudo operacional</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 0, marginTop: 8 }}>
                <div className="kv-row">
                  <span className="kv-label flex items-center gap-6"><span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--rev-green)" }}/> Edge Function</span>
                  <span className="kv-val mono">42ms p95</span>
                </div>
                <div className="kv-row">
                  <span className="kv-label flex items-center gap-6"><span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--rev-green)" }}/> Vault</span>
                  <span className="kv-val mono">12ms p95</span>
                </div>
                <div className="kv-row">
                  <span className="kv-label flex items-center gap-6"><span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--rev-green)" }}/> Conta Azul API</span>
                  <span className="kv-val mono">186ms p95</span>
                </div>
                <div className="kv-row">
                  <span className="kv-label flex items-center gap-6"><span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--rev-yellow)" }}/> Power BI Proxy</span>
                  <span className="kv-val mono">312ms p95</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { EmpresaDetail, Dashboard });