"use client";

import { useLanguage } from "@/contexts/LanguageContext";
import { useState, useRef, useEffect } from "react";
import { usePathname, useRouter } from "next/navigation";

// Mapping of Arabic-speaking countries to their ISO codes
const arabicCountries: Record<string, string> = {
  'AE': 'ae', // United Arab Emirates
  'SA': 'sa', // Saudi Arabia
  'EG': 'eg', // Egypt
  'IQ': 'iq', // Iraq
  'JO': 'jo', // Jordan
  'KW': 'kw', // Kuwait
  'LB': 'lb', // Lebanon
  'LY': 'ly', // Libya
  'MA': 'ma', // Morocco
  'OM': 'om', // Oman
  'PS': 'ps', // Palestine
  'QA': 'qa', // Qatar
  'SD': 'sd', // Sudan
  'SY': 'sy', // Syria
  'TN': 'tn', // Tunisia
  'YE': 'ye', // Yemen
  'BH': 'bh', // Bahrain
  'DZ': 'dz', // Algeria
  'MR': 'mr', // Mauritania
  'SO': 'so', // Somalia
  'KM': 'km', // Comoros
  'DJ': 'dj', // Djibouti
};

export default function LanguageDropdown() {
  const { language, setLanguage } = useLanguage();
  const pathname = usePathname();
  const router = useRouter();
  const [isOpen, setIsOpen] = useState(false);
  const [userCountry, setUserCountry] = useState<string | null>(null);
  const [isDetecting, setIsDetecting] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Detect user's country using geocoding API
  useEffect(() => {
    const detectCountry = async () => {
      setIsDetecting(true);
      
      // List of IP geolocation services to try (same as pricing component)
      const services = [
        {
          url: 'https://api.country.is/',
          getCountry: (data: { country: string }) => data.country
        },
        {
          url: 'https://ipwho.is/',
          getCountry: (data: { country_code: string }) => data.country_code
        },
        {
          url: 'https://freeipapi.com/api/json',
          getCountry: (data: { countryCode: string }) => data.countryCode
        }
      ];

      for (const service of services) {
        try {
          const controller = new AbortController();
          const timeoutId = setTimeout(() => controller.abort(), 3000);
          
          const response = await fetch(service.url, { 
            signal: controller.signal,
            mode: 'cors'
          });
          clearTimeout(timeoutId);
          
          if (response.ok) {
            const data = await response.json();
            const countryCode = service.getCountry(data);
            
            if (countryCode) {
              setUserCountry(countryCode.toUpperCase());
              setIsDetecting(false);
              return;
            }
          }
        } catch (error) {
          // Try next service
          continue;
        }
      }

      setUserCountry('US');
      setIsDetecting(false);
    };

    detectCountry();
  }, []);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // Get the appropriate flag for Arabic based on user's country
  const getArabicFlag = () => {
    if (!userCountry || !arabicCountries[userCountry]) {
      return {
        flagUrl: "https://flagcdn.com/w40/us.png",
        flagAlt: "US Flag"
      };
    }
    
    const countryCodeLower = arabicCountries[userCountry];
    return {
      flagUrl: `https://flagcdn.com/w40/${countryCodeLower}.png`,
      flagAlt: `${userCountry} Flag`
    };
  };

  const arabicFlag = getArabicFlag();

  const languages = [
    {
      code: "en",
      name: "English",
      flagUrl: "https://flagcdn.com/w40/us.png",
      flagAlt: "USA Flag",
    },
    {
      code: "ar",
      name: "العربية",
      flagUrl: arabicFlag.flagUrl,
      flagAlt: arabicFlag.flagAlt,
    },
  ];

  const currentLanguage = languages.find((lang) => lang.code === language);

  const handleLanguageChange = (langCode: string) => {
    setLanguage(langCode as "en" | "ar");
    setIsOpen(false);

    const segments = pathname.split("/").filter(Boolean);
    if (segments[0] === "ar" || segments[0] === "en") {
      segments[0] = langCode;
    } else {
      segments.unshift(langCode);
    }
    const newPath = "/" + segments.join("/");
    const params = new URLSearchParams(window.location.search);
    params.delete("lang");
    const query = params.toString();
    router.push(`${newPath}${query ? `?${query}` : ""}${window.location.hash}`);
  };

  return (
    <div className="language-dropdown-wrapper" ref={dropdownRef}>
      <button
        className="language-dropdown-trigger"
        onClick={() => setIsOpen(!isOpen)}
        aria-expanded={isOpen}
        aria-haspopup="true"
      >
        <img 
          src={currentLanguage?.flagUrl} 
          alt={currentLanguage?.flagAlt}
          className="flag-image"
        />
        <span className="language-name language-name-desktop">{currentLanguage?.name}</span>
        <svg
          width="12"
          height="8"
          viewBox="0 0 12 8"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className={`dropdown-arrow ${isOpen ? "open" : ""}`}
        >
          <path
            d="M1 1.5L6 6.5L11 1.5"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </button>

      {isOpen && (
        <div className="language-dropdown-menu">
          {languages.map((lang) => (
            <button
              key={lang.code}
              className={`language-dropdown-item ${
                language === lang.code ? "active" : ""
              }`}
              onClick={() => handleLanguageChange(lang.code)}
            >
              <img 
                src={lang.flagUrl} 
                alt={lang.flagAlt}
                className="flag-image"
              />
              <span className="language-name">{lang.name}</span>
              {language === lang.code && (
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="check-icon"
                >
                  <path
                    d="M13.3337 4L6.00033 11.3333L2.66699 8"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              )}
            </button>
          ))}
        </div>
      )}

      <style jsx>{`
        .language-dropdown-wrapper {
          position: relative;
          display: inline-block;
          margin-right: 10px;
        }

        .language-dropdown-trigger {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 12px;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 8px;
          color: #fff;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          min-width: 110px;
        }

        .language-dropdown-trigger:hover {
          background: rgba(255, 255, 255, 0.15);
          border-color: rgba(255, 255, 255, 0.3);
        }

        .flag-image {
          width: 20px;
          height: 15px;
          object-fit: cover;
          border-radius: 2px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .language-name {
          flex: 1;
          text-align: left;
        }

        .dropdown-arrow {
          transition: transform 0.3s ease;
        }

        .dropdown-arrow.open {
          transform: rotate(180deg);
        }

        .language-dropdown-menu {
          position: absolute;
          top: calc(100% + 8px);
          right: 0;
          background: #fff;
          border-radius: 8px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
          min-width: 150px;
          overflow: hidden;
          z-index: 1000;
          animation: slideDown 0.2s ease;
        }

        @keyframes slideDown {
          from {
            opacity: 0;
            transform: translateY(-10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .language-dropdown-item {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          padding: 12px 16px;
          background: transparent;
          border: none;
          color: #333;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          text-align: left;
        }

        .language-dropdown-item:hover {
          background: #f5f5f5;
        }

        .language-dropdown-item.active {
          background: #f0f4ff;
          color: #4F46E5;
        }

        .language-dropdown-item .language-name {
          flex: 1;
        }

        .check-icon {
          color: #4F46E5;
        }

        @media (max-width: 768px) {
          .language-dropdown-wrapper {
            margin-right: 8px;
          }

          .language-dropdown-trigger {
            min-width: auto;
            padding: 6px 8px;
            font-size: 13px;
            gap: 4px;
          }

          .language-name-desktop {
            display: none;
          }

          .flag-image {
            width: 24px;
            height: 18px;
          }

          .dropdown-arrow {
            width: 10px;
            height: 6px;
          }

          .language-dropdown-menu {
            min-width: 120px;
          }
        }

        @media (max-width: 480px) {
          .language-dropdown-wrapper {
            margin-right: 5px;
          }

          .language-dropdown-trigger {
            padding: 5px 6px;
          }

          .flag-image {
            width: 22px;
            height: 16px;
          }
        }
      `}</style>
    </div>
  );
}