'use client';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { User, Mail, Lock, Eye, EyeOff, Loader2, Check, AlertTriangle } from 'lucide-react';
import useAuthStore from '@/src/store/authStore';

const schema = z.object({
    name: z.string().min(2, 'نام باید حداقل ۲ کاراکتر باشد'),
    family: z.string().min(2, 'نام خانوادگی باید حداقل ۲ کاراکتر باشد'),
    email: z.string().min(1, 'ایمیل را وارد کنید').email('ایمیل معتبر نیست'),
    password: z.string().min(1, 'رمز عبور را وارد کنید').min(6, 'رمز عبور حداقل ۶ کاراکتر باید باشد'),
});

export default function RegisterStepInfo({ phone }) {
    const router = useRouter();
    const setAuth = useAuthStore((s) => s.setAuth);
    const [showPassword, setShowPassword] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [apiError, setApiError] = useState(null);

    const { register, handleSubmit, formState: { errors } } = useForm({
        resolver: zodResolver(schema),
        defaultValues: { name: '', family: '', email: '', password: '' },
    });

    const onSubmit = async (data) => {
        setIsSubmitting(true);
        setApiError(null);
        // const res = await axiosInstance.post('/register', {
        //     phone, name: data.name, family: data.family, email: data.email, password: data.password
        // });
        await new Promise((r) => setTimeout(r, 800));
        setAuth({ name: data.name + ' ' + data.family, email: data.email, phone }, 'mock-token-' + Date.now());
        router.replace('/');
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
            {apiError && (
                <div className="flex items-start gap-2.5 p-3.5 rounded-xl bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20">
                    <AlertTriangle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
                    <p className="text-xs md:text-sm text-red-600 dark:text-red-400 leading-6">{apiError}</p>
                </div>
            )}

            <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                    <label className="block text-xs md:text-sm font-bold text-gray-700 dark:text-gray-300 pr-1">نام</label>
                    <div className="relative">
                        <User className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                        <input type="text" autoComplete="given-name" {...register('name')}
                            className={`w-full pr-10 pl-3 py-3 rounded-2xl text-sm bg-gray-50 dark:bg-zinc-800/50 border text-gray-900 dark:text-white placeholder-gray-400 outline-none transition-all ${errors.name ? 'border-red-400 dark:border-red-500 focus:ring-2 focus:ring-red-400' : 'border-gray-200 dark:border-zinc-700 focus:ring-2 focus:ring-[#E53935] focus:border-transparent'}`}
                            placeholder="علی" />
                    </div>
                    {errors.name && <p className="text-[11px] text-red-500 pr-1">• {errors.name.message}</p>}
                </div>
                <div className="space-y-1.5">
                    <label className="block text-xs md:text-sm font-bold text-gray-700 dark:text-gray-300 pr-1">نام خانوادگی</label>
                    <div className="relative">
                        <User className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                        <input type="text" autoComplete="family-name" {...register('family')}
                            className={`w-full pr-10 pl-3 py-3 rounded-2xl text-sm bg-gray-50 dark:bg-zinc-800/50 border text-gray-900 dark:text-white placeholder-gray-400 outline-none transition-all ${errors.family ? 'border-red-400 dark:border-red-500 focus:ring-2 focus:ring-red-400' : 'border-gray-200 dark:border-zinc-700 focus:ring-2 focus:ring-[#E53935] focus:border-transparent'}`}
                            placeholder="رضایی" />
                    </div>
                    {errors.family && <p className="text-[11px] text-red-500 pr-1">• {errors.family.message}</p>}
                </div>
            </div>

            <div className="space-y-1.5">
                <label className="block text-xs md:text-sm font-bold text-gray-700 dark:text-gray-300 pr-1">آدرس ایمیل</label>
                <div className="relative">
                    <Mail className="absolute right-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                    <input type="email" autoComplete="email" dir="ltr" {...register('email')}
                        className={`w-full pr-11 pl-4 py-3 rounded-2xl text-sm bg-gray-50 dark:bg-zinc-800/50 border text-gray-900 dark:text-white placeholder-gray-400 outline-none transition-all ${errors.email ? 'border-red-400 dark:border-red-500 focus:ring-2 focus:ring-red-400' : 'border-gray-200 dark:border-zinc-700 focus:ring-2 focus:ring-[#E53935] focus:border-transparent'}`}
                        placeholder="example@gmail.com" />
                </div>
                {errors.email && <p className="text-[11px] text-red-500 pr-1">• {errors.email.message}</p>}
            </div>

            <div className="space-y-1.5">
                <label className="block text-xs md:text-sm font-bold text-gray-700 dark:text-gray-300 pr-1">رمز عبور</label>
                <div className="relative">
                    <Lock className="absolute right-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                    <input type={showPassword ? 'text' : 'password'} autoComplete="new-password" {...register('password')}
                        className={`w-full pr-11 pl-11 py-3 rounded-2xl text-sm bg-gray-50 dark:bg-zinc-800/50 border text-gray-900 dark:text-white placeholder-gray-400 outline-none transition-all ${errors.password ? 'border-red-400 dark:border-red-500 focus:ring-2 focus:ring-red-400' : 'border-gray-200 dark:border-zinc-700 focus:ring-2 focus:ring-[#E53935] focus:border-transparent'}`}
                        placeholder="••••••••" />
                    <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                        {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                    </button>
                </div>
                {errors.password && <p className="text-[11px] text-red-500 pr-1">• {errors.password.message}</p>}
            </div>

            <button type="submit" disabled={isSubmitting}
                className="w-full py-3 rounded-2xl bg-[#E53935] text-white text-sm font-black hover:bg-[#d32f2f] disabled:opacity-60 disabled:cursor-not-allowed transition-all shadow-lg shadow-[#E53935]/25 flex items-center justify-center gap-2">
                {isSubmitting ? <><Loader2 className="w-4 h-4 animate-spin" /> در حال ثبت‌نام...</> : <><Check className="w-4 h-4" /> تکمیل ثبت‌نام</>}
            </button>
        </form>
    );
}