"use client";

import { usePathname } from "next/navigation";
import { useLocale } from "next-intl";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Globe } from "lucide-react";

const languages = [
  { code: "ko", label: "한국어", flag: "🇰🇷" },
  { code: "en", label: "English", flag: "🇺🇸" },
  { code: "ja", label: "日本語", flag: "🇯🇵" },
];

interface LanguageSelectProps {
  native?: boolean;
}

export function LanguageSelect({ native = true }: LanguageSelectProps) {
  const pathname = usePathname();
  const locale = useLocale();

  const handleLanguageChange = (newLocale: string) => {
    // Remove current locale from pathname
    const pathnameWithoutLocale = pathname.replace(`/${locale}`, "");
    // Force full page reload to ensure clean state and proper i18n loading
    window.location.href = `/${newLocale}${pathnameWithoutLocale}`;
  };

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

  // 네이티브 select
  if (native) {
    return (
      <div className="relative min-w-[140px] w-auto">
        <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none z-10">
          <Globe className="w-4 h-4" />
        </div>
        <select
          value={locale}
          onChange={(e) => handleLanguageChange(e.target.value)}
          className="w-full h-9 pl-9 pr-3 rounded-xl border border-border/50 bg-background/50 backdrop-blur text-sm appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0 transition-all"
        >
          {languages.map((lang) => (
            <option key={lang.code} value={lang.code}>
              {lang.flag} {lang.label}
            </option>
          ))}
        </select>
        <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
          <svg className="w-4 h-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </div>
      </div>
    );
  }

  // Radix UI 모달 select
  return (
    <Select value={locale} onValueChange={handleLanguageChange}>
      <SelectTrigger className="min-w-[140px] w-auto rounded-xl border-border/50 bg-background/50 backdrop-blur">
        <div className="flex items-center gap-2">
          <Globe className="w-4 h-4" />
          <SelectValue>
            <span className="flex items-center gap-2">
              <span>{currentLanguage?.flag}</span>
              <span className="text-sm">{currentLanguage?.label}</span>
            </span>
          </SelectValue>
        </div>
      </SelectTrigger>
      <SelectContent>
        {languages.map((lang) => (
          <SelectItem key={lang.code} value={lang.code}>
            <div className="flex items-center gap-2">
              <span>{lang.flag}</span>
              <span>{lang.label}</span>
            </div>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}