import React, { useState } from "react";
import { myToast } from "../utils/toastify";
import { Settings2, SunMoon, Thermometer } from "lucide-react";

const getInitialTheme = () => localStorage.getItem("theme") || "light";
const getInitialUnit = () => localStorage.getItem("unit") || "metric";

interface Props {
  onClose: () => void;
}

const ChangePreferences: React.FC<Props> = ({ onClose }) => {
  const [unit, setUnit] = useState(getInitialUnit());
  const [theme, setTheme] = useState(getInitialTheme());

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    localStorage.setItem("unit", unit);
    localStorage.setItem("theme", theme);
    myToast("Preferences saved successfully!", "success");
    onClose();
  };

  // Theme-Optionen so sortieren, dass die aktuelle Auswahl oben steht
  const themeOptions =
    theme === "dark"
      ? [
          { value: "dark", label: "Dark" },
          { value: "light", label: "Light" },
        ]
      : [
          { value: "light", label: "Light" },
          { value: "dark", label: "Dark" },
        ];

  return (
    <div className="w-full max-w-md mx-auto bg-white rounded-2xl shadow-2xl border border-blue-200 p-8">
      <h2 className="text-3xl font-extrabold mb-6 text-blue-700 flex items-center gap-2">
        <Settings2 />
        Preferences
      </h2>
      <form onSubmit={handleSubmit} className="space-y-6">
        {/* Unit */}
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-2 items-center gap-2">
            <Thermometer />
            Temperature Unit
          </label>
          <select
            className="cursor-pointer w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
            value={unit}
            onChange={(e) => setUnit(e.target.value)}
          >
            <option value="metric">Celsius (°C)</option>
            <option value="imperial">Imperial (°F)</option>
            <option value="standard">Standard (K)</option>
          </select>
        </div>
        {/* Theme */}
        <div>
          <label className="cursor-pointer block text-sm font-semibold text-gray-700 mb-2 items-center gap-2">
            <SunMoon />
            Theme
          </label>
          <select
            className="cursor-pointer w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
            value={theme}
            onChange={(e) => setTheme(e.target.value)}
          >
            {themeOptions.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>
        </div>
        {/* Submit */}
        <button
          type="submit"
          className="cursor-pointer w-full bg-gradient-to-r from-blue-600 to-blue-400 text-white py-3 rounded-xl font-bold text-lg shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all focus:outline-none focus:ring-2 focus:ring-blue-400"
        >
          Save Preferences
        </button>
      </form>
    </div>
  );
};

export default ChangePreferences;
