import { useState, useEffect } from "react";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Check, Plus } from "lucide-react";
import { useUpdateBasicDetails } from "@/hooks/useProfile";
import { api } from "@/services/api";

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

export function EditLanguagesModal({ isOpen, onClose, user }: EditLanguagesModalProps) {
  const updateMutation = useUpdateBasicDetails();

  const [allLanguages, setAllLanguages] = useState<any[]>([]);
  const [selectedLanguages, setSelectedLanguages] = useState<{ id: number, english_level?: string | null }[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (isOpen) {
      setError(null);
      api.get('/languages').then(res => {
        if (res.data && Array.isArray(res.data)) {
          // Sort so English is always first, and the rest are alphabetical
          const sortedLanguages = [...res.data].sort((a, b) => {
            const nameA = a.name?.toLowerCase() || '';
            const nameB = b.name?.toLowerCase() || '';
            if (nameA === 'english') return -1;
            if (nameB === 'english') return 1;
            return nameA.localeCompare(nameB);
          });
          setAllLanguages(sortedLanguages);
        }
      }).catch(console.error);

      if (user?.languages) {
        setSelectedLanguages(user.languages.map((l: any) => ({
          id: l.language_id || l.id,
          english_level: l.seekerLanguage_english_level || l.english_level || null
        })));
      } else {
        setSelectedLanguages([]);
      }
    }
  }, [isOpen, user]);

  const toggleLanguage = (id: number) => {
    setError(null);
    const isSelected = selectedLanguages.some(l => l.id === id);
    if (isSelected) {
      setSelectedLanguages(selectedLanguages.filter(l => l.id !== id));
    } else {
      setSelectedLanguages([...selectedLanguages, { id, english_level: null }]);
    }
  };

  const updateEnglishLevel = (id: number, level: string) => {
    setError(null);
    setSelectedLanguages(selectedLanguages.map(l => {
      if (l.id === id) {
        // Map 'Advance' to 'Advanced' for the backend
        const backendLevel = level === 'Advance' ? 'Advanced' : level;
        return { ...l, english_level: backendLevel };
      }
      return l;
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    // Frontend Validation
    const englishLang = allLanguages.find(l => l.name?.toLowerCase() === 'english' || l.id === 13);
    if (englishLang) {
      const selectedEnglish = selectedLanguages.find(l => l.id === englishLang.id);
      if (selectedEnglish && !selectedEnglish.english_level) {
        setError("Please select your English proficiency level.");
        return;
      }
    }

    updateMutation.mutate({
      languages_ids: selectedLanguages
    }, {
      onSuccess: () => {
        onClose();
      }
    });
  };

  const englishLang = allLanguages.find(l => l.name?.toLowerCase() === 'english' || l.id === 13);
  const isEnglishSelected = englishLang ? selectedLanguages.some(l => l.id === englishLang.id) : false;
  const selectedEnglishObj = englishLang ? selectedLanguages.find(l => l.id === englishLang.id) : null;
  const displayLevel = selectedEnglishObj?.english_level === 'Advanced' ? 'Advance' : selectedEnglishObj?.english_level;

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="sm:max-w-[700px] w-full max-h-[80vh] p-0 overflow-hidden bg-white rounded-2xl border-0 shadow-2xl flex flex-col">
        
        {/* Header */}
        <div className="p-8 pb-4">
          <DialogTitle className="text-2xl font-bold text-gray-900 mb-2 mt-4">Language Proficiency</DialogTitle>
          {error && (
            <div className="text-red-500 text-sm font-medium mt-2 bg-red-50 p-2 rounded border border-red-100">
              {error}
            </div>
          )}
        </div>

        {/* Scrollable Body */}
        <div className="px-8 pb-6 flex-1 overflow-y-auto">
          <div className="flex flex-col gap-6">
            
            {/* Selected English Expanded Section */}
            {englishLang && isEnglishSelected && (
              <div className="w-full p-5 border border-gray-300 rounded-xl flex flex-col gap-5">
                <button
                  type="button"
                  onClick={() => toggleLanguage(englishLang.id)}
                  className="flex items-center justify-center gap-3 w-[140px] h-10 rounded-full border border-[#ff6b00] bg-[#fff9f6] text-[#ff6b00] text-sm font-medium transition-colors"
                >
                  <span>{englishLang.name}</span>
                  <Check className="w-4 h-4" />
                </button>

                <div className="flex flex-col md:flex-row gap-4 md:gap-6 w-full">
                  {[
                    { level: 'Basic', desc: 'You can understand/speak basic sentences' },
                    { level: 'Intermediate', desc: 'You can have a conversation in English on some topics' },
                    { level: 'Advance', desc: 'You can do your entire job in English and speak fluently' }
                  ].map(option => (
                    <label key={option.level} className="flex items-start gap-3 cursor-pointer flex-1">
                      <div className="relative flex items-center justify-center w-5 h-5 shrink-0 mt-0.5">
                        <input
                          type="radio"
                          name={`english_level_${englishLang.id}`}
                          value={option.level}
                          checked={displayLevel === option.level}
                          onChange={() => updateEnglishLevel(englishLang.id, option.level)}
                          className="peer sr-only"
                        />
                        <div className="w-5 h-5 border border-gray-400 rounded-full peer-checked:border-[#ff6b00] transition-colors flex items-center justify-center">
                          {displayLevel === option.level && (
                            <div className="w-2.5 h-2.5 bg-[#ff6b00] rounded-full"></div>
                          )}
                        </div>
                      </div>
                      <div className="flex flex-col">
                        <span className="text-sm font-medium text-gray-900">{option.level}</span>
                        <span className="text-xs text-gray-500 mt-1 leading-relaxed pr-2">{option.desc}</span>
                      </div>
                    </label>
                  ))}
                </div>
              </div>
            )}

            {/* General Languages Pill List */}
            <div className="flex flex-wrap gap-x-3 gap-y-4 items-start">
              {allLanguages.map((lang, index) => {
                // If it's English and it's selected, we already render it above in the expanded section.
                if (englishLang && lang.id === englishLang.id && isEnglishSelected) return null;

                const isSelected = selectedLanguages.some(l => l.id === lang.id);
                
                return (
                  <button
                    key={index}
                    type="button"
                    onClick={() => toggleLanguage(lang.id)}
                    className={`flex items-center justify-center gap-3 w-[140px] h-10 rounded-full border text-sm font-medium transition-colors ${
                      isSelected
                        ? 'border-gray-500 bg-white text-gray-700'
                        : 'border-gray-300 bg-white text-gray-400 hover:bg-gray-50'
                    }`}
                  >
                    <span className={isSelected ? "text-gray-700" : "text-gray-400"}>{lang.name}</span>
                    {isSelected ? (
                      <Check className="w-4 h-4 text-gray-500" />
                    ) : (
                      <Plus className="w-4 h-4" />
                    )}
                  </button>
                );
              })}
            </div>
          </div>
          
          <div className="h-10"></div>
        </div>

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

      </DialogContent>
    </Dialog>
  );
}