"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { getSupabaseClient } from "@/lib/supabase";
import { Loader2, Lock, ArrowRight, Sparkles } from "lucide-react";
import { motion } from "framer-motion";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import Image from "next/image";

export default function ResetPasswordPage() {
  const router = useRouter();
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [saving, setSaving] = useState(false);
  const [ready, setReady] = useState(false);
  const [hasSession, setHasSession] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

  function mapResetError(error?: string | null, errorCode?: string | null, description?: string | null) {
    const haystack = `${error ?? ""} ${errorCode ?? ""} ${description ?? ""}`.toLowerCase();

    if (haystack.includes("pkce code verifier") || haystack.includes("pkce_verifier_missing")) {
      return "Não foi possível validar este link neste navegador. Solicite um novo link de recuperação.";
    }

    if (haystack.includes("otp_expired") || haystack.includes("expired")) {
      return "Link inválido ou expirado. Solicite uma nova recuperação.";
    }

    if (haystack.includes("invalid") || haystack.includes("access_denied")) {
      return "Link inválido ou expirado. Solicite uma nova recuperação.";
    }

    return "Não foi possível validar o link de recuperação.";
  }

  useEffect(() => {
    const supabase = getSupabaseClient();
    let active = true;

    async function run() {
      try {
        const url = new URL(window.location.href);
        const code = url.searchParams.get("code");
        const tokenHashFromQuery = url.searchParams.get("token_hash");
        const accessTokenFromQuery = url.searchParams.get("access_token");
        const refreshTokenFromQuery = url.searchParams.get("refresh_token");
        const typeFromQuery = url.searchParams.get("type");
        const errorFromQuery = url.searchParams.get("error");
        const errorCodeFromQuery = url.searchParams.get("error_code");
        const errorDescriptionFromQuery = url.searchParams.get("error_description");
        const hashParams = new URLSearchParams((url.hash || "").replace(/^#/, ""));
        const tokenHashFromHash = hashParams.get("token_hash");
        const accessTokenFromHash = hashParams.get("access_token");
        const refreshTokenFromHash = hashParams.get("refresh_token");
        const typeFromHash = hashParams.get("type");
        const errorFromHash = hashParams.get("error");
        const errorCodeFromHash = hashParams.get("error_code");
        const errorDescriptionFromHash = hashParams.get("error_description");

        const token_hash = tokenHashFromQuery || tokenHashFromHash;
        const access_token = accessTokenFromQuery || accessTokenFromHash;
        const refresh_token = refreshTokenFromQuery || refreshTokenFromHash;
        const type = typeFromQuery || typeFromHash;
        const error = errorFromQuery || errorFromHash;
        const error_code = errorCodeFromQuery || errorCodeFromHash;
        const error_description = errorDescriptionFromQuery || errorDescriptionFromHash;

        if ((error || error_code) && active) {
          setMessage({
            type: "error",
            text: mapResetError(error, error_code, error_description),
          });
        }

        if (token_hash && type === "recovery") {
          const { error: verifyError } = await supabase.auth.verifyOtp({
            token_hash,
            type: "recovery",
          });

          if (verifyError && active) {
            setMessage({ type: "error", text: mapResetError(verifyError.name, null, verifyError.message) });
          }
        } else if (access_token && refresh_token && type === "recovery") {
          const { error: sessionError } = await supabase.auth.setSession({
            access_token,
            refresh_token,
          });

          if (sessionError && active) {
            setMessage({ type: "error", text: mapResetError(sessionError.name, null, sessionError.message) });
          }
        } else if (code) {
          const { error: exchangeError } = await supabase.auth.exchangeCodeForSession(code);

          if (exchangeError && active) {
            setMessage({ type: "error", text: mapResetError(exchangeError.name, null, exchangeError.message) });
          }
        }

        const { data } = await supabase.auth.getSession();
        if (!active) return;
        setHasSession(Boolean(data.session));

        if (code || token_hash || access_token || refresh_token || error || error_code) {
          window.history.replaceState({}, document.title, window.location.pathname);
        }
      } finally {
        if (active) setReady(true);
      }
    }

    run();

    const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
      if (!active) return;
      if (event === "PASSWORD_RECOVERY" || event === "SIGNED_IN") {
        setHasSession(Boolean(session));
      }
    });

    return () => {
      active = false;
      authListener.subscription.unsubscribe();
    };
  }, []);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setMessage(null);

    if (!hasSession) {
      setMessage({ type: "error", text: "Link inválido ou expirado. Solicite uma nova recuperação." });
      return;
    }

    if (password.length < 6) {
      setMessage({ type: "error", text: "A nova senha precisa ter pelo menos 6 caracteres." });
      return;
    }

    if (password !== confirmPassword) {
      setMessage({ type: "error", text: "As senhas não conferem." });
      return;
    }

    setSaving(true);
    try {
      const supabase = getSupabaseClient();
      const { error } = await supabase.auth.updateUser({ password });

      if (error) {
        setMessage({ type: "error", text: "Não foi possível atualizar a senha." });
        return;
      }

      setPassword("");
      setConfirmPassword("");
      setMessage({ type: "success", text: "Senha atualizada com sucesso." });
      await supabase.auth.signOut();
      setTimeout(() => router.push("/"), 1200);
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="min-h-screen w-full flex bg-[#F8F5FE]">
      <div className="flex-1 flex items-center justify-center p-8 lg:p-12 relative z-10">
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
          className="w-full max-w-[420px]"
        >
          <div className="mb-10 lg:hidden">
            <div className="h-10 w-10 rounded-xl bg-gradient-to-tr from-[#4425A7] to-[#7c5dfa] flex items-center justify-center text-white font-bold shadow-lg shadow-indigo-500/20">
              K
            </div>
          </div>

          <div className="mb-8">
            <Image src="/brand-logo-purple.svg" alt="Ktalogu" width={160} height={40} className="h-10 w-auto mb-6" />
            <h1 className="text-3xl font-bold tracking-tight text-[#4425A7] mb-2">Redefinir senha</h1>
            <p className="text-[#A3AED0]">Crie uma nova senha para acessar sua conta.</p>
          </div>

          {!ready ? (
            <div className="flex items-center gap-2 text-sm text-[#4425A7]">
              <Loader2 className="animate-spin" size={16} />
              Carregando...
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-5">
              <Input
                id="new-password"
                type="password"
                required
                label="Nova senha"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                icon={<Lock size={18} />}
                placeholder="••••••••"
                autoComplete="new-password"
                className="bg-white"
              />

              <Input
                id="confirm-password"
                type="password"
                required
                label="Confirmar nova senha"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                icon={<Lock size={18} />}
                placeholder="••••••••"
                autoComplete="new-password"
                className="bg-white"
              />

              {message && (
                <div
                  className={`p-3 rounded-xl border text-sm flex items-center gap-2 ${
                    message.type === "success"
                      ? "bg-[color:rgba(18,185,129,0.08)] border-[rgba(18,185,129,0.2)] text-[var(--ks-color-status-success)]"
                      : "bg-red-50 border-red-100 text-red-600"
                  }`}
                >
                  <div
                    className={`h-1.5 w-1.5 rounded-full ${
                      message.type === "success" ? "bg-[var(--ks-color-status-success)]" : "bg-red-500"
                    }`}
                  />
                  {message.text}
                </div>
              )}

              {!hasSession && (
                <div className="text-sm text-[#A3AED0]">Use o link enviado por email para redefinir sua senha.</div>
              )}

              <Button
                type="submit"
                disabled={saving || !hasSession}
                fullWidth
                size="lg"
                className="h-12 text-base shadow-lg shadow-indigo-500/20"
                icon={
                  saving ? (
                    <Loader2 className="animate-spin" size={20} />
                  ) : (
                    <ArrowRight size={20} />
                  )
                }
              >
                {saving ? "Atualizando..." : "Salvar nova senha"}
              </Button>

              <Button
                type="button"
                variant="ghost"
                fullWidth
                className="h-11 text-sm"
                onClick={() => router.push("/")}
              >
                Voltar ao login
              </Button>
            </form>
          )}
        </motion.div>
      </div>

      <div className="hidden lg:flex flex-1 relative overflow-hidden bg-[#4425A7] p-12 items-center justify-center">
        <div className="absolute inset-0 bg-gradient-to-br from-[#4425A7] to-[#2a126e]" />
        <div className="absolute -top-24 -right-24 w-96 h-96 bg-[#0AC0D6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob" />
        <div className="absolute -bottom-24 -left-24 w-96 h-96 bg-[#7c5dfa] rounded-full mix-blend-multiply filter blur-3xl opacity-40 animate-blob animation-delay-2000" />
        <div className="absolute inset-0 bg-[url('/grid-pattern.svg')] opacity-10" />

        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="relative z-10 w-full max-w-lg"
        >
          <div className="backdrop-blur-xl bg-white/10 rounded-[2.5rem] p-10 border border-white/20 shadow-2xl">
            <div className="h-14 w-14 rounded-2xl bg-white/20 flex items-center justify-center mb-8 backdrop-blur-md border border-white/10">
              <Sparkles className="text-[#0AC0D6] fill-[#0AC0D6]/20" size={28} />
            </div>

            <h2 className="text-3xl font-bold text-white mb-4 leading-tight">
              Gerencie sua produção com inteligência e estilo.
            </h2>

            <p className="text-indigo-100 text-lg leading-relaxed mb-8 opacity-90">
              O Ktalogu centraliza seus orçamentos, pedidos e clientes em uma única plataforma intuitiva, feita para quem produz de verdade.
            </p>
          </div>
        </motion.div>
      </div>
    </div>
  );
}