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

export default function SignupPage() {
  const [email, setEmail] = useState("")
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const router = useRouter()

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!email || !isEmailValid(email)) return

    setLoading(true)
    setError("")

    try {
      await requestOtp(email)
      router.push(`/auth/otp?email=${encodeURIComponent(email)}`)
    } catch (err: any) {
      setError(err.message || "حدث خطأ ما، يرجى المحاولة مرة أخرى")
    } finally {
      setLoading(false)
    }
  }

  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/signup.jpg"
          alt="signup"
          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}</span>
            </div>
          )}

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

            <Button
              type="submit"
              disabled={!isEmailValid(email) || loading}
              className="mt-1 h-11 w-full rounded-full bg-[#0D1B24] text-base hover:bg-[#0D1B24]/90 disabled:opacity-50 disabled:bg-[#E5E7EB] disabled:text-[#6B7280]"
            >
              {loading ? (
                <>
                  <Loader2 className="mr-2 size-4 animate-spin" />
                  جاري الإرسال...
                </>
              ) : (
                "تحقق"
              )}
            </Button>
          </form>

          <div className="my-20 text-center">
            <p className="mt-2 text-base text-[#052531]">
              بالتسجيل فإنك توافق على{" "}
              <Link href="#" className="text-blue-600 hover:underline">
                الشروط والأحكام
              </Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}