// ════════════════════════════════════════════════════════════════
// AUTH SCREEN — Login / Cadastro (FR1)
// ════════════════════════════════════════════════════════════════

const AuthScreen = ({ onLogin }) => {
  const [mode, setMode] = React.useState("login"); // login | signup
  const [email, setEmail] = React.useState("rafa@chora.com.br");
  const [password, setPassword] = React.useState("••••••••••");
  const [name, setName] = React.useState("");
  const [showPwd, setShowPwd] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [errors, setErrors] = React.useState({});

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!email) errs.email = "Informe seu e-mail";
    else if (!/^[^@]+@[^@]+\.[^@]+$/.test(email)) errs.email = "E-mail inválido";
    if (!password || password.length < 6) errs.password = "Mínimo 6 caracteres";
    if (mode === "signup" && !name) errs.name = "Informe seu nome";
    setErrors(errs);
    if (Object.keys(errs).length) return;
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      onLogin({ name: mode === "signup" ? name : "Rafa Lemos", email });
    }, 900);
  };

  return (
    <div className="auth-shell">
      <aside className="auth-aside">
        <div className="auth-aside-content">
          <div className="auth-brand">
            <div className="auth-brand-mark"><BridgeMark size={20}/></div>
            <div>
              <div className="auth-brand-name">API Bridge</div>
              <div className="auth-brand-sub">Revolution · Chora API</div>
            </div>
          </div>

          <div className="auth-hero">
            <span className="auth-hero-overline">OAuth Conta Azul ↔ Power BI</span>
            <h1 className="auth-hero-title">
              Conecte a <span className="grad">Conta Azul</span> ao Power BI em 3 passos.
            </h1>
            <p className="auth-hero-sub">
              Middleware para empresas que sofrem com OAuth 2.0 no Power Query. Refresh token automático,
              endpoint estático, vault criptografado. Sem gateway, sem dor.
            </p>
          </div>

          <div className="auth-bullets">
            <div className="auth-bullet">
              <span className="auth-bullet-num">1</span>
              <div>Cadastre sua empresa e autorize a Conta Azul.</div>
            </div>
            <div className="auth-bullet">
              <span className="auth-bullet-num">2</span>
              <div>Receba uma URL estática pronta para o Power BI.</div>
            </div>
            <div className="auth-bullet">
              <span className="auth-bullet-num">3</span>
              <div>Renovação dos tokens acontece sozinha, em background.</div>
            </div>
          </div>

          <div className="auth-trust">
            <span className="auth-trust-item">LGPD compliant</span>
            <span className="auth-trust-item">Vault criptografado</span>
            <span className="auth-trust-item">Zero cache financeiro</span>
          </div>
        </div>
      </aside>

      <section className="auth-pane">
        <form className="auth-form-wrap" onSubmit={submit}>
          <div className="auth-tabs">
            <button type="button" className={"auth-tab" + (mode === "login" ? " active" : "")} onClick={() => setMode("login")}>Entrar</button>
            <button type="button" className={"auth-tab" + (mode === "signup" ? " active" : "")} onClick={() => setMode("signup")}>Criar conta</button>
          </div>

          <div className="flex-col gap-6">
            <h2 className="auth-form-title">{mode === "login" ? "Bem-vindo de volta" : "Crie sua conta"}</h2>
            <p className="auth-form-sub" style={{ marginTop: 0 }}>
              {mode === "login" ? "Acesse o painel para gerenciar suas conexões" : "Comece com 7 dias de teste, sem cartão"}
            </p>
          </div>

          {mode === "signup" && (
            <div className="field">
              <label className="field-label field-label-req">Nome completo</label>
              <input
                className={"input" + (errors.name ? " is-error" : "")}
                placeholder="Como podemos te chamar?"
                value={name}
                onChange={e => setName(e.target.value)}
              />
              {errors.name && <span className="field-error">{errors.name}</span>}
            </div>
          )}

          <div className="field">
            <label className="field-label field-label-req">E-mail</label>
            <input
              type="email"
              className={"input" + (errors.email ? " is-error" : "")}
              placeholder="seu@email.com"
              value={email}
              onChange={e => setEmail(e.target.value)}
            />
            {errors.email && <span className="field-error">{errors.email}</span>}
          </div>

          <div className="field">
            <label className="field-label field-label-req">Senha</label>
            <div className="input-affix" style={{ borderColor: errors.password ? "rgba(255,68,68,0.5)" : undefined }}>
              <input
                type={showPwd ? "text" : "password"}
                className="input"
                placeholder="Sua senha"
                value={password}
                onChange={e => setPassword(e.target.value)}
              />
              <button
                type="button"
                className="input-affix-suffix"
                style={{ border: "none", borderLeft: "1px solid var(--rev-border)", cursor: "pointer", background: "var(--rev-s3)" }}
                onClick={() => setShowPwd(s => !s)}
              >
                <Icon name={showPwd ? "eyeOff" : "eye"} size={14}/>
              </button>
            </div>
            {errors.password && <span className="field-error">{errors.password}</span>}
          </div>

          {mode === "login" && (
            <div className="flex items-center justify-between">
              <label className="checkbox">
                <input type="checkbox" defaultChecked/>
                <span className="checkbox-box"></span>
                Lembrar de mim
              </label>
              <a className="text-sm" style={{ color: "var(--rev-orange)", fontWeight: 600 }} href="#">Esqueci a senha</a>
            </div>
          )}

          <button type="submit" className="btn btn-primary btn-lg btn-block" disabled={loading}>
            {loading ? (
              <><span className="oauth-spinner" style={{ width: 16, height: 16, borderWidth: 2 }}/> Entrando…</>
            ) : (
              <>{mode === "login" ? "Entrar na plataforma" : "Criar minha conta"} <Icon name="arrowRight" size={14}/></>
            )}
          </button>

          <div className="auth-meta">
            🔒 Acesso 100% seguro · supabase auth · 256-bit TLS
          </div>
        </form>
      </section>
    </div>
  );
};

