// ════════════════════════════════════════════════════════════════
// OAUTH FLOW SCREEN — autorizando + callback + sucesso (FR3)
// ════════════════════════════════════════════════════════════════

const OAuthFlow = ({ empresa, setRoute, updateEmpresa, initialStage = 0, isStatic = false }) => {
  // stages: 0 = preview (consent), 1 = redirecting, 2 = on contaazul, 3 = callback (token exchange), 4 = success
  const [stage, setStage] = React.useState(initialStage);

  React.useEffect(() => {
    if (isStatic) return;
    if (stage === 1) {
      const t = setTimeout(() => setStage(2), 1200);
      return () => clearTimeout(t);
    }
    if (stage === 2) {
      const t = setTimeout(() => setStage(3), 2400);
      return () => clearTimeout(t);
    }
    if (stage === 3) {
      const t = setTimeout(() => setStage(4), 1800);
      return () => clearTimeout(t);
    }
    if (stage === 4) {
      updateEmpresa(empresa.id, {
        status: "connected",
        lastRefresh: "agora mesmo",
        lastCall: "há instantes",
        calls24h: 0,
      });
    }
  }, [stage]);

  const renderConsent = () => (
    <div className="oauth-stage" style={{ minHeight: 480 }}>
      <span className="oauth-step">Etapa 1 de 3 · Autorização</span>
      <h2 className="oauth-stage-title">Vamos conectar <span style={{ color: "var(--rev-orange)" }}>{empresa.nome}</span> à Conta Azul</h2>
      <p className="oauth-stage-sub">
        Você será redirecionado ao site da Conta Azul para autorizar o acesso. Nenhuma senha é compartilhada com a API Bridge —
        apenas um token de OAuth 2.0.
      </p>
      <FlowMap activeStep={1}/>
      <div className="oauth-checklist">
        <div className="oauth-check-item">
          <div className="oauth-check-item-mark"><Icon name="check" size={10}/></div>
          <div>O <span className="mono">state</span> da URL leva o <span className="mono">empresa_id</span> = <code style={{ fontFamily: "var(--font-mono)", color: "var(--rev-orange)" }}>{empresa.id}</code></div>
        </div>
        <div className="oauth-check-item">
          <div className="oauth-check-item-mark"><Icon name="check" size={10}/></div>
          <div>Escopo solicitado: <span className="mono">sales</span></div>
        </div>
        <div className="oauth-check-item">
          <div className="oauth-check-item-mark"><Icon name="check" size={10}/></div>
          <div><span className="mono">access_token</span> + <span className="mono">refresh_token</span> serão armazenados no Vault</div>
        </div>
      </div>
      <div style={{ display: "flex", gap: 10, marginTop: 12 }}>
        <button className="btn btn-ghost" onClick={() => setRoute({ name: "empresa", empresaId: empresa.id })}>
          Cancelar
        </button>
        <button className="btn btn-primary btn-lg" onClick={() => setStage(1)}>
          Autorizar na Conta Azul <Icon name="external" size={14}/>
        </button>
      </div>
    </div>
  );

  const renderRedirecting = () => (
    <div className="oauth-stage">
      <span className="oauth-step">Redirecionando</span>
      <div className="oauth-spinner oauth-spinner-lg"/>
      <h2 className="oauth-stage-title">Levando você até a Conta Azul…</h2>
      <p className="oauth-stage-sub mono" style={{ fontSize: 12 }}>
        GET /auth/authorize?client_id=••••&scope=sales&state={empresa.id}
      </p>
      <FlowMap activeStep={2}/>
    </div>
  );

  const renderOnContaAzul = () => (
    <div className="oauth-stage" style={{ padding: 0, overflow: "hidden" }}>
      {/* Simulated Conta Azul consent screen */}
      <div style={{ width: "100%", maxWidth: 720, margin: "0 auto", background: "#fff", borderRadius: 14, overflow: "hidden" }}>
        <div style={{ background: "#0099ff", padding: "14px 24px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, color: "#fff" }}>
            <ContaAzulMark size={26}/>
            <span style={{ fontWeight: 700, fontSize: 16, letterSpacing: "-0.02em" }}>Conta Azul</span>
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "rgba(255,255,255,0.7)", letterSpacing: "0.1em" }}>app.contaazul.com</div>
        </div>
        <div style={{ padding: "32px 32px 28px", display: "flex", flexDirection: "column", gap: 18, textAlign: "left" }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "#0099ff", fontFamily: "var(--font-mono)" }}>Autorizar Aplicativo</div>
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 800, color: "#0a0a0a", letterSpacing: "-0.03em", lineHeight: 1.2 }}>
            A <span style={{ color: "var(--rev-orange)" }}>API Bridge</span> está solicitando acesso à sua conta
          </h3>
          <div style={{ background: "#f6f8fa", border: "1px solid #e1e4e8", borderRadius: 10, padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
            <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "#525252", fontWeight: 600 }}>Permissões solicitadas</div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "#1f1f1f" }}>
              <div style={{ width: 20, height: 20, borderRadius: 6, background: "rgba(0,153,255,0.1)", color: "#0099ff", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name="check" size={11}/>
              </div>
              Ler dados de vendas (<span style={{ fontFamily: "var(--font-mono)", color: "#0099ff" }}>sales</span>)
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "#1f1f1f" }}>
              <div style={{ width: 20, height: 20, borderRadius: 6, background: "rgba(0,153,255,0.1)", color: "#0099ff", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name="check" size={11}/>
              </div>
              Manter sessão ativa (refresh_token)
            </div>
          </div>
          <div style={{ fontSize: 12, color: "#737373", lineHeight: 1.55 }}>
            Empresa autorizando: <strong style={{ color: "#1f1f1f" }}>{empresa.nome}</strong> · CNPJ {empresa.cnpj}
          </div>
          <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 8 }}>
            <button className="btn btn-ghost" disabled style={{ opacity: 0.7 }}>Cancelar</button>
            <button className="btn" style={{ background: "#0099ff", color: "#fff", display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span className="oauth-spinner" style={{ width: 12, height: 12, borderWidth: 2, borderTopColor: "#fff", borderColor: "rgba(255,255,255,0.3) rgba(255,255,255,0.3) rgba(255,255,255,0.3) #fff" }}/>
              Autorizando…
            </button>
          </div>
        </div>
      </div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--rev-t4)", letterSpacing: "0.15em", textTransform: "uppercase", padding: "16px 0" }}>
        Simulação · O usuário autoriza no domínio da Conta Azul
      </div>
    </div>
  );

  const renderCallback = () => {
    const items = [
      { label: "Recebendo authorization code", status: "done" },
      { label: "Trocando code por access_token + refresh_token", status: "active" },
      { label: "Armazenando credenciais no Supabase Vault", status: "pending" },
      { label: "Gerando token estático para o Power BI", status: "pending" },
    ];
    return (
      <div className="oauth-stage">
        <span className="oauth-step">Etapa 2 de 3 · Callback</span>
        <div className="oauth-spinner oauth-spinner-lg"/>
        <h2 className="oauth-stage-title">Finalizando a integração</h2>
        <p className="oauth-stage-sub">A Edge Function do Supabase recebeu o <span className="mono">code</span> e está trocando-o pelos tokens da Conta Azul.</p>
        <div className="oauth-checklist">
          {items.map((it, i) => (
            <div key={i} className={"oauth-check-item " + it.status}>
              <div className="oauth-check-item-mark">
                {it.status === "done" && <Icon name="check" size={10}/>}
                {it.status === "active" && <span className="oauth-spinner" style={{ width: 10, height: 10, borderWidth: 2 }}/>}
                {it.status === "pending" && <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--rev-s5)" }}/>}
              </div>
              <span>{it.label}</span>
            </div>
          ))}
        </div>
      </div>
    );
  };

  const renderSuccess = () => (
    <div className="oauth-stage">
      <span className="oauth-step">Etapa 3 de 3 · Pronto!</span>
      <div className="oauth-check">
        <Icon name="check" size={42} stroke={2.5}/>
      </div>
      <h2 className="oauth-stage-title">{empresa.nome} está conectada</h2>
      <p className="oauth-stage-sub">
        Os tokens foram armazenados com segurança no Vault e sua URL estática para o Power BI já está disponível.
      </p>
      <FlowMap activeStep={3}/>
      <button className="btn btn-primary btn-lg" onClick={() => setRoute({ name: "empresa", empresaId: empresa.id })}>
        Ver URL do Power BI <Icon name="arrowRight" size={14}/>
      </button>
    </div>
  );

  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: "empresa", empresaId: empresa.id })} style={{ cursor: "pointer", textTransform: "uppercase", letterSpacing: "0.1em" }}>← {empresa.nome}</a>
      </div>
      <PageHead
        overline="Autorização Conta Azul"
        title="Conectando à Conta Azul"
        sub="Fluxo OAuth 2.0 com proteção via state, troca de tokens via Edge Function e armazenamento no Vault."
      />
      {stage === 0 && renderConsent()}
      {stage === 1 && renderRedirecting()}
      {stage === 2 && renderOnContaAzul()}
      {stage === 3 && renderCallback()}
      {stage === 4 && renderSuccess()}
    </div>
  );
};

Object.assign(window, { OAuthFlow });