"use client";

import React from "react";
import { useTheme } from "@/lib/contexts/ThemeContext";
import { Sun, Moon, Monitor, Palette, Settings } from "lucide-react";

export const ThemeSettings: React.FC = () => {
  const { theme, setTheme, toggleMode, isDark, colors } = useTheme();

  const colorSchemes = [
    { id: "orange", name: "오렌지", color: "#f97316" },
    { id: "blue", name: "블루", color: "#3b82f6" },
    { id: "green", name: "그린", color: "#10b981" },
    { id: "purple", name: "퍼플", color: "#8b5cf6" },
    { id: "red", name: "레드", color: "#ef4444" },
  ] as const;

  return (
    <div className="fixed top-4 right-4 z-50">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4 min-w-[300px]">
        <div className="flex items-center gap-2 mb-4">
          <Settings className="w-5 h-5 text-gray-600 dark:text-gray-400" />
          <h3 className="font-semibold text-gray-900 dark:text-white">테마 설정</h3>
        </div>

        {/* 다크모드 토글 */}
        <div className="space-y-3">
          <div>
            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
              테마 모드
            </label>
            <div className="flex gap-2">
              <button
                onClick={() => setTheme({ mode: "light" })}
                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                  theme.mode === "light"
                    ? "bg-orange-100 text-orange-700 border border-orange-300"
                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                }`}
              >
                <Sun className="w-4 h-4" />
                라이트
              </button>
              <button
                onClick={() => setTheme({ mode: "dark" })}
                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                  theme.mode === "dark"
                    ? "bg-orange-100 text-orange-700 border border-orange-300"
                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                }`}
              >
                <Moon className="w-4 h-4" />
                다크
              </button>
              <button
                onClick={() => setTheme({ mode: "system" })}
                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                  theme.mode === "system"
                    ? "bg-orange-100 text-orange-700 border border-orange-300"
                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                }`}
              >
                <Monitor className="w-4 h-4" />
                시스템
              </button>
            </div>
          </div>

          {/* 색상 스키마 */}
          <div>
            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
              색상 스키마
            </label>
            <div className="grid grid-cols-5 gap-2">
              {colorSchemes.map((scheme) => (
                <button
                  key={scheme.id}
                  onClick={() => setTheme({ colorScheme: scheme.id })}
                  className={`p-3 rounded-lg border-2 transition-all ${
                    theme.colorScheme === scheme.id
                      ? "border-orange-500 shadow-md"
                      : "border-gray-200 hover:border-gray-300"
                  }`}
                >
                  <div
                    className="w-6 h-6 rounded-full mx-auto"
                    style={{ backgroundColor: scheme.color }}
                  />
                  <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
                    {scheme.name}
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* 현재 색상 미리보기 */}
          <div>
            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
              현재 색상
            </label>
            <div className="flex gap-2">
              <div
                className="w-8 h-8 rounded-lg border border-gray-200"
                style={{ backgroundColor: colors.primary }}
                title="Primary"
              />
              <div
                className="w-8 h-8 rounded-lg border border-gray-200"
                style={{ backgroundColor: colors.secondary }}
                title="Secondary"
              />
              <div
                className="w-8 h-8 rounded-lg border border-gray-200"
                style={{ backgroundColor: colors.accent }}
                title="Accent"
              />
            </div>
          </div>

          {/* 빠른 토글 버튼 */}
          <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
            <button
              onClick={toggleMode}
              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
            >
              {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
              {isDark ? "라이트 모드로" : "다크 모드로"} 전환
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};