import { OnboardingData } from "@/pages/Onboarding";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ArrowLeft, ArrowRight } from "lucide-react";

interface PersonalInfoProps {
  data: OnboardingData;
  updateData: (data: Partial<OnboardingData>) => void;
  nextStep: () => void;
  prevStep: () => void;
}

export default function PersonalInfo({ data, updateData, nextStep, prevStep }: PersonalInfoProps) {
  const handleInputChange = (field: string, value: string) => {
    updateData({
      personalInfo: {
        ...data.personalInfo,
        [field]: value
      }
    });
  };

  const isValid = data.personalInfo.firstName && data.personalInfo.lastName && data.personalInfo.email;

  const getUserTypeLabel = () => {
    switch (data.userType) {
      case 'game-developer': return 'Game Developer';
      case 'client': return 'Client';
      case 'member': return 'Community Member';
      case 'customer': return 'Customer';
      default: return 'User';
    }
  };

  return (
    <div className="space-y-6">
      <div className="text-center space-y-2">
        <p className="text-muted-foreground">
          Tell us a bit about yourself, {getUserTypeLabel().toLowerCase()}
        </p>
      </div>

      <div className="max-w-md mx-auto space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="firstName" className="text-sm font-medium">
              First Name *
            </Label>
            <Input
              id="firstName"
              value={data.personalInfo.firstName}
              onChange={(e) => handleInputChange('firstName', e.target.value)}
              placeholder="Enter your first name"
              className="bg-background/50 border-border/50 focus:border-aethex-400"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="lastName" className="text-sm font-medium">
              Last Name *
            </Label>
            <Input
              id="lastName"
              value={data.personalInfo.lastName}
              onChange={(e) => handleInputChange('lastName', e.target.value)}
              placeholder="Enter your last name"
              className="bg-background/50 border-border/50 focus:border-aethex-400"
            />
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor="email" className="text-sm font-medium">
            Email Address *
          </Label>
          <Input
            id="email"
            type="email"
            value={data.personalInfo.email}
            onChange={(e) => handleInputChange('email', e.target.value)}
            placeholder="Enter your email address"
            className="bg-background/50 border-border/50 focus:border-aethex-400"
          />
        </div>

        {(data.userType === 'client' || data.userType === 'game-developer') && (
          <div className="space-y-2">
            <Label htmlFor="company" className="text-sm font-medium">
              Company / Organization
              {data.userType === 'client' && ' *'}
            </Label>
            <Input
              id="company"
              value={data.personalInfo.company || ''}
              onChange={(e) => handleInputChange('company', e.target.value)}
              placeholder={
                data.userType === 'client' 
                  ? "Enter your company name" 
                  : "Enter your company/organization (optional)"
              }
              className="bg-background/50 border-border/50 focus:border-aethex-400"
            />
          </div>
        )}
      </div>

      <div className="flex justify-between pt-6 animate-slide-up">
        <Button
          variant="outline"
          onClick={prevStep}
          className="flex items-center space-x-2 hover-lift interactive-scale group"
        >
          <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-1" />
          <span>Back</span>
        </Button>

        <Button
          onClick={nextStep}
          disabled={!isValid || (data.userType === 'client' && !data.personalInfo.company)}
          className="flex items-center space-x-2 bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale glow-blue group disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <span>Continue</span>
          <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
        </Button>
      </div>

      <div className="text-center">
        <p className="text-xs text-muted-foreground">
          * Required fields
        </p>
      </div>
    </div>
  );
}