"use client";
 
 import { useState } from "react";
 import { getSupabaseClient } from "@/lib/supabase";
 import { useRouter } from "next/navigation";
 
 export default function LoginClient() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const router = useRouter();
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     setError("");
     setLoading(true);
     console.log("Tentando login com:", email);

     try {
       const supabase = getSupabaseClient();
       const { data, error: signInError } = await supabase.auth.signInWithPassword({
         email,
         password,
       });

       if (signInError) {
         console.error("Erro no login:", signInError);
         setError(signInError.message || "Email ou senha inválidos.");
         setLoading(false);
         return;
       }

       console.log("Login sucesso, usuário:", data.user?.id);
       
       // Força atualização da sessão e redirecionamento
       router.refresh();
       // Aguarda um pouco para garantir que o cookie foi setado antes de recarregar
       setTimeout(() => {
          window.location.href = "/";
       }, 500);

     } catch (err) {
       console.error("Erro inesperado:", err);
       setError("Ocorreu um erro inesperado. Tente novamente.");
       setLoading(false);
     }
   }
 
   return (
     <div className="min-h-screen flex items-center justify-center p-6 bg-slate-50">
       <div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-xl border border-slate-100">
         <div className="mb-6 text-center">
            <h1 className="text-2xl font-bold text-slate-900">Owner • Ktalogu</h1>
            <p className="text-sm text-slate-500 mt-2">Painel Administrativo Global</p>
         </div>
         
         <form onSubmit={handleSubmit} className="space-y-5">
           <div className="space-y-1.5">
             <label className="text-sm font-medium text-slate-700">Email</label>
             <input
               type="email"
               required
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               className="w-full rounded-lg border border-slate-300 px-3 py-2.5 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all"
               placeholder="admin@ktalogu.com.br"
             />
           </div>
           <div className="space-y-1.5">
             <label className="text-sm font-medium text-slate-700">Senha</label>
             <input
               type="password"
               required
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               className="w-full rounded-lg border border-slate-300 px-3 py-2.5 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all"
               placeholder="••••••••"
             />
           </div>
           
           {error && (
             <div className="p-3 rounded-lg bg-red-50 text-red-600 text-sm font-medium border border-red-100">
               {error}
             </div>
           )}
           
           <button
             type="submit"
             disabled={loading}
             className="w-full rounded-lg bg-slate-900 text-white py-2.5 text-sm font-semibold hover:bg-slate-800 active:scale-[0.98] transition-all disabled:opacity-70 disabled:cursor-not-allowed"
           >
             {loading ? "Autenticando..." : "Acessar Painel"}
           </button>
         </form>
       </div>
     </div>
   );
 }