// app/register/page.tsx
"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Mail, Lock, User, Briefcase } from "lucide-react";
import AuthCard from "@/components/Auth/AuthCard";
import InputField from "@/components/Auth/InputField";
import SubmitButton from "@/components/Auth/SubmitButton";
import SocialLogin from "@/components/Auth/SocialLogin";

export default function RegisterPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    fullName: "",
    email: "",
    password: "",
    confirmPassword: "",
    profession: "",
  });
  const [errors, setErrors] = useState({
    fullName: "",
    email: "",
    password: "",
    confirmPassword: "",
    profession: "",
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
    // Clear error when user starts typing
    if (errors[e.target.name as keyof typeof errors]) {
      setErrors({
        ...errors,
        [e.target.name]: "",
      });
    }
  };

  const validate = () => {
    let valid = true;
    const newErrors = {
      fullName: "",
      email: "",
      password: "",
      confirmPassword: "",
      profession: "",
    };

    if (!formData.fullName) {
      newErrors.fullName = "Full name is required";
      valid = false;
    }

    if (!formData.email) {
      newErrors.email = "Email is required";
      valid = false;
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Email is invalid";
      valid = false;
    }

    if (!formData.password) {
      newErrors.password = "Password is required";
      valid = false;
    } else if (formData.password.length < 6) {
      newErrors.password = "Password must be at least 6 characters";
      valid = false;
    }

    if (!formData.confirmPassword) {
      newErrors.confirmPassword = "Please confirm your password";
      valid = false;
    } else if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = "Passwords do not match";
      valid = false;
    }

    if (!formData.profession) {
      newErrors.profession = "Profession is required";
      valid = false;
    }

    setErrors(newErrors);
    return valid;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!validate()) return;

    setLoading(true);
    // Simulate API call
    setTimeout(() => {
      setLoading(false);
      router.push("/login");
    }, 1500);
  };

  const footer = (
    <p className="text-sm text-gray-600">
      Already have an account?{" "}
      <Link href="/login" className="text-sky-600 hover:text-sky-700 font-semibold">
        Sign in
      </Link>
    </p>
  );

  return (
    <AuthCard
      title="Create Account"
      subtitle="Join the PKI community today"
      footer={footer}
    >
      <form onSubmit={handleSubmit}>
        <InputField
          label="Full Name"
          type="text"
          name="fullName"
          value={formData.fullName}
          onChange={handleChange}
          placeholder="John Doe"
          icon={<User className="w-4 h-4" />}
          required
          error={errors.fullName}
        />

        <InputField
          label="Email Address"
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          placeholder="you@example.com"
          icon={<Mail className="w-4 h-4" />}
          required
          error={errors.email}
        />

        <InputField
          label="Profession"
          type="text"
          name="profession"
          value={formData.profession}
          onChange={handleChange}
          placeholder="e.g., Software Engineer, Marketing Manager"
          icon={<Briefcase className="w-4 h-4" />}
          required
          error={errors.profession}
        />

        <InputField
          label="Password"
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
          placeholder="••••••"
          icon={<Lock className="w-4 h-4" />}
          required
          error={errors.password}
        />

        <InputField
          label="Confirm Password"
          type="password"
          name="confirmPassword"
          value={formData.confirmPassword}
          onChange={handleChange}
          placeholder="••••••"
          icon={<Lock className="w-4 h-4" />}
          required
          error={errors.confirmPassword}
        />

        <SubmitButton text="Create Account" loading={loading} />
      </form>

      <SocialLogin />
    </AuthCard>
  );
}