ERP-node/frontend/components/theme/ThemeSettings.tsx

"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="min-w-[300px] rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800">
        <div className="mb-4 flex items-center gap-2">
          <Settings className="text-muted-foreground h-5 w-5 dark:text-gray-400" />
          <h3 className="font-semibold text-gray-900 dark:text-white">테마 설정</h3>
        </div>

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

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

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

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