// ════════════════════════════════════════════════════════════════
// EMPRESAS LIST
// ════════════════════════════════════════════════════════════════

const EmpresasList = ({ empresas, setRoute, cardLayout }) => {
  return (
    <div>
      <PageHead
        overline="Minhas empresas"
        title="Empresas conectadas"
        sub="Gerencie todas as suas conexões OAuth com a Conta Azul. Cada empresa terá sua própria URL estática para o Power BI."
      >
        <button className="btn btn-ghost btn-sm">
          <Icon name="download" size={13}/> Exportar
        </button>
        <button className="btn btn-primary" onClick={() => setRoute({ name: "empresa-new" })}>
          <Icon name="plus" size={14}/> Nova empresa
        </button>
      </PageHead>

      <div className="empresas-grid">
        {empresas.map(emp => (
          <div
            key={emp.id}
            className={"empresa-card" + (emp.status === "error" ? " is-error" : "") + (cardLayout === "row" ? " layout-row" : "")}
            onClick={() => setRoute({ name: "empresa", empresaId: emp.id })}
          >
            <div className="empresa-card-top">
              <div className="empresa-logo">{emp.nome.split(" ").map(s => s[0]).slice(0,2).join("")}</div>
              <div className="empresa-info">
                <div className="empresa-name">{emp.nome}</div>
                <div className="empresa-cnpj">{emp.cnpj}</div>
              </div>
              <StatusBadge status={emp.status}/>
            </div>
            {cardLayout !== "row" && (
              <div className="empresa-stats">
                <div className="empresa-stat">
                  <div className="empresa-stat-label">Chamadas (24h)</div>
                  <div className="empresa-stat-val">{emp.status === "pending" ? "—" : emp.calls24h}</div>
                </div>
                <div className="empresa-stat">
                  <div className="empresa-stat-label">Último refresh</div>
                  <div className="empresa-stat-val">{emp.status === "pending" ? "—" : emp.lastRefresh}</div>
                </div>
              </div>
            )}
            <div className="empresa-card-foot">
              <div className="empresa-foot-meta">
                {emp.status === "connected" && (
                  <>
                    <span className="live-pulse"/>
                    Ativa · {emp.lastCall}
                  </>
                )}
                {emp.status === "needs_refresh" && (
                  <>
                    <Icon name="clock" size={11}/>
                    Token expira em 2 min
                  </>
                )}
                {emp.status === "pending" && (
                  <>
                    <Icon name="alert" size={11}/>
                    Aguardando OAuth
                  </>
                )}
                {emp.status === "connecting" && (
                  <>
                    <Icon name="refresh" size={11}/>
                    Sincronizando…
                  </>
                )}
                {emp.status === "error" && (
                  <>
                    <Icon name="alert" size={11}/>
                    refresh_token inválido
                  </>
                )}
              </div>
              <button
                className="btn btn-ghost btn-sm"
                onClick={(e) => { e.stopPropagation(); setRoute({ name: "empresa", empresaId: emp.id }); }}
              >
                Abrir <Icon name="arrowRight" size={12}/>
              </button>
            </div>
          </div>
        ))}

        <div className="empresa-new" onClick={() => setRoute({ name: "empresa-new" })}>
          <div className="empresa-new-icon"><Icon name="plus" size={20}/></div>
          Adicionar nova empresa
          <span style={{ fontSize: 11, fontWeight: 400, color: "var(--rev-t5)" }}>CNPJ + autorização Conta Azul</span>
        </div>
      </div>
    </div>
  );
};

// ════════════════════════════════════════════════════════════════
// EMPRESA — NEW (Cadastro · FR2)
// ════════════════════════════════════════════════════════════════

const formatCNPJ = (raw) => {
  const d = raw.replace(/\D/g, "").slice(0, 14);
  return d
    .replace(/^(\d{2})(\d)/, "$1.$2")
    .replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3")
    .replace(/\.(\d{3})(\d)/, ".$1/$2")
    .replace(/(\d{4})(\d)/, "$1-$2");
};

