krowworkforce_controltower/src/components/onboarding/ProfileSetupStep.jsx

import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { User, Briefcase, MapPin } from "lucide-react";

export default function ProfileSetupStep({ data, onNext, currentUser }) {
  const [profile, setProfile] = useState({
    full_name: data.full_name || currentUser?.full_name || "",
    email: data.email || currentUser?.email || "",
    phone: data.phone || "",
    address: data.address || "",
    city: data.city || "",
    position: data.position || "",
    department: data.department || "",
    hub_location: data.hub_location || "",
    employment_type: data.employment_type || "Full Time",
    english_level: data.english_level || "Fluent",
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    onNext({ type: 'profile', data: profile });
  };

  const handleChange = (field, value) => {
    setProfile(prev => ({ ...prev, [field]: value }));
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div>
        <h2 className="text-xl font-bold text-slate-900 mb-2">Profile Setup</h2>
        <p className="text-sm text-slate-500">Tell us about yourself</p>
      </div>

      <div className="space-y-4">
        {/* Personal Information */}
        <div className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-3">
          <User className="w-4 h-4" />
          <span>Personal Information</span>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <Label htmlFor="full_name">Full Name *</Label>
            <Input
              id="full_name"
              value={profile.full_name}
              onChange={(e) => handleChange('full_name', e.target.value)}
              required
              placeholder="John Doe"
            />
          </div>

          <div>
            <Label htmlFor="email">Email Address *</Label>
            <Input
              id="email"
              type="email"
              value={profile.email}
              onChange={(e) => handleChange('email', e.target.value)}
              required
              placeholder="john@example.com"
            />
          </div>

          <div>
            <Label htmlFor="phone">Phone Number *</Label>
            <Input
              id="phone"
              type="tel"
              value={profile.phone}
              onChange={(e) => handleChange('phone', e.target.value)}
              required
              placeholder="(555) 123-4567"
            />
          </div>

          <div>
            <Label htmlFor="city">City *</Label>
            <Input
              id="city"
              value={profile.city}
              onChange={(e) => handleChange('city', e.target.value)}
              required
              placeholder="San Francisco"
            />
          </div>

          <div className="md:col-span-2">
            <Label htmlFor="address">Street Address</Label>
            <Input
              id="address"
              value={profile.address}
              onChange={(e) => handleChange('address', e.target.value)}
              placeholder="123 Main St"
            />
          </div>
        </div>

        {/* Employment Details */}
        <div className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-3 mt-6">
          <Briefcase className="w-4 h-4" />
          <span>Employment Details</span>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <Label htmlFor="position">Position/Role *</Label>
            <Input
              id="position"
              value={profile.position}
              onChange={(e) => handleChange('position', e.target.value)}
              required
              placeholder="e.g., Server, Chef, Bartender"
            />
          </div>

          <div>
            <Label htmlFor="department">Department</Label>
            <Select value={profile.department} onValueChange={(value) => handleChange('department', value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select department" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Operations">Operations</SelectItem>
                <SelectItem value="Kitchen">Kitchen</SelectItem>
                <SelectItem value="Service">Service</SelectItem>
                <SelectItem value="Bar">Bar</SelectItem>
                <SelectItem value="Events">Events</SelectItem>
                <SelectItem value="Catering">Catering</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div>
            <Label htmlFor="employment_type">Employment Type *</Label>
            <Select value={profile.employment_type} onValueChange={(value) => handleChange('employment_type', value)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Full Time">Full Time</SelectItem>
                <SelectItem value="Part Time">Part Time</SelectItem>
                <SelectItem value="On call">On Call</SelectItem>
                <SelectItem value="Seasonal">Seasonal</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div>
            <Label htmlFor="english_level">English Proficiency</Label>
            <Select value={profile.english_level} onValueChange={(value) => handleChange('english_level', value)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Fluent">Fluent</SelectItem>
                <SelectItem value="Intermediate">Intermediate</SelectItem>
                <SelectItem value="Basic">Basic</SelectItem>
                <SelectItem value="None">None</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        {/* Location */}
        <div className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-3 mt-6">
          <MapPin className="w-4 h-4" />
          <span>Work Location</span>
        </div>

        <div>
          <Label htmlFor="hub_location">Preferred Hub/Location</Label>
          <Input
            id="hub_location"
            value={profile.hub_location}
            onChange={(e) => handleChange('hub_location', e.target.value)}
            placeholder="e.g., Downtown SF, Bay Area"
          />
        </div>
      </div>

      <div className="flex justify-end pt-4">
        <Button type="submit" className="bg-[#0A39DF]">
          Continue to Documents
        </Button>
      </div>
    </form>
  );
}