import { useWidget } from "../context/WidgetContext";
import { availableLanguages, t } from "../translations";
import { setStorageValue } from "../storage";
import { LANGUAGE_PREF } from "../constants";
import { getIconUrl } from "../utils/icon-url";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "./ui/dropdown-menu"
import { ChevronDown } from "lucide-react";

export default function LanguageDropdown() {
  const { currentLanguage, setCurrentLanguage } = useWidget();

  const handleLanguageChange = (langCode) => {
    setCurrentLanguage(langCode);
    // Save to storage when user explicitly changes language
    setStorageValue(LANGUAGE_PREF, langCode);
  };

  const desiredOrder = [
    'en','de','es','fr','it','pl','sv','fi','pt','ro','sl','sk','nl','da','el','cs','hu','lt','lv','et','hr','ie','bg','no','tr','id','pt-br','ja','ko','zh','ar','ru','hi','uk','sr'
  ];
  const indexMap = new Map(desiredOrder.map((code, idx) => [code, idx]));
  const sortedLanguages = [...availableLanguages].sort((a, b) => {
    const ia = indexMap.has(a.code) ? indexMap.get(a.code) : Number.MAX_SAFE_INTEGER;
    const ib = indexMap.has(b.code) ? indexMap.get(b.code) : Number.MAX_SAFE_INTEGER;
    if (ia !== ib) return ia - ib;
    // Fallback stable by name
    return a.name.localeCompare(b.name);
  });
  const currentLang = sortedLanguages.find(lang => lang.code === currentLanguage) || sortedLanguages[0];

  return (
      <div className="wideaccess-language-dropdown">
        <DropdownMenu modal={false}>
          <DropdownMenuTrigger asChild>
            <button
                className="wideaccess-dropdown-trigger"
                aria-label={t('selectLanguage', currentLanguage)}
            >
            <span className="wideaccess-language-option">
              <span className="wideaccess-flag">
                <img
                    src={getIconUrl(currentLang?.flag || 'flags/us')}
                    alt={`${currentLang?.name || 'English'} flag`}
                    className="wideaccess-flag-icon"
                />
              </span>
              <span className="wideaccess-language-name">{currentLang?.name || 'English'}</span>
            </span>
              <ChevronDown className="h-4 w-4 opacity-50" style={{ marginLeft: 'auto' }} />
            </button>
          </DropdownMenuTrigger>
        <DropdownMenuContent
          className="wideaccess-dropdown-content"
          align="start"
        >
          {sortedLanguages.map((lang) => (
                <DropdownMenuItem
                    key={lang.code}
                    onClick={() => handleLanguageChange(lang.code)}
                    className={`wideaccess-dropdown-item ${lang.code === currentLanguage ? 'wideaccess-dropdown-item-active' : ''}`}
                >
              <span className="wideaccess-language-option">
                <span className="wideaccess-flag">
                  <img
                      src={getIconUrl(lang.flag)}
                      alt={`${lang.name} flag`}
                      className="wideaccess-flag-icon"
                  />
                </span>
                <span className="wideaccess-language-name">{lang.name}</span>
              </span>
                </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
  );
}