'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/store';
import { toast } from 'react-toastify';
import { UserPlus, ArrowLeft } from 'lucide-react';
import { AuthShell } from '@/components/auth/AuthShell';
import { AuthField } from '@/components/auth/AuthField';

export default function RegisterPage() {
  const [form, setForm] = useState({ email: '', password: '', firstName: '', lastName: '' });
  const [isLoading, setIsLoading] = useState(false);
  const register = useAuthStore((s) => s.register);
  const router = useRouter();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      await register(form);
      toast.success('حساب با موفقیت ساخته شد!');
      router.push('/dashboard');
    } catch (err: any) {
      toast.error(err.response?.data?.message || 'ثبت‌نام ناموفق بود');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <AuthShell
      icon={<UserPlus className="h-7 w-7" />}
      title="ساخت حساب"
      subtitle="در چند دقیقه اولین اپت را منتشر کن"
      altPrompt="قبلاً حساب ساخته‌ای؟"
      altHref="/login"
      altLabel="وارد شو"
    >
      <form className="space-y-5" onSubmit={handleSubmit}>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <AuthField
            id="firstName"
            label="نام"
            type="text"
            required
            autoComplete="given-name"
            placeholder="مثلاً علی"
            value={form.firstName}
            onChange={(e) => setForm({ ...form, firstName: e.target.value })}
          />
          <AuthField
            id="lastName"
            label="نام خانوادگی"
            type="text"
            required
            autoComplete="family-name"
            placeholder="مثلاً رضایی"
            value={form.lastName}
            onChange={(e) => setForm({ ...form, lastName: e.target.value })}
          />
        </div>

        <AuthField
          id="email"
          label="ایمیل"
          type="email"
          required
          dir="ltr"
          autoComplete="email"
          placeholder="you@example.com"
          value={form.email}
          onChange={(e) => setForm({ ...form, email: e.target.value })}
        />

        <AuthField
          id="password"
          label="رمز عبور"
          type="password"
          required
          minLength={8}
          dir="ltr"
          autoComplete="new-password"
          placeholder="حداقل ۸ کاراکتر"
          value={form.password}
          onChange={(e) => setForm({ ...form, password: e.target.value })}
        />

        <button
          type="submit"
          disabled={isLoading}
          className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary-600 px-6 py-3.5 font-bold text-white shadow-lg shadow-primary-600/30 transition hover:bg-primary-500 disabled:cursor-not-allowed disabled:opacity-60"
        >
          {isLoading ? (
            <>
              <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
              در حال ساخت حساب…
            </>
          ) : (
            <>
              ساخت حساب
              <ArrowLeft className="h-4 w-4" />
            </>
          )}
        </button>
      </form>
    </AuthShell>
  );
}