"use client";

import { useState, useTransition } from "react";
import Image from "next/image";
import localFont from "next/font/local";
import { useRouter } from "next/navigation";
import { AlertTriangle, ArrowRight, Check, Eye, EyeOff, Link2, Loader2, Lock, Mail, MonitorSmartphone, ShieldCheck } from "lucide-react";

import { WhatsAppIcon } from "@/components/icons/whatsapp";
import { getSupabaseClient } from "@/lib/supabase";

/* A mesma fonte de títulos da tela de entrada: as duas são a porta da conta. */
/* A fonte sai dos arquivos do próprio app (next/font/local), e não do Google:
   o build não pode depender do Google Fonts. O next/font/google baixava a
   fonte durante o build e, quando o Google mudou o formato do endereço, o
   deploy caiu. O arquivo é a fonte variável do repositório google/fonts,
   cortada para latim e latim estendido (licença no OFL.txt ao lado). Há um
   item por peso que antes era pedido ao Google, todos no mesmo arquivo, para
   o navegador escolher os pesos exatamente como antes. As opções precisam ser
   literais: o next/font lê esse objeto em tempo de build. */
const sora = localFont({
  src: [
    { path: "../../../fonts/sora/Sora-Variavel.woff2", weight: "500", style: "normal" },
    { path: "../../../fonts/sora/Sora-Variavel.woff2", weight: "600", style: "normal" },
  ],
  display: "swap",
});

const LINK_AJUDA = `https://wa.me/5587988701216?text=${encodeURIComponent("Olá, preciso de ajuda para conectar um assistente à minha conta.")}`;

type Programa = {
  nome: string;
  conhecido: boolean;
  tipo: "site" | "computador" | "aplicativo";
  rotulo: string;
};

type Situacao =
  | { tipo: "erro"; mensagem: string }
  | { tipo: "entrar"; programa: Programa }
  | { tipo: "sem_acesso"; programa: Programa; mensagem: string; email: string | null; voltar: string }
  | { tipo: "permitir"; programa: Programa; email: string | null; empresa: string | null; pediuEscrita: boolean };

type Acesso = "leitura" | "escrita";

type RespostaDoClique = { destino?: string; resultado?: "permitido" | "cancelado" | "erro"; erro?: string };

const classeDoCampo =
  "block h-12 w-full rounded-[14px] border border-[#e6e6f2] bg-[#f7f7fb] pl-11 text-[15px] text-[#1a1a2b] placeholder:text-[#9494b0] outline-none transition-all duration-200 focus:border-[#7c3aed] focus:bg-white focus:ring-4 focus:ring-[#7c3aed]/15";

const botaoPrincipal =
  "flex h-[52px] w-full items-center justify-center gap-2.5 rounded-full bg-[#2e1065] text-[15px] font-bold text-white shadow-[0_12px_28px_-10px_rgba(46,16,101,0.55)] transition-all duration-200 hover:-translate-y-0.5 hover:bg-[#3b1a80] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#7c3aed]/30 disabled:pointer-events-none disabled:opacity-50";

const botaoDeTexto =
  "flex h-12 w-full items-center justify-center rounded-full text-[15px] font-semibold text-[#565672] transition-colors hover:bg-[#f4f5fb] hover:text-[#1a1a2b] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#7c3aed]/20 disabled:pointer-events-none disabled:opacity-50";

/* "o Claude", "o ChatGPT"; programa que escolheu o próprio nome vai entre aspas. */
function comArtigo(programa: Programa) {
  return programa.conhecido ? `o ${programa.nome}` : `“${programa.nome}”`;
}

function Aviso({ texto }: { texto: string }) {
  return (
    <div role="alert" className="flex items-start gap-3 rounded-[14px] border border-red-100 bg-red-50 px-4 py-3 text-[14px] font-medium leading-6 text-red-700">
      <AlertTriangle size={18} className="mt-0.5 shrink-0 text-red-600" />
      {texto}
    </div>
  );
}

/* A ligação desenhada: a Ktalogu de um lado, o assistente do outro. */
function Ligacao({ programa, escuro }: { programa: Programa | null; escuro: boolean }) {
  const letra = (programa?.nome || "A").trim().charAt(0).toUpperCase();
  return (
    <div className="flex items-center gap-3" aria-hidden="true">
      <span className={`flex h-16 w-16 items-center justify-center rounded-full ${escuro ? "bg-white" : "bg-[#2e1065]"}`}>
        <Image src={escuro ? "/brand-symbol-purple.svg" : "/brand-symbol.svg"} alt="" width={32} height={32} className="h-8 w-8" />
      </span>
      <span className={`flex items-center gap-1.5 ${escuro ? "text-white/60" : "text-[#9494b0]"}`}>
        <span className="h-px w-5 bg-current" />
        <Link2 size={18} />
        <span className="h-px w-5 bg-current" />
      </span>
      <span
        className={`flex h-16 w-16 items-center justify-center rounded-full text-[26px] font-extrabold ${
          escuro ? "bg-[#7c3aed] text-white ring-4 ring-white/15" : "bg-[#ece8f7] text-[#2e1065]"
        }`}
      >
        {letra}
      </span>
    </div>
  );
}

