import React, { useState, useEffect } from "react";
import { useForm, Controller } from "react-hook-form";
import { Input } from "@/common/components/ui/input";
import { Label } from "@/common/components/ui/label";
import { Textarea } from "@/common/components/ui/textarea";
import { Button } from "@/common/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/common/components/ui/select";
import { Checkbox } from "@/common/components/ui/checkbox";
import {
  Save, Loader2, User, FileText, Briefcase,
  Calendar, ChevronRight, Shield, Star, Info,
  Mail, Phone, MapPin, Award, Clock, AlertCircle
} from "lucide-react";
import { AnimatePresence } from "framer-motion";
import type { Staff } from "../../type";
import { TabContent } from "./TabContent";

interface StaffFormProps {
  staff?: Staff;
  onSubmit: (data: Omit<Staff, 'id'>) => Promise<void>;
  isSubmitting: boolean;
  disabled?: boolean;
}

type TabType = "overview" | "documents" | "work_history" | "compliance";

export default function StaffForm({ staff, onSubmit, isSubmitting, disabled = false }: StaffFormProps) {
  const [activeTab, setActiveTab] = useState<TabType>("overview");

  const { register, handleSubmit, control, reset } = useForm<Staff>({
    defaultValues: staff || {
      employee_name: "",
      manager: "",
      contact_number: "",
      phone: "",
      email: "",
      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: "",
      averageRating: 0,
      shift_coverage_percentage: 100,
      cancellation_count: 0,
      no_show_count: 0,
      total_shifts: 0,
      reliability_score: 100
    }
  });

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

  const onFormSubmit = (data: Staff) => {
    onSubmit(data);
  };

  const tabs: { id: TabType; label: string; icon: React.ReactNode }[] = [
    { id: "overview", label: "Overview", icon: <User className="w-4 h-4" /> },
    { id: "documents", label: "Documents", icon: <FileText className="w-4 h-4" /> },
    { id: "work_history", label: "Work History", icon: <Briefcase className="w-4 h-4" /> },
    { id: "compliance", label: "Compliance", icon: <Shield className="w-4 h-4" /> },
  ];

  return (
    <form onSubmit={handleSubmit(onFormSubmit)} className="space-y-8 animate-in-slide-up">
      <div className="flex flex-col lg:flex-row gap-8">
        {/* Navigation Sidebar */}
        <div className="lg:w-64 shrink-0">
          <div className="sticky top-24 space-y-1 bg-card/60 backdrop-blur-md border border-border p-2 rounded-2xl">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                type="button"
                onClick={() => setActiveTab(tab.id)}
                className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold transition-premium ${activeTab === tab.id
                  ? "bg-primary text-primary-foreground border-primary scale-[1.02]"
                  : "text-muted-foreground hover:bg-secondary/80 hover:text-foreground border-transparent border"
                  }`}
              >
                {tab.icon}
                {tab.label}
              </button>
            ))}
          </div>

          <div className="mt-8 p-4 bg-primary/5 rounded-2xl border border-primary/20">
            <h4 className="text-xs font-black text-primary tracking-wider mb-2 flex items-center gap-2">
              <Shield className="w-3.5 h-3.5" />
              Quick Save
            </h4>
            <p className="text-[11px] text-muted-foreground font-medium mb-4">
              All changes are secured. Press save to finalize.
            </p>
            <Button
              type="submit"
              disabled={isSubmitting}
              className="text-sm default w-full"
              leadingIcon={isSubmitting ? <Loader2 className="animate-spin" /> : <Save />}
            >
              {isSubmitting ? "Processing..." : "Save Staff Member"}
            </Button>
          </div>
        </div>

        {/* Content Area */}
        <div className="flex-1 space-y-6">
          <AnimatePresence mode="wait">
            {activeTab === "overview" && (
              <TabContent
                id="overview"
                title="Staff Overview"
                icon={<User className="w-5 h-5" />}
                className="p-8 space-y-8"
                footer={
                  <div className="bg-primary/5 p-6 rounded-3xl border border-primary/10 flex items-center justify-between">
                    <div>
                      <h4 className="font-bold text-foreground">Next Step: Documents</h4>
                      <p className="text-sm text-muted-foreground">Upload and manage staff documentation.</p>
                    </div>
                    <Button
                      type="button"
                      variant="ghost"
                      onClick={() => setActiveTab("documents")}
                      className="hover:bg-primary/10 hover:text-primary rounded-xl font-bold transition-premium"
                    >
                      Continue
                      <ChevronRight className="w-4 h-4 ml-2" />
                    </Button>
                  </div>
                }
              >
                {/* Basic Information */}
                <div>
                  <h3 className="text-sm font-black text-muted-foreground/80 mb-4 flex items-center gap-2">
                    <User className="w-4 h-4" />
                    BASIC INFORMATION
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Name <span className="text-rose-500">*</span></Label>
                      <Input
                        {...register("employee_name", { required: true })}
                        disabled={disabled}
                        className="font-medium"
                        placeholder="John Doe"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Initials</Label>
                      <Input
                        {...register("initial")}
                        disabled={disabled}
                        maxLength={3}
                        className="font-medium"
                        placeholder="JD"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Email</Label>
                      <Input
                        {...register("email")}
                        disabled={disabled}
                        type="email"
                        leadingIcon={<Mail />}
                        className="font-medium"
                        placeholder="j.doe@example.com"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Contact Number</Label>
                      <Input
                        {...register("contact_number")}
                        disabled={disabled}
                        leadingIcon={<Phone />}
                        className="font-medium"
                        placeholder="+1 (555) 000-0000"
                      />
                    </div>
                  </div>
                </div>

                {/* Skills & Position */}
                <div>
                  <h3 className="text-sm font-black text-muted-foreground/80 mb-4 flex items-center gap-2">
                    <Award className="w-4 h-4" />
                    SKILLS & POSITION
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Primary Skill</Label>
                      <Controller
                        name="position"
                        control={control}
                        render={({ field }) => (
                          <Select onValueChange={disabled ? undefined : field.onChange} value={field.value} disabled={disabled}>
                            <SelectTrigger className="font-medium" disabled={disabled}>
                              <SelectValue placeholder="Select primary skill" />
                            </SelectTrigger>
                            <SelectContent className="rounded-xl glass">
                              <SelectItem value="Barista">Barista</SelectItem>
                              <SelectItem value="Server">Server</SelectItem>
                              <SelectItem value="Cook">Cook</SelectItem>
                              <SelectItem value="Dishwasher">Dishwasher</SelectItem>
                              <SelectItem value="Bartender">Bartender</SelectItem>
                              <SelectItem value="Manager">Manager</SelectItem>
                            </SelectContent>
                          </Select>
                        )}
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Secondary Skill</Label>
                      <Input
                        {...register("position_2")}
                        disabled={disabled}
                        className="font-medium"
                        placeholder="Additional skills"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Skill Level</Label>
                      <Controller
                        name="profile_type"
                        control={control}
                        render={({ field }) => (
                          <Select onValueChange={disabled ? undefined : field.onChange} value={field.value} disabled={disabled}>
                            <SelectTrigger className="font-medium" disabled={disabled}>
                              <SelectValue placeholder="Select level" />
                            </SelectTrigger>
                            <SelectContent className="rounded-xl glass">
                              <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 className="text-xs font-black text-muted-foreground/80 pl-1">Employment Type</Label>
                      <Controller
                        name="employment_type"
                        control={control}
                        render={({ field }) => (
                          <Select onValueChange={disabled ? undefined : field.onChange} value={field.value} disabled={disabled}>
                            <SelectTrigger className="font-medium" disabled={disabled}>
                              <SelectValue placeholder="Select type" />
                            </SelectTrigger>
                            <SelectContent className="rounded-xl glass">
                              <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>
                </div>

                {/* Rating & Performance Overview */}
                <div>
                  <h3 className="text-sm font-black text-muted-foreground/80 mb-4 flex items-center gap-2">
                    <Star className="w-4 h-4" />
                    RATING & PERFORMANCE
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div className="p-6 bg-amber-50 dark:bg-amber-950/20 rounded-2xl border border-amber-200 dark:border-amber-900">
                      <div className="flex items-center gap-2 mb-2">
                        <Star className="w-4 h-4 text-amber-500" />
                        <Label className="text-xs font-black text-amber-700 dark:text-amber-400">Average Rating</Label>
                      </div>
                      <Input
                        {...register("averageRating", { valueAsNumber: true })}
                        disabled={disabled}
                        type="number"
                        step="0.1"
                        min="0"
                        max="5"
                        className="h-12 rounded-xl text-xl font-black text-center bg-white dark:bg-amber-950/40"
                      />
                    </div>

                    <div className="p-6 bg-emerald-50 dark:bg-emerald-950/20 rounded-2xl border border-emerald-200 dark:border-emerald-900">
                      <div className="flex items-center gap-2 mb-2">
                        <Shield className="w-4 h-4 text-emerald-500" />
                        <Label className="text-xs font-black text-emerald-700 dark:text-emerald-400">Reliability Score</Label>
                      </div>
                      <Input
                        {...register("reliability_score", { valueAsNumber: true })}
                        disabled={disabled}
                        type="number"
                        min="0"
                        max="100"
                        className="h-12 rounded-xl text-xl font-black text-center bg-white dark:bg-emerald-950/40"
                      />
                    </div>

                    <div className="p-6 bg-blue-50 dark:bg-blue-950/20 rounded-2xl border border-blue-200 dark:border-blue-900">
                      <div className="flex items-center gap-2 mb-2">
                        <TrendingUp className="w-4 h-4 text-blue-500" />
                        <Label className="text-xs font-black text-blue-700 dark:text-blue-400">Coverage %</Label>
                      </div>
                      <Input
                        {...register("shift_coverage_percentage", { valueAsNumber: true })}
                        disabled={disabled}
                        type="number"
                        min="0"
                        max="100"
                        className="h-12 rounded-xl text-xl font-black text-center bg-white dark:bg-blue-950/40"
                      />
                    </div>
                  </div>
                </div>

                {/* Location & Department */}
                <div>
                  <h3 className="text-sm font-black text-muted-foreground/80 mb-4 flex items-center gap-2">
                    <MapPin className="w-4 h-4" />
                    LOCATION & DEPARTMENT
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Department</Label>
                      <Controller
                        name="department"
                        control={control}
                        render={({ field }) => (
                          <Select onValueChange={disabled ? undefined : field.onChange} value={field.value} disabled={disabled}>
                            <SelectTrigger disabled={disabled}>
                              <SelectValue placeholder="Select department" />
                            </SelectTrigger>
                            <SelectContent className="rounded-xl glass">
                              <SelectItem value="Operations">Operations</SelectItem>
                              <SelectItem value="Sales">Sales</SelectItem>
                              <SelectItem value="Logistics">Logistics</SelectItem>
                              <SelectItem value="HR">HR</SelectItem>
                            </SelectContent>
                          </Select>
                        )}
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Primary City</Label>
                      <Input
                        {...register("city")}
                        disabled={disabled}
                        className="font-medium"
                        placeholder="e.g., San Francisco"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Hub Location</Label>
                      <Input
                        {...register("hub_location")}
                        disabled={disabled}
                        className="font-medium"
                        placeholder="Primary hub site"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Reporting Manager</Label>
                      <Controller
                        name="manager"
                        control={control}
                        render={({ field }) => (
                          <Select onValueChange={disabled ? undefined : field.onChange} value={field.value} disabled={disabled}>
                            <SelectTrigger className="font-medium" disabled={disabled}>
                              <SelectValue placeholder="Select manager" />
                            </SelectTrigger>
                            <SelectContent className="rounded-xl glass">
                              <SelectItem value="Fernando">Fernando</SelectItem>
                              <SelectItem value="Maria">Maria</SelectItem>
                              <SelectItem value="Paola">Paola</SelectItem>
                            </SelectContent>
                          </Select>
                        )}
                      />
                    </div>
                  </div>
                </div>
              </TabContent>
            )}

            {activeTab === "documents" && (
              <TabContent
                id="documents"
                title="Staff Documents"
                icon={<FileText className="w-5 h-5" />}
                className="p-8 space-y-8"
              >
                {/* Document Upload Section */}
                <div>
                  <h3 className="text-sm font-black text-muted-foreground/80 mb-4 flex items-center gap-2">
                    <FileText className="w-4 h-4" />
                    REQUIRED DOCUMENTS
                  </h3>
                  <div className="space-y-4">
                    <div className="p-6 bg-secondary/20 rounded-2xl border border-border/40">
                      <div className="flex items-center justify-between mb-2">
                        <Label className="font-bold text-foreground">I-9 Form</Label>
                        <span className="text-xs px-2 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-lg font-bold">
                          Pending
                        </span>
                      </div>
                      <p className="text-xs text-muted-foreground">Employment eligibility verification</p>
                    </div>

                    <div className="p-6 bg-secondary/20 rounded-2xl border border-border/40">
                      <div className="flex items-center justify-between mb-2">
                        <Label className="font-bold text-foreground">W-4 Form</Label>
                        <span className="text-xs px-2 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-lg font-bold">
                          Pending
                        </span>
                      </div>
                      <p className="text-xs text-muted-foreground">Tax withholding information</p>
                    </div>
                  </div>
                </div>

                {/* Certifications */}
                <div>
                  <h3 className="text-sm font-black text-muted-foreground/80 mb-4 flex items-center gap-2">
                    <Award className="w-4 h-4" />
                    CERTIFICATIONS
                  </h3>
                  <div className="space-y-4">
                    <div className="p-6 bg-secondary/20 rounded-2xl border border-border/40">
                      <div className="flex items-center justify-between mb-2">
                        <Label className="font-bold text-foreground">Food Handler Certificate</Label>
                        <span className="text-xs px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-lg font-bold">
                          Valid
                        </span>
                      </div>
                      <p className="text-xs text-muted-foreground">Expires: 12/31/2026</p>
                    </div>

                    <div className="p-6 bg-secondary/20 rounded-2xl border border-border/40">
                      <div className="flex items-center justify-between mb-2">
                        <Label className="font-bold text-foreground">Additional Certifications</Label>
                        <Button type="button" variant="outline" size="sm" disabled={disabled}>
                          Upload
                        </Button>
                      </div>
                      <p className="text-xs text-muted-foreground">Add any additional certifications or licenses</p>
                    </div>
                  </div>
                </div>

                {/* Notes */}
                <div className="space-y-2">
                  <Label className="text-xs font-black text-muted-foreground/80">Document Notes</Label>
                  <Textarea
                    {...register("notes")}
                    disabled={disabled}
                    placeholder="Notes about uploaded documents, missing items, or follow-ups needed..."
                    className="min-h-[100px]"
                  />
                </div>
              </TabContent>
            )}

            {activeTab === "work_history" && (
              <TabContent
                id="work_history"
                title="Work History"
                icon={<Briefcase className="w-5 h-5" />}
                className="p-8 space-y-8"
              >
                {/* Shift Statistics */}
                <div>
                  <h3 className="text-sm font-black text-muted-foreground/80 mb-4 flex items-center gap-2">
                    <Clock className="w-4 h-4" />
                    SHIFT STATISTICS
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div className="p-6 bg-secondary/20 rounded-2xl border border-border/40">
                      <Label className="text-xs font-black text-muted-foreground/80 mb-2 block">Total Shifts</Label>
                      <Input
                        {...register("total_shifts", { valueAsNumber: true })}
                        disabled={disabled}
                        type="number"
                        className="h-12 rounded-xl text-xl font-black text-center"
                      />
                    </div>

                    <div className="p-6 bg-secondary/20 rounded-2xl border border-border/40">
                      <Label className="text-xs font-black text-muted-foreground/80 mb-2 block">Cancellations</Label>
                      <Input
                        {...register("cancellation_count", { valueAsNumber: true })}
                        disabled={disabled}
                        type="number"
                        className="h-12 rounded-xl text-xl font-black text-center"
                      />
                    </div>

                    <div className="p-6 bg-secondary/20 rounded-2xl border border-border/40">
                      <Label className="text-xs font-black text-muted-foreground/80 mb-2 block">No Shows</Label>
                      <Input
                        {...register("no_show_count", { valueAsNumber: true })}
                        disabled={disabled}
                        type="number"
                        className="h-12 rounded-xl text-xl font-black text-center"
                      />
                    </div>
                  </div>
                </div>

                {/* Schedule Information */}
                <div>
                  <h3 className="text-sm font-black text-muted-foreground/80 mb-4 flex items-center gap-2">
                    <Calendar className="w-4 h-4" />
                    SCHEDULE INFORMATION
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Last Check-in</Label>
                      <Input
                        {...register("check_in")}
                        disabled={disabled}
                        type="date"
                        leadingIcon={<Calendar />}
                        className="font-medium"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Schedule Days</Label>
                      <Input
                        {...register("schedule_days")}
                        disabled={disabled}
                        className="font-medium"
                        placeholder="e.g., M/W/F Only"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Event Location</Label>
                      <Input
                        {...register("event_location")}
                        disabled={disabled}
                        className="font-medium"
                        placeholder="Primary event location"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Track</Label>
                      <Input
                        {...register("track")}
                        disabled={disabled}
                        className="font-medium"
                        placeholder="Assignment track"
                      />
                    </div>
                  </div>
                </div>

                {/* Assignment Details */}
                <div>
                  <h3 className="text-sm font-black text-muted-foreground/80 mb-4 flex items-center gap-2">
                    <Briefcase className="w-4 h-4" />
                    ASSIGNMENT DETAILS
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Replaced By</Label>
                      <Input
                        {...register("replaced_by")}
                        disabled={disabled}
                        className="font-medium"
                        placeholder="Staff member name"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Action Status</Label>
                      <Input
                        {...register("action")}
                        disabled={disabled}
                        className="font-medium"
                        placeholder="Current action status"
                      />
                    </div>
                  </div>
                </div>

                {/* Work History Notes */}
                <div className="space-y-2">
                  <Label className="text-xs font-black text-muted-foreground/80">Work History Notes</Label>
                  <Textarea
                    {...register("accounting_comments")}
                    disabled={disabled}
                    placeholder="Notes about work history, patterns, or observations..."
                    className="min-h-[100px]"
                  />
                </div>
              </TabContent>
            )}

            {activeTab === "compliance" && (
              <TabContent
                id="compliance"
                title="Compliance & Verification"
                icon={<Shield className="w-5 h-5" />}
                className="p-8 space-y-8"
              >
                {/* Verification Status */}
                <div>
                  <h3 className="text-sm font-black text-muted-foreground/80 mb-4 flex items-center gap-2">
                    <Shield className="w-4 h-4" />
                    VERIFICATION STATUS
                  </h3>
                  <div className="space-y-4">
                    <div className="p-6 bg-secondary/20 rounded-2xl border border-border/40 flex items-center justify-between">
                      <div className="flex items-center gap-4">
                        <Controller
                          name="invoiced"
                          control={control}
                          render={({ field }) => (
                            <Checkbox
                              id="invoiced"
                              disabled={disabled}
                              checked={field.value}
                              onChange={(e) => field.onChange(e.target.checked)}
                              className="w-6 h-6 rounded-lg border-2 border-primary/20 data-[state=checked]:bg-primary data-[state=checked]:border-primary"
                            />
                          )}
                        />
                        <div>
                          <Label htmlFor="invoiced" className="font-black text-foreground cursor-pointer">Verified for Invoicing</Label>
                          <p className="text-xs text-muted-foreground font-medium">Staff member approved for automatic invoicing</p>
                        </div>
                      </div>
                    </div>

                    <div className="p-6 bg-green-50 dark:bg-green-950/20 rounded-2xl border border-green-200 dark:border-green-900">
                      <div className="flex items-center gap-3 mb-2">
                        <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
                          <Shield className="w-4 h-4 text-white" />
                        </div>
                        <Label className="font-bold text-green-900 dark:text-green-100">Background Check</Label>
                      </div>
                      <p className="text-xs text-green-700 dark:text-green-400">Completed & Approved</p>
                    </div>

                    <div className="p-6 bg-amber-50 dark:bg-amber-950/20 rounded-2xl border border-amber-200 dark:border-amber-900">
                      <div className="flex items-center gap-3 mb-2">
                        <div className="w-8 h-8 rounded-full bg-amber-500 flex items-center justify-center">
                          <AlertCircle className="w-4 h-4 text-white" />
                        </div>
                        <Label className="font-bold text-amber-900 dark:text-amber-100">Drug Screening</Label>
                      </div>
                      <p className="text-xs text-amber-700 dark:text-amber-400">Pending Review</p>
                    </div>
                  </div>
                </div>

                {/* Language Requirements */}
                <div>
                  <h3 className="text-sm font-black text-muted-foreground/80 mb-4 flex items-center gap-2">
                    <Info className="w-4 h-4" />
                    LANGUAGE REQUIREMENTS
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">English Proficiency</Label>
                      <Controller
                        name="english"
                        control={control}
                        render={({ field }) => (
                          <Select onValueChange={disabled ? undefined : field.onChange} value={field.value} disabled={disabled}>
                            <SelectTrigger disabled={disabled}>
                              <SelectValue placeholder="Select level" />
                            </SelectTrigger>
                            <SelectContent className="rounded-xl glass">
                              <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="flex items-center gap-3 pt-8">
                      <Controller
                        name="english_required"
                        control={control}
                        render={({ field }) => (
                          <Checkbox
                            id="english_required"
                            disabled={disabled}
                            checked={field.value}
                            onChange={(e) => field.onChange(e.target.checked)}
                            className="w-5 h-5"
                          />
                        )}
                      />
                      <Label htmlFor="english_required" className="text-sm font-bold text-foreground cursor-pointer">
                        English Required for Role
                      </Label>
                    </div>
                  </div>
                </div>

                {/* Additional Compliance Fields */}
                <div>
                  <h3 className="text-sm font-black text-muted-foreground/80 mb-4 flex items-center gap-2">
                    <FileText className="w-4 h-4" />
                    ADDITIONAL INFORMATION
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">RO Number</Label>
                      <Input
                        {...register("ro")}
                        disabled={disabled}
                        className="font-medium"
                        placeholder="RO reference number"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">MON Reference</Label>
                      <Input
                        {...register("mon")}
                        disabled={disabled}
                        className="font-medium"
                        placeholder="Monitoring reference"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Phone (Alt)</Label>
                      <Input
                        {...register("phone")}
                        disabled={disabled}
                        leadingIcon={<Phone />}
                        className="font-medium"
                        placeholder="Alternative contact"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-black text-muted-foreground/80 pl-1">Address</Label>
                      <Input
                        {...register("address")}
                        disabled={disabled}
                        leadingIcon={<MapPin />}
                        className="font-medium"
                        placeholder="Street address"
                      />
                    </div>
                  </div>
                </div>

                {/* Compliance Notes */}
                <div className="space-y-2">
                  <Label className="text-xs font-black text-muted-foreground/80">Compliance Notes</Label>
                  <Textarea
                    {...register("notes")}
                    disabled={disabled}
                    placeholder="Compliance-related notes, verification details, or follow-up items..."
                    className="min-h-[100px]"
                  />
                </div>
              </TabContent>
            )}
          </AnimatePresence>
        </div>
      </div>
    </form>
  );
}

const TrendingUp = ({ className }: { className?: string }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>
);