const EmpresaNew = ({ setRoute, addEmpresa }) => {
  const [nome, setNome] = React.useState("");
  const [razao, setRazao] = React.useState("");
  const [cnpj, setCnpj] = React.useState("");
  const [segmento, setSegmento] = React.useState("");
  const [autoOAuth, setAutoOAuth] = React.useState(true);
  const [errors, setErrors] = React.useState({});
  const [saving, setSaving] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!nome.trim()) errs.nome = "Informe o nome da empresa";
    if (cnpj.replace(/\D/g, "").length !== 14) errs.cnpj = "CNPJ deve ter 14 dígitos";
    setErrors(errs);
    if (Object.keys(errs).length) return;
    setSaving(true);
    setTimeout(() => {
      setSaving(false);
      const newEmp = addEmpresa({
        nome, razao, cnpj, segmento,
        status: autoOAuth ? "connecting" : "pending",
      });
      if (autoOAuth) {
        setRoute({ name: "oauth", empresaId: newEmp.id });
      } else {
        setRoute({ name: "empresa", empresaId: newEmp.id });
      }
    }, 700);
  };

  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>
      </div>
      <PageHead
        overline="Nova empresa"
        title="Cadastrar empresa"
        sub="Preencha os dados básicos. A próxima etapa será autorizar a integração com a Conta Azul via OAuth 2.0."
      />

      <form className="form-wrap" onSubmit={submit}>
        <div className="form-step-head">
          <div className="form-step-title">Dados da empresa</div>
          <div className="form-step-sub">Estes dados serão usados como rótulos no painel. Não são enviados à Conta Azul.</div>
        </div>

        <div className="form-grid">
          <div className="field form-grid-full">
            <label className="field-label field-label-req">Nome da empresa</label>
            <input
              className={"input" + (errors.nome ? " is-error" : "")}
              placeholder="Ex: Padaria Pão Quente"
              value={nome}
              onChange={e => setNome(e.target.value)}
              autoFocus
            />
            {errors.nome ? (
              <span className="field-error">{errors.nome}</span>
            ) : (
              <span className="field-hint">Nome fantasia da empresa — aparece nos cards e logs.</span>
            )}
          </div>

          <div className="field form-grid-full">
            <label className="field-label">Razão social</label>
            <input
              className="input"
              placeholder="Ex: Pão Quente Comércio de Alimentos LTDA"
              value={razao}
              onChange={e => setRazao(e.target.value)}
            />
          </div>

          <div className="field">
            <label className="field-label field-label-req">CNPJ</label>
            <input
              className={"input" + (errors.cnpj ? " is-error" : "")}
              placeholder="00.000.000/0000-00"
              value={cnpj}
              onChange={e => setCnpj(formatCNPJ(e.target.value))}
              maxLength={18}
            />
            {errors.cnpj && <span className="field-error">{errors.cnpj}</span>}
          </div>

          <div className="field">
            <label className="field-label">Segmento</label>
            <select className="select" value={segmento} onChange={e => setSegmento(e.target.value)}>
              <option value="">Selecione…</option>
              <option>Varejo</option>
              <option>Alimentação</option>
              <option>Serviços</option>
              <option>Indústria</option>
              <option>E-commerce</option>
              <option>Outro</option>
            </select>
          </div>
        </div>

        <div style={{ borderTop: "1px solid var(--rev-border)", paddingTop: 20, display: "flex", flexDirection: "column", gap: 14 }}>
          <label className="checkbox" style={{ alignItems: "flex-start" }}>
            <input type="checkbox" checked={autoOAuth} onChange={e => setAutoOAuth(e.target.checked)}/>
            <span className="checkbox-box" style={{ marginTop: 2 }}></span>
            <div>
              <div style={{ fontWeight: 600, color: "var(--rev-t2)" }}>Iniciar autorização da Conta Azul em seguida</div>
              <div style={{ fontSize: 12, color: "var(--rev-t4)", marginTop: 2 }}>
                Recomendado. Sem este passo, a URL para o Power BI não é gerada.
              </div>
            </div>
          </label>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, borderTop: "1px solid var(--rev-border)", paddingTop: 20 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--rev-t4)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
            <Icon name="shield" size={11}/> Dados criptografados no Supabase Vault
          </span>
          <div style={{ display: "flex", gap: 10 }}>
            <button type="button" className="btn btn-ghost" onClick={() => setRoute({ name: "empresas" })}>Cancelar</button>
            <button type="submit" className="btn btn-primary" disabled={saving}>
              {saving ? (
                <><span className="oauth-spinner" style={{ width: 14, height: 14, borderWidth: 2 }}/> Salvando…</>
              ) : (
                <>{autoOAuth ? "Salvar e autorizar" : "Salvar"} <Icon name="arrowRight" size={13}/></>
              )}
            </button>
          </div>
        </div>
      </form>
    </div>
  );
};

Object.assign(window, { AuthScreen, EmpresasList, EmpresaNew, formatCNPJ });