function Conta({ email, empresa, aoTrocar, trocando }: { email: string | null; empresa?: string | null; aoTrocar: () => void; trocando: boolean }) {
  const letra = (empresa || email || "?").trim().charAt(0).toUpperCase();
  return (
    <div className="flex items-center gap-3 border-y border-[#ececf3] py-4">
      <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[#2e1065] text-[17px] font-extrabold text-white">{letra}</span>
      <div className="min-w-0 flex-1">
        <p className="truncate text-[15px] font-bold text-[#1a1a2b]">{empresa || "Sua conta"}</p>
        {email ? <p className="truncate text-[13.5px] text-[#565672]">{email}</p> : null}
      </div>
      <button
        type="button"
        onClick={aoTrocar}
        disabled={trocando}
        className="shrink-0 rounded-full px-3 py-2 text-[13.5px] font-semibold text-[#5f31d6] transition-colors hover:bg-[#f4f5fb] hover:text-[#2e1065] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#7c3aed]/20 disabled:opacity-50"
      >
        {trocando ? "Saindo..." : "Trocar de conta"}
      </button>
    </div>
  );
}

function Escolha({
  valor,
  escolhido,
  aoEscolher,
  titulo,
  descricao,
}: {
  valor: Acesso;
  escolhido: Acesso | null;
  aoEscolher: (valor: Acesso) => void;
  titulo: string;
  descricao: string;
}) {
  const marcado = escolhido === valor;
  return (
    <label
      className={`flex cursor-pointer items-start gap-3.5 rounded-[16px] border px-4 py-3.5 transition-all duration-150 ${
        marcado ? "border-[#7c3aed] bg-white ring-4 ring-[#7c3aed]/15" : "border-[#e6e6f2] bg-white hover:border-[#c9c9dc]"
      }`}
    >
      <input type="radio" name="acesso" value={valor} checked={marcado} onChange={() => aoEscolher(valor)} className="peer sr-only" />
      <span
        className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-[1.5px] transition-colors peer-focus-visible:ring-4 peer-focus-visible:ring-[#7c3aed]/25 ${
          marcado ? "border-[#2e1065] bg-[#2e1065]" : "border-[#c9c9dc] bg-white"
        }`}
      >
        <Check size={12} strokeWidth={3.5} className={marcado ? "text-white" : "opacity-0"} />
      </span>
      <span className="min-w-0">
        <span className="block text-[15px] font-bold text-[#1a1a2b]">{titulo}</span>
        <span className="mt-0.5 block text-[13.5px] leading-[1.5] text-[#565672]">{descricao}</span>
      </span>
    </label>
  );
}

export default function TelaDePermissao({ situacao, parametros }: { situacao: Situacao; parametros: Record<string, string | undefined> }) {
  const router = useRouter();
  const [atualizando, comecarAtualizacao] = useTransition();

  const [email, setEmail] = useState("");
  const [senha, setSenha] = useState("");
  const [mostrarSenha, setMostrarSenha] = useState(false);
  const [entrando, setEntrando] = useState(false);

  const [acesso, setAcesso] = useState<Acesso | null>(null);
  const [enviando, setEnviando] = useState<"permitir" | "cancelar" | null>(null);
  const [indo, setIndo] = useState<"permitido" | "cancelado" | "erro" | null>(null);
  const [voltando, setVoltando] = useState(false);
  const [trocando, setTrocando] = useState(false);
  const [erro, setErro] = useState("");

  const programa = situacao.tipo === "erro" ? null : situacao.programa;

  async function entrar(evento: React.FormEvent) {
    evento.preventDefault();
    setErro("");
    setEntrando(true);
    const { error } = await getSupabaseClient().auth.signInWithPassword({ email: email.trim(), password: senha });
    if (error) {
      setErro("E-mail ou senha inválidos. Tente novamente.");
      setEntrando(false);
      return;
    }
    setSenha("");
    comecarAtualizacao(() => router.refresh());
    setEntrando(false);
  }

  async function trocarDeConta() {
    setErro("");
    setTrocando(true);
    /* Só esta sessão, neste navegador: os outros aparelhos da pessoa continuam logados. */
    await getSupabaseClient().auth.signOut({ scope: "local" });
    setAcesso(null);
    comecarAtualizacao(() => router.refresh());
    setTrocando(false);
  }

  async function decidir(decisao: "permitir" | "cancelar") {
    setErro("");
    setEnviando(decisao);
    try {
      const resposta = await fetch("/api/oauth/consentir", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ decisao, acesso, parametros }),
      });
      let dados: RespostaDoClique | null = null;
      try {
        dados = (await resposta.json()) as RespostaDoClique;
      } catch {
        dados = null;
      }
      if (resposta.ok && dados?.destino) {
        setIndo(dados.resultado ?? "erro");
        window.location.assign(dados.destino);
        return;
      }
      if (resposta.status === 401 || !dados) {
        setErro("A sua sessão terminou. Entre de novo para continuar.");
        comecarAtualizacao(() => router.refresh());
      } else {
        setErro(dados.erro || "Não foi possível concluir a conexão. Tente de novo.");
      }
    } catch {
      setErro("Sem conexão com a internet. Tente de novo.");
    } finally {
      setEnviando(null);
    }
  }

  const titulo = programa ? `Conectar ${comArtigo(programa)} à sua conta` : "Conectar um assistente";

  return (
    <div className="min-h-screen bg-white font-sans text-[#1a1a2b] selection:bg-[#2e1065] selection:text-white lg:grid lg:grid-cols-[minmax(0,46%)_minmax(0,54%)]">
      {/* O painel escuro, igual ao da tela de entrada. */}
      <aside className="relative hidden overflow-hidden bg-[#2e1065] px-14 py-12 text-white lg:flex lg:flex-col lg:justify-between">
        <div aria-hidden="true" className="pointer-events-none absolute -left-40 -top-40 h-[480px] w-[480px] rounded-full bg-[#7c3aed]/40 blur-3xl" />
        <div aria-hidden="true" className="pointer-events-none absolute -bottom-48 -right-32 h-[560px] w-[560px] rounded-full bg-[#5b21b6]/60 blur-3xl" />
        <div aria-hidden="true" className="pointer-events-none absolute -right-24 top-28 h-80 w-80 rounded-full border border-white/10" />

        <div className="relative">
          <Image src="/brand-logo.svg" alt="Ktalogu" width={150} height={34} className="h-8 w-auto" priority />
        </div>

        <div className="relative my-10">
          <Ligacao programa={programa} escuro />
          <h1 className={`${sora.className} mt-9 max-w-[16ch] text-[40px] font-semibold leading-[1.08] tracking-[-0.025em]`}>{titulo}</h1>
          <p className="mt-5 max-w-[38ch] text-[17px] leading-7 text-[#c4b5fd]">
            Você pede em conversa, e o assistente consulta a sua conta da Ktalogu por você: clientes, orçamentos, pedidos, estoque e financeiro.
          </p>
        </div>

        <div className="relative">
          <p className="text-[13.5px] font-semibold text-white/65">Ficou com dúvida?</p>
          <a
            href={LINK_AJUDA}
            target="_blank"
            rel="noreferrer"
            className="mt-3 inline-flex h-12 items-center gap-2.5 rounded-full bg-white pl-4 pr-5 text-[14.5px] font-bold text-[#2e1065] shadow-[0_12px_28px_-10px_rgba(0,0,0,0.5)] transition-all duration-200 hover:-translate-y-0.5 hover:bg-[#ece8f7]"
          >
            <WhatsAppIcon className="h-5 w-5 text-[#25D366]" />
            Chamar no WhatsApp
          </a>
        </div>
      </aside>

      <main className="flex min-h-screen items-center justify-center px-6 py-10 sm:px-10 lg:px-16">
        <div className="w-full max-w-[440px]">
          {/* No celular não há painel escuro: o logo e a ligação ficam aqui em cima. */}
          <div className="mb-8 flex flex-col items-center gap-6 lg:hidden">
            <Image src="/brand-logo-purple.svg" alt="Ktalogu" width={150} height={34} className="h-8 w-auto" priority />
            {programa ? <Ligacao programa={programa} escuro={false} /> : null}
          </div>

          {situacao.tipo === "erro" ? (
            <div>
              <h2 className={`${sora.className} text-[30px] font-semibold leading-[1.15] tracking-[-0.02em]`}>Não foi possível continuar</h2>
              <p className="mt-3 text-[15px] leading-7 text-[#565672]">{situacao.mensagem}</p>
              <p className="mt-6 text-[14px] font-medium text-[#9494b0]">Pode fechar esta janela.</p>
            </div>
          ) : null}

          {situacao.tipo === "entrar" ? (
            <div>
              <h2 className={`${sora.className} text-[30px] font-semibold leading-[1.15] tracking-[-0.02em]`}>Entre na sua conta</h2>
              <p className="mt-2 text-[15px] leading-6 text-[#565672]">
                É a mesma conta do painel da Ktalogu. Depois de entrar, você escolhe o que {comArtigo(situacao.programa)} pode fazer.
              </p>

              <form onSubmit={entrar} className="mt-8 space-y-5">
                <div className="space-y-2">
                  <label htmlFor="email" className="block text-[13px] font-semibold">
                    E-mail
                  </label>
                  <div className="group relative">
                    <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                      <Mail size={18} className="text-[#9494b0] transition-colors group-focus-within:text-[#7c3aed]" />
                    </div>
                    <input
                      id="email"
                      type="email"
                      required
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      placeholder="nome@empresa.com.br"
                      autoComplete="email"
                      className={`${classeDoCampo} pr-4`}
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <label htmlFor="senha" className="block text-[13px] font-semibold">
                      Senha
                    </label>
                    <a href="/" target="_blank" rel="noreferrer" className="text-[13px] font-semibold text-[#5f31d6] transition-colors hover:text-[#2e1065]">
                      Esqueceu a senha?
                    </a>
                  </div>
                  <div className="group relative">
                    <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                      <Lock size={18} className="text-[#9494b0] transition-colors group-focus-within:text-[#7c3aed]" />
                    </div>
                    <input
                      id="senha"
                      type={mostrarSenha ? "text" : "password"}
                      required
                      value={senha}
                      onChange={(e) => setSenha(e.target.value)}
                      placeholder="Sua senha"
                      autoComplete="current-password"
                      className={`${classeDoCampo} pr-12`}
                    />
                    <button
                      type="button"
                      onClick={() => setMostrarSenha(!mostrarSenha)}
                      className="absolute inset-y-0 right-0 flex items-center pr-4 text-[#9494b0] transition-colors hover:text-[#1a1a2b]"
                      tabIndex={-1}
                      aria-label={mostrarSenha ? "Esconder a senha" : "Mostrar a senha"}
                    >
                      {mostrarSenha ? <EyeOff size={18} /> : <Eye size={18} />}
                    </button>
                  </div>
                </div>

                {erro ? <Aviso texto={erro} /> : null}

                <button type="submit" disabled={entrando || atualizando} className={botaoPrincipal}>
                  {entrando || atualizando ? <Loader2 className="animate-spin" size={20} /> : null}
                  {entrando || atualizando ? "Entrando..." : "Entrar e continuar"}
                  {!entrando && !atualizando ? <ArrowRight size={19} /> : null}
                </button>
              </form>
            </div>
          ) : null}

          {situacao.tipo === "sem_acesso" ? (
            <div>
              <h2 className={`${sora.className} text-[30px] font-semibold leading-[1.15] tracking-[-0.02em]`}>Esta conta não pode conectar</h2>
              <p className="mt-3 text-[15px] leading-7 text-[#565672]">{situacao.mensagem}</p>

              <div className="mt-6">
                <Conta email={situacao.email} aoTrocar={trocarDeConta} trocando={trocando || atualizando} />
              </div>

              {erro ? (
                <div className="mt-5">
                  <Aviso texto={erro} />
                </div>
              ) : null}

              <div className="mt-6">
                <button
                  type="button"
                  onClick={() => {
                    setVoltando(true);
                    window.location.assign(situacao.voltar);
                  }}
                  disabled={voltando}
                  className={botaoPrincipal}
                >
                  Voltar para {comArtigo(situacao.programa)}
                </button>
              </div>
            </div>
          ) : null}

          {situacao.tipo === "permitir" ? (
            indo ? (
              <div>
                {indo === "permitido" ? (
                  <span className="flex h-14 w-14 items-center justify-center rounded-full bg-[#2e1065] text-white">
                    <Check size={26} strokeWidth={3} />
                  </span>
                ) : null}
                <h2 className={`${sora.className} ${indo === "permitido" ? "mt-6" : ""} text-[30px] font-semibold leading-[1.15] tracking-[-0.02em]`}>
                  {indo === "permitido" ? "Pronto, conectado" : indo === "cancelado" ? "Conexão cancelada" : "Não foi possível conectar"}
                </h2>
                <p className="mt-3 text-[15px] leading-7 text-[#565672]">
                  {indo === "cancelado" ? "Nada foi liberado. " : null}
                  Voltando para {comArtigo(situacao.programa)}. Se nada acontecer em alguns segundos, pode fechar esta janela e voltar para lá.
                </p>
              </div>
            ) : (
              <div>
                <h2 className={`${sora.className} text-[30px] font-semibold leading-[1.15] tracking-[-0.02em]`}>Permitir o acesso?</h2>
                <p className="mt-2 text-[15px] leading-6 text-[#565672]">
                  <strong className="font-bold text-[#1a1a2b]">{situacao.programa.conhecido ? `O ${situacao.programa.nome}` : `“${situacao.programa.nome}”`}</strong> quer
                  acessar a sua conta na Ktalogu.
                </p>

                <div className="mt-6">
                  <Conta email={situacao.email} empresa={situacao.empresa} aoTrocar={trocarDeConta} trocando={trocando || atualizando} />
                </div>

                <fieldset className="mt-6">
                  <legend className="text-[13px] font-semibold text-[#1a1a2b]">O que ele pode fazer</legend>
                  <div className="mt-3 space-y-2.5">
                    <Escolha
                      valor="leitura"
                      escolhido={acesso}
                      aoEscolher={setAcesso}
                      titulo="Só consultar"
                      descricao="Vê clientes, produtos, orçamentos, pedidos, estoque, agenda e financeiro. Não altera nada."
                    />
                    <Escolha
                      valor="escrita"
                      escolhido={acesso}
                      aoEscolher={setAcesso}
                      titulo="Consultar e criar"
                      descricao="Também cria e altera cadastros (clientes, orçamentos, produtos) e personaliza mensagens. Antes de gravar, mostra o que vai fazer e espera a sua confirmação."
                    />
                  </div>
                </fieldset>

                <p className="mt-5 flex items-start gap-2.5 text-[13.5px] leading-[1.55] text-[#565672]">
                  <ShieldCheck size={18} className="mt-px shrink-0 text-[#2e1065]" />
                  <span>Ele nunca exclui nada, não cancela pedido, não emite nota fiscal, não manda WhatsApp e não mexe com pagamento.</span>
                </p>

                <p className="mt-3 flex items-start gap-2.5 text-[13.5px] leading-[1.55] text-[#565672]">
                  <MonitorSmartphone size={18} className="mt-px shrink-0 text-[#2e1065]" />
                  <span>
                    {situacao.programa.tipo === "computador" ? (
                      <>
                        Quem pede é um programa neste computador, que se apresenta como “{situacao.programa.nome}”. Só permita se foi você que começou esta conexão
                        agora.
                      </>
                    ) : (
                      <>
                        Depois de permitir, você volta para {situacao.programa.rotulo}. Só permita se foi você que começou esta conexão agora, no {situacao.programa.nome}.
                      </>
                    )}
                  </span>
                </p>

                {erro ? (
                  <div className="mt-5">
                    <Aviso texto={erro} />
                  </div>
                ) : null}

                <div className="mt-7 flex flex-col gap-2">
                  <button type="button" onClick={() => decidir("permitir")} disabled={!acesso || enviando !== null || atualizando} className={botaoPrincipal}>
                    {enviando === "permitir" ? <Loader2 className="animate-spin" size={20} /> : null}
                    {enviando === "permitir" ? "Conectando..." : "Permitir"}
                  </button>
                  <button type="button" onClick={() => decidir("cancelar")} disabled={enviando !== null || atualizando} className={botaoDeTexto}>
                    {enviando === "cancelar" ? "Cancelando..." : "Cancelar"}
                  </button>
                </div>

                <p className="mt-5 text-center text-[12.5px] leading-5 text-[#9494b0]">
                  Dá para desligar esta conexão quando quiser, no painel, em Configurações, Integrações, Assistentes e Apps.
                </p>
              </div>
            )
          ) : null}

          {/* No celular a ajuda fica embaixo. */}
          <div className="mt-10 flex justify-center border-t border-[#ececf3] pt-6 lg:hidden">
            <a
              href={LINK_AJUDA}
              target="_blank"
              rel="noreferrer"
              className="inline-flex h-11 items-center gap-2 rounded-full bg-[#f4f5fb] pl-4 pr-5 text-[14px] font-bold text-[#1a1a2b] transition-colors hover:bg-[#ece8f7]"
            >
              <WhatsAppIcon className="h-5 w-5 text-[#25D366]" />
              Chamar no WhatsApp
            </a>
          </div>
        </div>
      </main>
    </div>
  );
}