"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Eye, EyeOff, LogIn } from "lucide-react";
import { useAuthStore } from "@/store/authStore";
import { Spinner } from "@/components/ui";
import toast from "react-hot-toast";

const schema = z.object({
  email: z.string().email("Geçerli bir e-posta girin."),
  password: z.string().min(6, "Şifre en az 6 karakter olmalı."),
});

type FormData = z.infer<typeof schema>;

export default function GirisPage() {
  const router = useRouter();
  const { login, isLoading } = useAuthStore();
  const [showPass, setShowPass] = useState(false);

  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = async (data: FormData) => {
    try {
      await login(data.email, data.password);
      toast.success("Hoş geldiniz! 🐯");
      router.push("/");
    } catch (err: any) {
      const msg = err?.response?.data?.detail || "Giriş yapılamadı. Bilgilerinizi kontrol edin.";
      toast.error(msg);
    }
  };

  return (
    <div className="kaplan-card">
      <h1 className="text-lg font-semibold text-surface-100 mb-1">Giriş Yap</h1>
      <p className="text-sm text-surface-500 mb-6">Hesabınıza giriş yapın</p>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
        <div>
          <label className="form-label">E-posta</label>
          <input
            {...register("email")}
            type="email"
            placeholder="ornek@email.com"
            className="kaplan-input"
            autoComplete="email"
          />
          {errors.email && (
            <p className="text-xs text-red-400 mt-1">{errors.email.message}</p>
          )}
        </div>

        <div>
          <label className="form-label">Şifre</label>
          <div className="relative">
            <input
              {...register("password")}
              type={showPass ? "text" : "password"}
              placeholder="••••••••"
              className="kaplan-input pr-10"
              autoComplete="current-password"
            />
            <button
              type="button"
              onClick={() => setShowPass(!showPass)}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-surface-500 hover:text-surface-300"
            >
              {showPass ? <EyeOff size={16} /> : <Eye size={16} />}
            </button>
          </div>
          {errors.password && (
            <p className="text-xs text-red-400 mt-1">{errors.password.message}</p>
          )}
        </div>

        <div className="flex justify-end">
          <Link href="/sifre-sifirla" className="text-xs text-brand-400 hover:text-brand-300">
            Şifremi unuttum
          </Link>
        </div>

        <button
          type="submit"
          disabled={isLoading}
          className="btn-primary w-full justify-center py-2.5"
        >
          {isLoading ? <Spinner size={16} /> : <LogIn size={16} />}
          Giriş Yap
        </button>
      </form>

      <p className="text-center text-sm text-surface-500 mt-6">
        Hesabınız yok mu?{" "}
        <Link href="/kayit" className="text-brand-400 hover:text-brand-300 font-medium">
          Kayıt Ol
        </Link>
      </p>
    </div>
  );
}