"use client";

import { useState } from "react";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { IconShoppingCart } from "@tabler/icons-react";
import { toast } from "sonner";
import Silk from "@/components/Silk";
import { motion } from "framer-motion";

export default function LoginPage() {
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);

    const formData = new FormData(e.currentTarget);
    const username = formData.get("username") as string;
    const password = formData.get("password") as string;

    const result = await signIn("credentials", {
      username,
      password,
      redirect: false,
    });

    if (result?.error) {
      toast.error("نام کاربری یا رمز عبور اشتباه است");
      setLoading(false);
    } else {
      toast.success("با موفقیت وارد شدید");
      router.push("/");
      router.refresh();
    }
  };

  return (
    <div className="grid min-h-svh lg:grid-cols-2 font-sans" dir="rtl">
      {/* چپ: لوگو + فرم */}
      <div className="flex flex-col gap-4 p-6 md:p-10 bg-background/50 backdrop-blur-sm z-10 relative shadow-2xl lg:shadow-none">
        <div className="flex justify-center gap-2 md:justify-start">
          <a href="#" className="flex items-center gap-2 font-medium">
            <div className="flex size-8 items-center justify-center rounded-xl shadow-sm bg-transparent overflow-hidden object-contain">
              <img src="/favicon.ico" alt="Tukan Logo" className="w-full h-full object-contain drop-shadow-sm" />
            </div>
            <span className="font-black text-xl tracking-tight text-primary">سیستم مدیریت توکان - فروشگاه ساز</span>
          </a>
        </div>

        <div className="flex flex-1 items-center justify-center">
          <motion.div 
            initial={{ opacity: 0, scale: 0.95, filter: "blur(10px)" }}
            animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
            transition={{ duration: 0.5, ease: "easeOut", staggerChildren: 0.1 }}
            className="w-full max-w-sm"
          >
            <form onSubmit={onSubmit} className="flex flex-col gap-8">
              <motion.div 
                initial={{ opacity: 0, y: -10, filter: "blur(5px)" }}
                animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
                transition={{ duration: 0.4 }}
                className="flex flex-col items-center gap-2 text-center"
              >
                <h1 className="text-3xl font-black text-slate-900 dark:text-white">
                  ورود به حساب کاربری
                </h1>
                <p className="text-muted-foreground text-sm font-medium">
                  نام کاربری و رمز عبور خود را وارد کنید
                </p>
              </motion.div>

              <motion.div 
                initial={{ opacity: 0, y: 15, filter: "blur(5px)" }}
                animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
                transition={{ duration: 0.4, delay: 0.1 }}
                className="space-y-6"
              >
                <div className="space-y-2">
                  <Label htmlFor="username" className="font-bold">نام کاربری</Label>
                  <Input
                    id="username"
                    name="username"
                    required
                    className="text-left font-sans text-lg h-12 shadow-sm rounded-xl focus-visible:ring-primary/50"
                    dir="ltr"
                    autoComplete="username"
                  />
                </div>

                <div className="space-y-2">
                  <div className="flex items-center">
                    <Label htmlFor="password" className="font-bold">رمز عبور</Label>
                  </div>
                  <Input
                    id="password"
                    name="password"
                    type="password"
                    placeholder="••••••••"
                    required
                    className="text-left font-sans text-lg h-12 shadow-sm rounded-xl focus-visible:ring-primary/50 tracking-widest"
                    dir="ltr"
                    autoComplete="current-password"
                  />
                </div>

                <Button type="submit" className="w-full h-12 text-md font-bold rounded-xl shadow-md transition-all hover:scale-[1.02]" disabled={loading}>
                  {loading ? "در حال اعتبارسنجی..." : "ورود به سیستم"}
                </Button>
              </motion.div>

              <motion.p 
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.4, delay: 0.3 }}
                className="text-sm text-center text-muted-foreground/60 font-medium"
              >
                قدرت گرفته از سیستم مدیریت توکان - فروشگاه ساز
              </motion.p>
            </form>
          </motion.div>
        </div>
      </div>

      {/* راست: پس‌زمینه افکتی */}
      <div className="bg-muted relative hidden lg:block overflow-hidden">
        <div className="absolute inset-0">
          <Silk
            speed={5}
            scale={1}
            color="#5227ff"
            noiseIntensity={1.5}
            rotation={0}
          />
        </div>
        {/* لایه تیره برای حالت دارک */}
        <div className="absolute inset-0 bg-black/10 dark:bg-black/80" />
      </div>
    </div>
  );
}