"use client"
import Image from "next/image"
import Link from "next/link"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Eye, EyeOff, AlertCircle, Loader2 } from "lucide-react"
import { isEmailValid } from "@/lib/utils"
import { useAuth } from "@/context/AuthContext"

export default function SigninPage() {
  const [loginValue, setLoginValue] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [password, setPassword] = useState("")
  const { login, isLoading, error, isAuthenticated, clearError } = useAuth()
  const router = useRouter()

 
  

  useEffect(() => {
    // Clear error on mount
    clearError()
  }, [clearError])

  const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault()

  try {
    await login({
      login: loginValue,
      password,
    })

    router.push("/")

  } catch (err) {
    console.error("Login failed:", err)

    if (err && typeof err === "object") {
      console.log("Error details:", JSON.stringify(err, null, 2))
    }
  }
}

  return (
    <div className="grid min-h-screen md:grid-cols-2">
      {/* Left side image */}
      <div className="relative hidden md:block md:order-2">
        <Image
          src="/main-page/auth/signin.jpg"
          alt="signin"
          fill
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-[#0D1B24] opacity-70" />
      </div>

      {/* Right side form */}
      <div className="order-1 flex items-center justify-center p-6">
        <div className="w-full max-w-md">
          <div className="text-center">
            <h1 className="mb-3 text-2xl font-semibold text-[#0D1B24]">تسجيل الدخول</h1>
            <p className="mb-6 text-base text-[#6B7B8C]">
              استفد من كل خدماتنا المميزة… فقط سجّل دخولك.
            </p>
          </div>

          {error && (
            <div className="mb-4 flex items-center gap-2 rounded-lg bg-red-50 p-3 text-sm text-red-600">
              <AlertCircle className="size-4" />
              <span>{error.message}</span>
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-3">
            <Input
              type="text"
              placeholder="البريد الإلكتروني أو رقم الهاتف"
              value={loginValue}
              onChange={(e) => setLoginValue(e.target.value)}
              disabled={isLoading}
              className="h-11 rounded-full border border-[#E5EAF0] placeholder:text-[#93A3B5] focus-visible:ring-0"
            />

            <div className="relative">
              <Input
                type={showPassword ? "text" : "password"}
                placeholder="أدخل كلمة المرور"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                disabled={isLoading}
                className="h-11 rounded-full border border-[#E5EAF0] pl-11 placeholder:text-[#93A3B5] focus-visible:ring-0"
              />
              <button
                type="button"
                aria-label={showPassword ? "إخفاء كلمة المرور" : "إظهار كلمة المرور"}
                onClick={() => setShowPassword((v) => !v)}
                className="absolute left-3 top-1/2 -translate-y-1/2 text-[#90A1B9]"
              >
                {showPassword ? <Eye className="size-5" /> : <EyeOff className="size-5" />}
              </button>
            </div>

            <Button
              type="submit"
              disabled={!loginValue || !password || isLoading}
              className="mt-2 h-11 w-full rounded-full bg-[#0D1B24] text-base hover:bg-[#0D1B24]/90 disabled:opacity-50 disabled:bg-[#E5E7EB] disabled:text-[#6B7280]"
            >
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 size-4 animate-spin" />
                  جاري تسجيل الدخول...
                </>
              ) : (
                "تسجيل الدخول"
              )}
            </Button>

            <div className="mt-4 text-center">
              <Link href="#" className="text-base text-[#052531] hover:underline">
                نسيت كلمة المرور؟
              </Link>
            </div>
          </form>

          <div className="my-20 text-center text-base">
            <span className="text-[#052531]">عميل جديد؟ </span>
            <Link href="/auth/signup" className="text-blue-600 hover:underline">
              أنشئ حسابك
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}