import { useState } from "react";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { X, ChevronDown } from "lucide-react";

interface EditCareerPreferenceModalProps {
  isOpen: boolean;
  onClose: () => void;
  user: any;
}

export function EditCareerPreferenceModal({ isOpen, onClose, user }: EditCareerPreferenceModalProps) {
  const profile = user?.seekerProfile || {};
  
  // Mock states to match screenshot
  const [locations, setLocations] = useState<string[]>(['Odisha', 'Bhubaneswar', 'Hyderabad']);
  const [roles, setRoles] = useState<string[]>(['Software Engineer']);
  const [salary, setSalary] = useState("6,00,000");
  
  const [shift, setShift] = useState("Day");
  const [prefType, setPrefType] = useState("Permanent");
  const [empType, setEmpType] = useState("Full-Time");

  const removeLocation = (indexToRemove: number) => {
    setLocations(locations.filter((_, index) => index !== indexToRemove));
  };

  const removeRole = (indexToRemove: number) => {
    setRoles(roles.filter((_, index) => index !== indexToRemove));
  };

  const handleAddLocation = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const loc = e.target.value;
    if (loc && !locations.includes(loc)) {
      setLocations([...locations, loc]);
    }
    e.target.value = "";
  };

  const handleAddRole = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const role = e.target.value;
    if (role && !roles.includes(role) && roles.length < 3) {
      setRoles([...roles, role]);
    }
    e.target.value = "";
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onClose();
  };

  const inputClass = "w-full h-11 px-4 rounded-xl !border-0 shadow-[0_4px_8px_-2px_rgba(0,0,0,0.25)] ring-1 ring-inset ring-gray-100 bg-white text-sm font-medium text-gray-700 focus:outline-none appearance-none";

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="sm:max-w-[700px] w-full p-0 overflow-hidden bg-[#fafafa] rounded-2xl border-0 shadow-2xl flex flex-col max-h-[90vh]">
        
        {/* Header */}
        <div className="p-8 pb-4">
          <DialogTitle className="text-2xl font-bold text-gray-900 mt-2 mb-2">Edit Career Preference</DialogTitle>
        </div>

        {/* Scrollable Body */}
        <div className="px-8 pb-6 flex-1 overflow-y-auto">
          <form className="flex flex-col gap-6" onSubmit={handleSubmit} id="career-form">
            
            {/* Preferred Location */}
            <div className="space-y-3">
              <label className="text-sm font-medium text-gray-800">Preferred Location</label>
              <div className="relative">
                <select className={inputClass} defaultValue="" onChange={handleAddLocation}>
                  <option value="" disabled>Select Location</option>
                  <option value="Odisha">Odisha</option>
                  <option value="Bhubaneswar">Bhubaneswar</option>
                  <option value="Hyderabad">Hyderabad</option>
                </select>
                <div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
                  <ChevronDown className="w-5 h-5" />
                </div>
              </div>
              <div className="flex flex-wrap gap-3 pt-1">
                {locations.map((loc, index) => (
                  <div key={index} className="flex items-center gap-2 px-4 py-1.5 rounded-full border border-[#ff6b00] bg-white shadow-[0_2px_8px_rgba(255,107,0,0.15)] text-[#ff6b00] text-xs font-medium">
                    <span>{loc}</span>
                    <button type="button" onClick={() => removeLocation(index)} className="hover:bg-[#fff0e6] rounded-full p-0.5 transition-colors flex items-center justify-center">
                      <X className="w-3 h-3" />
                    </button>
                  </div>
                ))}
              </div>
            </div>

            {/* Preferred Role */}
            <div className="space-y-3">
              <label className="text-sm font-medium text-gray-800">Preferred Role (up to 3)</label>
              <div className="relative">
                <select className={inputClass} defaultValue="" onChange={handleAddRole}>
                  <option value="" disabled>Select Role</option>
                  <option value="Software Engineer">Software Engineer</option>
                  <option value="Frontend Developer">Frontend Developer</option>
                </select>
                <div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
                  <ChevronDown className="w-5 h-5" />
                </div>
              </div>
              <div className="flex flex-wrap gap-3 pt-1">
                {roles.map((role, index) => (
                  <div key={index} className="flex items-center gap-2 px-4 py-1.5 rounded-full border border-[#ff6b00] bg-white shadow-[0_2px_8px_rgba(255,107,0,0.15)] text-[#ff6b00] text-xs font-medium">
                    <span>{role}</span>
                    <button type="button" onClick={() => removeRole(index)} className="hover:bg-[#fff0e6] rounded-full p-0.5 transition-colors flex items-center justify-center">
                      <X className="w-3 h-3" />
                    </button>
                  </div>
                ))}
              </div>
            </div>

            {/* Expected Annual Salary */}
            <div className="space-y-3">
              <label className="text-sm font-medium text-gray-800">Expected Annual Salary</label>
              <div className="flex items-end gap-4 max-w-sm">
                <div className="flex items-center border-b border-gray-300 flex-1 pb-1">
                  <span className="text-gray-500 font-medium pl-1 pr-3">₹</span>
                  <input 
                    type="text" 
                    value={salary}
                    onChange={(e) => setSalary(e.target.value)}
                    className="w-full bg-transparent border-none outline-none text-gray-700 font-medium text-sm p-0"
                  />
                </div>
                <span className="text-sm font-medium text-gray-500 pb-1">Per Year</span>
              </div>
            </div>

            {/* Preferred Shift */}
            <div className="space-y-3">
              <label className="text-sm font-medium text-gray-800">Preferred Shift</label>
              <div className="flex items-center gap-3">
                {['Day', 'Night', 'Flexible'].map((s) => (
                  <button
                    key={s}
                    type="button"
                    onClick={() => setShift(s)}
                    className={`h-9 px-6 rounded-xl text-sm font-medium transition-colors shadow-[0_4px_8px_-2px_rgba(0,0,0,0.15)] ring-1 ring-inset ${
                      shift === s ? 'ring-[#ff6b00] text-[#ff6b00] bg-white' : 'ring-gray-200 text-gray-500 bg-white hover:bg-gray-50'
                    }`}
                  >
                    {s}
                  </button>
                ))}
              </div>
            </div>

            {/* Preferred Type */}
            <div className="space-y-3">
              <label className="text-sm font-medium text-gray-800">Preferred Type</label>
              <div className="flex items-center gap-3">
                {['Permanent', 'Contractual'].map((t) => (
                  <button
                    key={t}
                    type="button"
                    onClick={() => setPrefType(t)}
                    className={`h-9 px-6 rounded-xl text-sm font-medium transition-colors shadow-[0_4px_8px_-2px_rgba(0,0,0,0.15)] ring-1 ring-inset ${
                      prefType === t ? 'ring-[#ff6b00] text-[#ff6b00] bg-white' : 'ring-gray-200 text-gray-500 bg-white hover:bg-gray-50'
                    }`}
                  >
                    {t}
                  </button>
                ))}
              </div>
            </div>

            {/* Employment Type */}
            <div className="space-y-3">
              <label className="text-sm font-medium text-gray-800">Employment Type</label>
              <div className="flex items-center gap-3">
                {['Full-Time', 'Part-Time'].map((et) => (
                  <button
                    key={et}
                    type="button"
                    onClick={() => setEmpType(et)}
                    className={`h-9 px-6 rounded-xl text-sm font-medium transition-colors shadow-[0_4px_8px_-2px_rgba(0,0,0,0.15)] ring-1 ring-inset ${
                      empType === et ? 'ring-[#ff6b00] text-[#ff6b00] bg-white' : 'ring-gray-200 text-gray-500 bg-white hover:bg-gray-50'
                    }`}
                  >
                    {et}
                  </button>
                ))}
              </div>
            </div>
            
            <div className="h-4"></div>
          </form>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-4 p-6 pt-4 bg-[#fafafa]">
          <button type="button" onClick={onClose} className="text-sm font-bold text-gray-900 hover:text-gray-700 px-2 py-2">
            Cancel
          </button>
          <Button type="submit" form="career-form" className="bg-[#ff6b00] hover:bg-[#e65c00] text-white px-8 h-10 rounded-lg font-bold border-0 shadow-sm min-w-[120px]">
            Save
          </Button>
        </div>

      </DialogContent>
    </Dialog>
  );
}