"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { CircleNotch as Loader2, EnvelopeSimple as Mail, LockSimple as Lock } from "@phosphor-icons/react";

import { getReadableTextColor } from "@/lib/color-contrast";

/*
 * A entrada da área de membros: o e-mail, depois o código de 6 números que
 * chega nele. Sem senha. Quem tem senha na loja também pode entrar por ela.
 */

export default function EntrarNosMembros({
  slug,
  nomeDaArea,
  nomeDaLoja,
  cor,
  escuro,
  titulo = "Minhas compras",
  destino,
}: {
  slug: string;
  nomeDaArea: string;
  nomeDaLoja: string;
  cor: string;
  escuro: boolean;
  /* Na página de um curso: "Entre para assistir". */
  titulo?: string;
  /* Para onde a senha volta (o código só recarrega a página em que está). */
  destino?: string;
}) {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [codigo, setCodigo] = useState("");
  const [passo, setPasso] = useState<"email" | "codigo">("email");
  const [enviando, setEnviando] = useState(false);
  const [mensagem, setMensagem] = useState<string | null>(null);
  const [erro, setErro] = useState<string | null>(null);
  const [podeReenviarEm, setPodeReenviarEm] = useState(0);
  const [agora, setAgora] = useState(() => Date.now());
  const campoDoCodigo = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    if (passo !== "codigo") return;
    campoDoCodigo.current?.focus();
    const relogio = window.setInterval(() => setAgora(Date.now()), 1000);
    return () => window.clearInterval(relogio);
  }, [passo]);

  async function pedirCodigo() {
    if (enviando) return;
    const limpo = email.trim().toLowerCase();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(limpo)) {
      setErro("Confira o e-mail.");
      return;
    }
    setEnviando(true);
    setErro(null);
    try {
      const resposta = await fetch("/api/digitais/membros/codigo", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ slug, email: limpo }),
      });
      const corpo = (await resposta.json().catch(() => null)) as { message?: string; error?: string } | null;
      if (!resposta.ok) throw new Error(corpo?.error || "Não foi possível mandar o código agora.");
      setMensagem(corpo?.message || "Se este e-mail tiver compras nesta loja, o código chega em até 1 minuto.");
      setPasso("codigo");
      setCodigo("");
      setPodeReenviarEm(Date.now() + 60_000);
    } catch (e) {
      setErro(e instanceof Error ? e.message : "Não foi possível mandar o código agora.");
    } finally {
      setEnviando(false);
    }
  }

  async function entrar() {
    if (enviando) return;
    const digitos = codigo.replace(/\D/g, "");
    if (digitos.length !== 6) {
      setErro("O código tem 6 números.");
      return;
    }
    setEnviando(true);
    setErro(null);
    try {
      const resposta = await fetch("/api/digitais/membros/entrar", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ slug, email: email.trim().toLowerCase(), codigo: digitos }),
      });
      const corpo = (await resposta.json().catch(() => null)) as { error?: string } | null;
      if (!resposta.ok) throw new Error(corpo?.error || "Código errado ou vencido.");
      router.refresh();
    } catch (e) {
      setErro(e instanceof Error ? e.message : "Código errado ou vencido.");
      setEnviando(false);
    }
  }

  const faltam = Math.max(0, Math.ceil((podeReenviarEm - agora) / 1000));
  const fundo = escuro ? "bg-[#0B0B12] text-white" : "bg-[#F7F8FB] text-[#1B2440]";
  const cartao = escuro ? "border-white/10 bg-[#14141D]" : "border-[#ECEEF3] bg-white";
  const suave = escuro ? "text-white/60" : "text-[#5E6478]";
  const campo = escuro
    ? "border-white/15 bg-white/5 text-white placeholder:text-white/35 focus:border-white/40"
    : "border-[#E2E5EC] bg-white text-[#1B2440] placeholder:text-[#A3A9B8] focus:border-[#1B2440]/40";

  return (
    <div className={`flex min-h-screen flex-col ${fundo}`}>
      <main className="flex flex-1 items-center justify-center px-4 py-10">
        <div className={`w-full max-w-[420px] rounded-[22px] border p-6 sm:p-8 ${cartao}`}>
          <div className="text-[13px] font-bold uppercase tracking-[0.14em]" style={{ color: cor }}>
            {nomeDaArea}
          </div>
          <h1 className="mt-2 text-[24px] font-bold leading-tight">{titulo}</h1>
          <p className={`mt-2 text-[13.5px] leading-6 ${suave}`}>
            {passo === "email"
              ? "Entre com o e-mail do seu cadastro na loja. Mandamos um código na hora, sem senha."
              : mensagem || "Digite o código de 6 números que mandamos para o seu e-mail."}
          </p>

          {passo === "email" ? (
            <form
              className="mt-5 space-y-3"
              onSubmit={(e) => {
                e.preventDefault();
                void pedirCodigo();
              }}
              noValidate
            >
              <label className="block">
                <span className="mb-1.5 block text-[12px] font-semibold">E-mail</span>
                <div className="relative">
                  <Mail className={`pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 ${suave}`} />
                  <input
                    type="email"
                    inputMode="email"
                    autoComplete="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="voce@exemplo.com"
                    className={`h-12 w-full rounded-xl border-[1.5px] pl-10 pr-3.5 text-[14px] outline-none transition ${campo}`}
                  />
                </div>
              </label>
              {erro ? <p className="text-[12.5px] text-[#F87171]">{erro}</p> : null}
              <button
                type="submit"
                disabled={enviando}
                className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl text-[15px] font-bold transition hover:opacity-90 disabled:opacity-60"
                style={{ backgroundColor: cor, color: getReadableTextColor(cor) }}
              >
                {enviando ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
                Receber código
              </button>
            </form>
          ) : (
            <form
              className="mt-5 space-y-3"
              onSubmit={(e) => {
                e.preventDefault();
                void entrar();
              }}
              noValidate
            >
              <label className="block">
                <span className="mb-1.5 block text-[12px] font-semibold">Código</span>
                <input
                  ref={campoDoCodigo}
                  inputMode="numeric"
                  autoComplete="one-time-code"
                  value={codigo}
                  onChange={(e) => setCodigo(e.target.value.replace(/\D/g, "").slice(0, 6))}
                  placeholder="000000"
                  className={`h-14 w-full rounded-xl border-[1.5px] px-3.5 text-center text-[24px] font-bold tracking-[0.4em] outline-none transition ${campo}`}
                />
              </label>
              {erro ? <p className="text-[12.5px] text-[#F87171]">{erro}</p> : null}
              <button
                type="submit"
                disabled={enviando}
                className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl text-[15px] font-bold transition hover:opacity-90 disabled:opacity-60"
                style={{ backgroundColor: cor, color: getReadableTextColor(cor) }}
              >
                {enviando ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
                Entrar
              </button>
              <div className={`flex flex-wrap items-center justify-between gap-2 text-[12.5px] ${suave}`}>
                <button
                  type="button"
                  className="font-semibold underline-offset-2 hover:underline"
                  onClick={() => {
                    setPasso("email");
                    setErro(null);
                  }}
                >
                  Usar outro e-mail
                </button>
                <button
                  type="button"
                  className="font-semibold underline-offset-2 hover:underline disabled:opacity-50 disabled:no-underline"
                  disabled={faltam > 0 || enviando}
                  onClick={() => void pedirCodigo()}
                >
                  {faltam > 0 ? `Reenviar em ${faltam}s` : "Reenviar código"}
                </button>
              </div>
            </form>
          )}

          <div className={`mt-6 border-t pt-4 text-[12.5px] ${escuro ? "border-white/10" : "border-[#ECEEF3]"} ${suave}`}>
            <span className="inline-flex items-center gap-1.5">
              <Lock className="h-3.5 w-3.5" />
              Tem senha na loja?
            </span>{" "}
            <Link href={`/${slug}/cliente/login?next=${encodeURIComponent(destino || `/${slug}/membros`)}`} className="font-semibold underline-offset-2 hover:underline">
              Entrar com senha
            </Link>
          </div>
        </div>
      </main>
      <footer className={`px-4 pb-6 text-center text-[12px] ${suave}`}>
        {nomeDaArea === nomeDaLoja ? nomeDaLoja : `${nomeDaArea} · uma área da ${nomeDaLoja}`} ·{" "}
        <Link href={`/${slug}`} className="underline-offset-2 hover:underline">
          Ir para a loja
        </Link>
      </footer>
    </div>
  );
}