
import React, { useState, useEffect } from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Save, Loader2 } from "lucide-react";

export default function StaffForm({ staff, onSubmit, isSubmitting }) {
  const [formData, setFormData] = useState(staff || {
    employee_name: "",
    manager: "",
    contact_number: "",
    phone: "",
    email: "", // Added email field
    department: "",
    hub_location: "",
    event_location: "",
    track: "",
    address: "",
    city: "",
    position: "",
    position_2: "",
    initial: "",
    profile_type: "",
    employment_type: "",
    english: "",
    english_required: false,
    check_in: "",
    replaced_by: "",
    ro: "",
    mon: "",
    schedule_days: "",
    invoiced: false,
    action: "",
    notes: "",
    accounting_comments: "",
    rating: 0,
    shift_coverage_percentage: 100,
    cancellation_count: 0,
    no_show_count: 0, // Added no_show_count field
    total_shifts: 0,
    reliability_score: 100
  });

  useEffect(() => {
    if (staff) {
      setFormData(staff);
    }
  }, [staff]);

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

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="space-y-6">
        <Card className="border-slate-200 shadow-lg">
          <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b border-slate-100">
            <CardTitle className="text-slate-900">Basic Information</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="employee_name" className="text-slate-700 font-medium">Employee Name *</Label>
                <Input
                  id="employee_name"
                  value={formData.employee_name}
                  onChange={(e) => handleChange('employee_name', e.target.value)}
                  required
                  className="border-slate-200"
                />
              </div>
              
              <div className="space-y-2">
                <Label htmlFor="initial" className="text-slate-700 font-medium">Initials</Label>
                <Input
                  id="initial"
                  value={formData.initial}
                  onChange={(e) => handleChange('initial', e.target.value)}
                  maxLength={3}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="position" className="text-slate-700 font-medium">Primary Skill</Label>
                <Input
                  id="position"
                  value={formData.position}
                  onChange={(e) => handleChange('position', e.target.value)}
                  placeholder="e.g., Barista, Server, Cook"
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="position_2" className="text-slate-700 font-medium">Secondary Skill</Label>
                <Input
                  id="position_2"
                  value={formData.position_2}
                  onChange={(e) => handleChange('position_2', e.target.value)}
                  placeholder="e.g., Dishwasher, Prep Cook"
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="profile_type" className="text-slate-700 font-medium">Skill Level</Label>
                <Select value={formData.profile_type} onValueChange={(value) => handleChange('profile_type', value)}>
                  <SelectTrigger className="border-slate-200">
                    <SelectValue placeholder="Select skill level" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Skilled">Skilled</SelectItem>
                    <SelectItem value="Beginner">Beginner</SelectItem>
                    <SelectItem value="Cross-Trained">Cross-Trained</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="employment_type" className="text-slate-700 font-medium">Employment Type</Label>
                <Select value={formData.employment_type} onValueChange={(value) => handleChange('employment_type', value)}>
                  <SelectTrigger className="border-slate-200">
                    <SelectValue placeholder="Select type" />
                  </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="Weekends">Weekends</SelectItem>
                    <SelectItem value="Specific Days">Specific Days</SelectItem>
                    <SelectItem value="Seasonal">Seasonal</SelectItem>
                    <SelectItem value="Medical Leave">Medical Leave</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="manager" className="text-slate-700 font-medium">Manager</Label>
                <Select value={formData.manager} onValueChange={(value) => handleChange('manager', value)}>
                  <SelectTrigger className="border-slate-200">
                    <SelectValue placeholder="Select manager" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Fernando">Fernando</SelectItem>
                    <SelectItem value="Maria">Maria</SelectItem>
                    <SelectItem value="Paola">Paola</SelectItem>
                    <SelectItem value="Luis">Luis</SelectItem>
                    <SelectItem value="Jesus">Jesus</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {/* New Email field */}
              <div className="space-y-2">
                <Label htmlFor="email" className="text-slate-700 font-medium">Email</Label>
                <Input
                  id="email"
                  type="email"
                  value={formData.email}
                  onChange={(e) => handleChange('email', e.target.value)}
                  placeholder="employee@example.com"
                  className="border-slate-200"
                />
              </div>
              {/* End new Email field */}

              <div className="space-y-2">
                <Label htmlFor="contact_number" className="text-slate-700 font-medium">Contact Number</Label>
                <Input
                  id="contact_number"
                  type="tel"
                  value={formData.contact_number}
                  onChange={(e) => handleChange('contact_number', e.target.value)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="phone" className="text-slate-700 font-medium">Additional Phone</Label>
                <Input
                  id="phone"
                  type="tel"
                  value={formData.phone}
                  onChange={(e) => handleChange('phone', e.target.value)}
                  className="border-slate-200"
                />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="border-slate-200 shadow-lg">
          <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b border-slate-100">
            <CardTitle className="text-slate-900">Performance Metrics</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="rating" className="text-slate-700 font-medium">Rating (0-5 stars)</Label>
                <Input
                  id="rating"
                  type="number"
                  min="0"
                  max="5"
                  step="0.1"
                  value={formData.rating}
                  onChange={(e) => handleChange('rating', parseFloat(e.target.value) || 0)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="reliability_score" className="text-slate-700 font-medium">Reliability Score (0-100)</Label>
                <Input
                  id="reliability_score"
                  type="number"
                  min="0"
                  max="100"
                  value={formData.reliability_score}
                  onChange={(e) => handleChange('reliability_score', parseInt(e.target.value) || 0)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="shift_coverage_percentage" className="text-slate-700 font-medium">Shift Coverage %</Label>
                <Input
                  id="shift_coverage_percentage"
                  type="number"
                  min="0"
                  max="100"
                  value={formData.shift_coverage_percentage}
                  onChange={(e) => handleChange('shift_coverage_percentage', parseInt(e.target.value) || 0)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="cancellation_count" className="text-slate-700 font-medium">Cancellation Count</Label>
                <Input
                  id="cancellation_count"
                  type="number"
                  min="0"
                  value={formData.cancellation_count}
                  onChange={(e) => handleChange('cancellation_count', parseInt(e.target.value) || 0)}
                  className="border-slate-200"
                />
              </div>

              {/* New No Show Count field */}
              <div className="space-y-2">
                <Label htmlFor="no_show_count" className="text-slate-700 font-medium">No Show Count</Label>
                <Input
                  id="no_show_count"
                  type="number"
                  min="0"
                  value={formData.no_show_count}
                  onChange={(e) => handleChange('no_show_count', parseInt(e.target.value) || 0)}
                  className="border-slate-200"
                />
              </div>
              {/* End new No Show Count field */}

              <div className="space-y-2">
                <Label htmlFor="total_shifts" className="text-slate-700 font-medium">Total Shifts</Label>
                <Input
                  id="total_shifts"
                  type="number"
                  min="0"
                  value={formData.total_shifts}
                  onChange={(e) => handleChange('total_shifts', parseInt(e.target.value) || 0)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2 flex items-end">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="invoiced"
                    checked={formData.invoiced}
                    onCheckedChange={(checked) => handleChange('invoiced', checked)}
                  />
                  <Label htmlFor="invoiced" className="text-slate-700 font-medium cursor-pointer">
                    Invoiced
                  </Label>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="border-slate-200 shadow-lg">
          <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b border-slate-100">
            <CardTitle className="text-slate-900">Location & Department</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="department" className="text-slate-700 font-medium">Department</Label>
                <Select value={formData.department} onValueChange={(value) => handleChange('department', value)}>
                  <SelectTrigger className="border-slate-200">
                    <SelectValue placeholder="Select department" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Operations">Operations</SelectItem>
                    <SelectItem value="Sales">Sales</SelectItem>
                    <SelectItem value="HR">HR</SelectItem>
                    <SelectItem value="Finance">Finance</SelectItem>
                    <SelectItem value="IT">IT</SelectItem>
                    <SelectItem value="Marketing">Marketing</SelectItem>
                    <SelectItem value="Customer Service">Customer Service</SelectItem>
                    <SelectItem value="Logistics">Logistics</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="city" className="text-slate-700 font-medium">City</Label>
                <Input
                  id="city"
                  value={formData.city}
                  onChange={(e) => handleChange('city', e.target.value)}
                  placeholder="e.g., San Francisco"
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="hub_location" className="text-slate-700 font-medium">Hub Location</Label>
                <Input
                  id="hub_location"
                  value={formData.hub_location}
                  onChange={(e) => handleChange('hub_location', e.target.value)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="event_location" className="text-slate-700 font-medium">Event Location</Label>
                <Input
                  id="event_location"
                  value={formData.event_location}
                  onChange={(e) => handleChange('event_location', e.target.value)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="track" className="text-slate-700 font-medium">Track</Label>
                <Input
                  id="track"
                  value={formData.track}
                  onChange={(e) => handleChange('track', e.target.value)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="address" className="text-slate-700 font-medium">Address</Label>
                <Textarea
                  id="address"
                  value={formData.address}
                  onChange={(e) => handleChange('address', e.target.value)}
                  rows={2}
                  className="border-slate-200"
                />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="border-slate-200 shadow-lg">
          <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b border-slate-100">
            <CardTitle className="text-slate-900">Language & Schedule</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="english" className="text-slate-700 font-medium">English Level</Label>
                <Select value={formData.english} onValueChange={(value) => handleChange('english', value)}>
                  <SelectTrigger className="border-slate-200">
                    <SelectValue placeholder="Select level" />
                  </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 className="space-y-2 flex items-end">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="english_required"
                    checked={formData.english_required}
                    onCheckedChange={(checked) => handleChange('english_required', checked)}
                  />
                  <Label htmlFor="english_required" className="text-slate-700 font-medium cursor-pointer">
                    English Required
                  </Label>
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="check_in" className="text-slate-700 font-medium">Last Check-in</Label>
                <Input
                  id="check_in"
                  type="date"
                  value={formData.check_in}
                  onChange={(e) => handleChange('check_in', e.target.value)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="schedule_days" className="text-slate-700 font-medium">Schedule Days</Label>
                <Input
                  id="schedule_days"
                  value={formData.schedule_days}
                  onChange={(e) => handleChange('schedule_days', e.target.value)}
                  placeholder="e.g., Mon-Fri, 9AM-5PM"
                  className="border-slate-200"
                />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="border-slate-200 shadow-lg">
          <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b border-slate-100">
            <CardTitle className="text-slate-900">Additional Information</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="replaced_by" className="text-slate-700 font-medium">Replaced By</Label>
                <Input
                  id="replaced_by"
                  value={formData.replaced_by}
                  onChange={(e) => handleChange('replaced_by', e.target.value)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="action" className="text-slate-700 font-medium">Action</Label>
                <Input
                  id="action"
                  value={formData.action}
                  onChange={(e) => handleChange('action', e.target.value)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="ro" className="text-slate-700 font-medium">R.O</Label>
                <Input
                  id="ro"
                  value={formData.ro}
                  onChange={(e) => handleChange('ro', e.target.value)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="mon" className="text-slate-700 font-medium">MON</Label>
                <Input
                  id="mon"
                  value={formData.mon}
                  onChange={(e) => handleChange('mon', e.target.value)}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="notes" className="text-slate-700 font-medium">Notes</Label>
                <Textarea
                  id="notes"
                  value={formData.notes}
                  onChange={(e) => handleChange('notes', e.target.value)}
                  rows={3}
                  className="border-slate-200"
                />
              </div>

              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="accounting_comments" className="text-slate-700 font-medium">Accounting Comments</Label>
                <Textarea
                  id="accounting_comments"
                  value={formData.accounting_comments}
                  onChange={(e) => handleChange('accounting_comments', e.target.value)}
                  rows={3}
                  className="border-slate-200"
                />
              </div>
            </div>
          </CardContent>
        </Card>

        <div className="flex justify-end gap-3">
          <Button
            type="submit"
            disabled={isSubmitting}
            className="bg-gradient-to-r from-[#0A39DF] to-[#1C323E] hover:from-[#0A39DF]/90 hover:to-[#1C323E]/90 text-white shadow-lg"
          >
            {isSubmitting ? (
              <>
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                Saving...
              </>
            ) : (
              <>
                <Save className="w-4 h-4 mr-2" />
                Save Staff Member
              </>
            )}
          </Button>
        </div>
      </div>
    </form>
  );
}
