"use client";

import { useTheme } from "@/contexts/ThemeContext";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Sun, Moon, Accessibility } from "lucide-react";

const themes = [
  { value: "light", label: "일반 모드", icon: Sun, color: "text-orange-500", emoji: "☀️" },
  { value: "dark", label: "다크 모드", icon: Moon, color: "text-blue-400", emoji: "🌙" },
  { value: "senior", label: "시니어 모드", icon: Accessibility, color: "text-green-500", emoji: "👓" },
];

interface ThemeSelectProps {
  native?: boolean;
}

export function ThemeSelect({ native = true }: ThemeSelectProps) {
  const { theme, setTheme } = useTheme();

  const currentTheme = themes.find((t) => t.value === theme);
  const CurrentIcon = currentTheme?.icon || Sun;

  // 네이티브 select
  if (native) {
    return (
      <div className="relative w-[140px]">
        <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none z-10">
          <CurrentIcon className={`w-4 h-4 ${currentTheme?.color}`} />
        </div>
        <select
          value={theme}
          onChange={(e) => setTheme(e.target.value as "light" | "dark" | "senior")}
          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"
        >
          {themes.map((themeOption) => (
            <option key={themeOption.value} value={themeOption.value}>
              {themeOption.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={theme} onValueChange={(value) => setTheme(value as "light" | "dark" | "senior")}>
      <SelectTrigger className="w-[140px] rounded-xl border-border/50 bg-background/50 backdrop-blur">
        <div className="flex items-center gap-2">
          <CurrentIcon className={`w-4 h-4 ${currentTheme?.color}`} />
          <SelectValue>
            <span className="text-sm">{currentTheme?.label}</span>
          </SelectValue>
        </div>
      </SelectTrigger>
      <SelectContent>
        {themes.map((themeOption) => {
          const Icon = themeOption.icon;
          return (
            <SelectItem key={themeOption.value} value={themeOption.value}>
              <div className="flex items-center gap-2">
                <Icon className={`w-4 h-4 ${themeOption.color}`} />
                <span>{themeOption.label}</span>
              </div>
            </SelectItem>
          );
        })}
      </SelectContent>
    </Select>
  );
}