import { ChangeEvent, FormEvent, useState } from 'react';
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { EyeIcon, EyeOffIcon, Upload } from 'lucide-react';

export default function SignupForm() {
  const [showPassword, setShowPassword] = useState(false);
  const [formData, setFormData] = useState({
    email: '',
    firstName: '',
    lastName: '',
    username: '',
    password: '',
    bio: '',
    dob: '',
    profile_picture: null
  });
  const [error , setError] = useState<Record<string,any>>({})

  const handleInputChange = (e : ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { id, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [id]: value
    }));
  };

  const handleSubmit = (e : FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
  };

  return (
    <div className="flex items-center justify-center min-h-[80vh]">
      <Card className="w-full max-w-lg shadow-lg border border-purple-700">
        <CardHeader className="space-y-3">
          <CardTitle className="text-2xl font-bold text-purple-600">Create Account</CardTitle>
          <CardDescription className="text-gray-600">
            Fill in your details to create your account
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="firstName" className="text-gray-700">First Name</Label>
                <Input 
                  id="firstName"
                  value={formData.firstName}
                  onChange={handleInputChange}
                  className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500"
                  placeholder="Enter your first name"
                  error={error?.firstName}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="lastName" className="text-gray-700">Last Name</Label>
                <Input 
                  id="lastName"
                  value={formData.lastName}
                  onChange={handleInputChange}
                  className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500"
                  placeholder="Enter your last name"
                  error={error?.lastName}
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="email" className="text-gray-700">Email</Label>
              <Input 
                id="email"
                type="email"
                value={formData.email}
                onChange={handleInputChange}
                className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500"
                placeholder="Enter your email"
                error={error?.email}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="username" className="text-gray-700">Username</Label>
              <Input 
                id="username"
                value={formData.username}
                onChange={handleInputChange}
                className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500"
                placeholder="Choose a username"
                error={error?.username}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="password" className="text-gray-700">Password</Label>
              <div className="relative">
                <Input 
                  id="password"
                  type={showPassword ? "text" : "password"}
                  value={formData.password}
                  onChange={handleInputChange}
                  className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500 pr-10"
                  placeholder="Create a strong password"
                  error={error?.password}
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
                >
                  {showPassword ? (
                    <EyeOffIcon className="h-5 w-5" />
                  ) : (
                    <EyeIcon className="h-5 w-5" />
                  )}
                </button>
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="dob" className="text-gray-700">Date of Birth</Label>
              <Input 
                id="dob"
                type="date"
                value={formData.dob}
                onChange={handleInputChange}
                error={error?.dob}
                className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="bio" className="text-gray-700">Bio</Label>
              <textarea 
                id="bio"
                value={formData.bio}
                onChange={handleInputChange}
                className="w-full px-4 py-2 bg-gray-50/50 border-gray-200 rounded-md focus:border-purple-500 focus:ring-purple-500"
                rows={3}
                placeholder="Tell us about yourself"
              />
              {
                error?.bio && error?.bio.map((err : any) => {
                  return(
                    <span className='text-red-500'>{err}</span>
                  )
                })
              }
            </div>

            <div className="space-y-2">
              <Label htmlFor="profile_picture" className="text-gray-700">Profile Picture</Label>
              <div className="flex items-center space-x-2">
                <Button
                  type="button"
                  variant="outline"
                  className="h-11 px-4 border-gray-200 hover:bg-gray-50"
                >
                  <Upload className="h-5 w-5 mr-2" />
                  Upload Photo
                </Button>
                <span className="text-sm text-gray-500">No file chosen</span>
              </div>
            </div>

            <Button 
              type="submit" 
              className="w-full h-11 bg-purple-600 hover:bg-purple-700 text-white font-semibold"
            >
              Create Account
            </Button>

            <div className="text-center text-sm text-gray-600">
              Already have an account?{' '}
              <a href="#" className="text-purple-600 hover:text-purple-700 font-semibold">
                Login
              </a>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}