import { defineProperties } from "figma:react";
import { useState, useEffect, useRef } from "react";
import { motion } from "motion/react";

export default function DigitalClock() {
  const [time, setTime] = useState(new Date());
  const [blinkState, setBlinkState] = useState(true);
  const [showMenu, setShowMenu] = useState(false);
  
  // Settings state
  const [settings, setSettings] = useState({
    colorScheme: "pinkTeal",
    theme: "dark",
    use24HourFormat: false,
    showSeconds: true,
    displayDate: false,
    glowIntensity: 1.0
  });
  
  const menuRef = useRef<HTMLDivElement | null>(null);

  // Handle clicks outside the menu to close it
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        setShowMenu(false);
      }
    }
    
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [menuRef]);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
      setBlinkState((prev) => !prev);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  const hours = settings.use24HourFormat
    ? time.getHours().toString().padStart(2, "0")
    : (time.getHours() % 12 || 12).toString().padStart(2, "0");
  const minutes = time.getMinutes().toString().padStart(2, "0");
  const seconds = time.getSeconds().toString().padStart(2, "0");
  const ampm = time.getHours() >= 12 ? "PM" : "AM";

  // Format for day display
  const day = time.getDate().toString().padStart(2, "0");
  const month = (time.getMonth() + 1).toString().padStart(2, "0");

  const colorMap = {
    greenClassic: {
      dark: {
        digits: "text-green-400",
        background: "bg-green-950",
        glow: "shadow-[0_0_10px_rgba(74,222,128,VAR)]",
        border: "border-green-700",
        inner: "bg-black"
      },
      light: {
        digits: "text-green-600",
        background: "bg-green-100",
        glow: "shadow-[0_0_10px_rgba(74,222,128,VAR)]",
        border: "border-green-400",
        inner: "bg-white"
      }
    },
    purpleTeal: {
      dark: {
        digits: "text-teal-400",
        background: "bg-purple-900",
        glow: "shadow-[0_0_10px_rgba(45,212,191,VAR)]",
        border: "border-purple-600",
        inner: "bg-black"
      },
      light: {
        digits: "text-purple-600",
        background: "bg-teal-100",
        glow: "shadow-[0_0_10px_rgba(147,51,234,VAR)]",
        border: "border-teal-400",
        inner: "bg-white"
      }
    },
    pinkTeal: {
      dark: {
        digits: "text-pink-500",
        background: "bg-teal-900",
        glow: "shadow-[0_0_10px_rgba(236,72,153,VAR)]",
        border: "border-teal-700",
        inner: "bg-black"
      },
      light: {
        digits: "text-teal-600",
        background: "bg-pink-100",
        glow: "shadow-[0_0_10px_rgba(13,148,136,VAR)]",
        border: "border-pink-400",
        inner: "bg-white"
      }
    },
    pinkPurple: {
      dark: {
        digits: "text-pink-400",
        background: "bg-purple-950",
        glow: "shadow-[0_0_10px_rgba(236,72,153,VAR)]",
        border: "border-pink-500",
        inner: "bg-black"
      },
      light: {
        digits: "text-purple-600",
        background: "bg-pink-100",
        glow: "shadow-[0_0_10px_rgba(147,51,234,VAR)]",
        border: "border-pink-400",
        inner: "bg-white"
      }
    },
    yellowPink: {
      dark: {
        digits: "text-yellow-300",
        background: "bg-gray-900",
        glow: "shadow-[0_0_10px_rgba(250,204,21,VAR)]",
        border: "border-pink-500",
        inner: "bg-black"
      },
      light: {
        digits: "text-gray-800",
        background: "bg-yellow-100",
        glow: "shadow-[0_0_10px_rgba(31,41,55,VAR)]",
        border: "border-pink-400",
        inner: "bg-white"
      }
    },
    neonGreen: {
      dark: {
        digits: "text-[#0CFF0C]",
        background: "bg-black",
        glow: "shadow-[0_0_10px_rgba(12,255,12,VAR)]",
        border: "border-[#FF7F7F]",
        inner: "bg-black"
      },
      light: {
        digits: "text-[#00AA00]",
        background: "bg-gray-100",
        glow: "shadow-[0_0_10px_rgba(0,170,0,VAR)]",
        border: "border-[#FFA3A3]",
        inner: "bg-white"
      }
    }
  };

  const colors = colorMap[settings.colorScheme]?.[settings.theme] || colorMap.pinkTeal.dark;
  const glowValue = colors.glow.replace("VAR", settings.glowIntensity.toString());

  // Function to update a single setting
  const updateSetting = (key, value) => {
    setSettings(prev => ({
      ...prev,
      [key]: value
    }));
  };

  return (
    <div className="flex items-center justify-center w-full h-full font-sans">
      {/* Main clock container */}
      <div className="relative">
        {/* Clock */}
        <div 
          className={`px-5 py-3 rounded-lg ${colors.background} border-4 ${colors.border} shadow-md flex flex-col items-center`}
          style={{ 
            boxShadow: `inset 0 2px 5px rgba(255, 255, 255, 0.1), 
                        inset 0 -2px 5px rgba(0, 0, 0, 0.3), 
                        0 5px 15px rgba(0, 0, 0, 0.5)` 
          }}>
          <div 
            className={`${colors.inner} p-4 rounded-md border ${colors.border} ${glowValue}`}
            style={{ 
              boxShadow: `inset 0 0 10px rgba(0, 0, 0, 0.8)` 
            }}>
            <div className="flex flex-col items-center">
              <div className="flex items-center justify-center">
                <div 
                  className={`${colors.digits} text-6xl leading-none tracking-wider font-normal`}
                  style={{ 
                    fontFamily: "'DSEG7', monospace",
                    letterSpacing: '0.05em'
                  }}>
                  {hours}
                  <motion.span 
                    animate={{ opacity: blinkState ? 1 : 0.3 }}
                    transition={{ duration: 0.3 }}
                    className="inline-block mx-1">
                    :
                  </motion.span>
                  {minutes}
                </div>
                {!settings.use24HourFormat && (
                  <span className={`${colors.digits} ml-2 text-3xl align-top`} style={{ fontFamily: "'DSEG7', monospace" }}>{ampm}</span>
                )}
              </div>
              
              {settings.showSeconds && (
                <div 
                  className={`${colors.digits} text-4xl mt-1 tracking-wider font-normal`}
                  style={{ fontFamily: "'DSEG7', monospace" }}>
                  <motion.span 
                    animate={{ opacity: blinkState ? 1 : 0.3 }}
                    transition={{ duration: 0.3 }}
                    className="inline-block opacity-50 mr-1">
                    :
                  </motion.span>
                  {seconds}
                </div>
              )}
              
              {settings.displayDate && (
                <div 
                  className={`${colors.digits} text-3xl mt-2 tracking-wider font-normal`}
                  style={{ fontFamily: "'DSEG7', monospace" }}>
                  {day}-{month}
                </div>
              )}
            </div>
          </div>
          <div className="w-full flex justify-between mt-2 px-4">
            <button 
              onClick={() => setShowMenu(!showMenu)}
              className="h-4 w-4 rounded-full bg-gray-500 hover:bg-gray-400 active:bg-gray-600 transition-colors duration-150 cursor-pointer"
              aria-label="Settings"
            />
            <div className="h-4 w-4 rounded-full bg-gray-500"></div>
          </div>
        </div>
        
        {/* 90s Style Menu */}
        {showMenu && (
          <div 
            ref={menuRef}
            className="absolute top-[105%] left-0 right-0 w-full bg-gray-200 border-4 border-gray-700 rounded-md shadow-lg z-10"
            style={{
              boxShadow: '0 4px 8px rgba(0,0,0,0.5), inset 1px 1px 0px #fff, inset -1px -1px 0px #888',
            }}
          >
            <div className="bg-[#000080] text-white p-1 flex justify-between items-center mb-2">
              <div className="font-bold text-sm tracking-tight pl-1">Settings</div>
              <button 
                onClick={() => setShowMenu(false)}
                className="w-5 h-5 bg-gray-300 border border-gray-500 flex items-center justify-center rounded-sm text-black hover:bg-gray-400 active:bg-gray-500"
                style={{
                  boxShadow: 'inset 1px 1px 0px #fff, inset -1px -1px 0px #888'
                }}
              >
                <span className="text-xs font-bold leading-none">✕</span>
              </button>
            </div>
            
            <div className="p-2 space-y-3">
              {/* Color Scheme */}
              <div className="mb-2">
                <label className="block text-sm font-bold mb-1">Color Scheme:</label>
                <select 
                  value={settings.colorScheme}
                  onChange={(e) => updateSetting('colorScheme', e.target.value)}
                  className="w-full p-1 bg-white border-2 border-gray-800 cursor-pointer"
                  style={{
                    boxShadow: 'inset 1px 1px 3px rgba(0,0,0,0.3)'
                  }}
                >
                  <option value="pinkTeal">Pink/Teal</option>
                  <option value="greenClassic">Green Classic</option>
                  <option value="purpleTeal">Purple/Teal</option>
                  <option value="pinkPurple">Pink/Purple</option>
                  <option value="yellowPink">Yellow/Pink</option>
                  <option value="neonGreen">Neon Green</option>
                </select>
              </div>
              
              {/* Toggle Settings */}
              <div className="space-y-2">
                {/* Theme Toggle */}
                <div className="flex items-center justify-between">
                  <label className="text-sm font-bold">Dark Mode:</label>
                  <div 
                    className={`w-10 h-5 ${settings.theme === 'dark' ? 'bg-blue-500' : 'bg-gray-400'} rounded-sm relative cursor-pointer`}
                    style={{
                      boxShadow: 'inset 1px 1px 3px rgba(0,0,0,0.3)'
                    }}
                    onClick={() => updateSetting('theme', settings.theme === 'dark' ? 'light' : 'dark')}
                  >
                    <div 
                      className={`absolute w-4 h-4 bg-white border border-gray-400 rounded-sm transition-transform ${settings.theme === 'dark' ? 'translate-x-5' : 'translate-x-0'}`}
                      style={{
                        boxShadow: '0 1px 2px rgba(0,0,0,0.3)',
                        top: '1px',
                      }}
                    ></div>
                  </div>
                </div>
                
                {/* 24 Hour Format */}
                <div className="flex items-center justify-between">
                  <label className="text-sm font-bold">24-Hour Format:</label>
                  <div 
                    className={`w-10 h-5 ${settings.use24HourFormat ? 'bg-blue-500' : 'bg-gray-400'} rounded-sm relative cursor-pointer`}
                    style={{
                      boxShadow: 'inset 1px 1px 3px rgba(0,0,0,0.3)'
                    }}
                    onClick={() => updateSetting('use24HourFormat', !settings.use24HourFormat)}
                  >
                    <div 
                      className={`absolute w-4 h-4 bg-white border border-gray-400 rounded-sm transition-transform ${settings.use24HourFormat ? 'translate-x-5' : 'translate-x-0'}`}
                      style={{
                        boxShadow: '0 1px 2px rgba(0,0,0,0.3)',
                        top: '1px',
                      }}
                    ></div>
                  </div>
                </div>
                
                {/* Show Seconds */}
                <div className="flex items-center justify-between">
                  <label className="text-sm font-bold">Show Seconds:</label>
                  <div 
                    className={`w-10 h-5 ${settings.showSeconds ? 'bg-blue-500' : 'bg-gray-400'} rounded-sm relative cursor-pointer`}
                    style={{
                      boxShadow: 'inset 1px 1px 3px rgba(0,0,0,0.3)'
                    }}
                    onClick={() => updateSetting('showSeconds', !settings.showSeconds)}
                  >
                    <div 
                      className={`absolute w-4 h-4 bg-white border border-gray-400 rounded-sm transition-transform ${settings.showSeconds ? 'translate-x-5' : 'translate-x-0'}`}
                      style={{
                        boxShadow: '0 1px 2px rgba(0,0,0,0.3)',
                        top: '1px',
                      }}
                    ></div>
                  </div>
                </div>
                
                {/* Show Date */}
                <div className="flex items-center justify-between">
                  <label className="text-sm font-bold">Show Date:</label>
                  <div 
                    className={`w-10 h-5 ${settings.displayDate ? 'bg-blue-500' : 'bg-gray-400'} rounded-sm relative cursor-pointer`}
                    style={{
                      boxShadow: 'inset 1px 1px 3px rgba(0,0,0,0.3)'
                    }}
                    onClick={() => updateSetting('displayDate', !settings.displayDate)}
                  >
                    <div 
                      className={`absolute w-4 h-4 bg-white border border-gray-400 rounded-sm transition-transform ${settings.displayDate ? 'translate-x-5' : 'translate-x-0'}`}
                      style={{
                        boxShadow: '0 1px 2px rgba(0,0,0,0.3)',
                        top: '1px',
                      }}
                    ></div>
                  </div>
                </div>
              </div>
              
              {/* Glow Intensity Slider */}
              <div>
                <label className="block text-sm font-bold mb-1">Glow Intensity:</label>
                <div className="flex items-center">
                  <input
                    type="range"
                    min="0.1"
                    max="2.0"
                    step="0.1"
                    value={settings.glowIntensity}
                    onChange={(e) => updateSetting('glowIntensity', parseFloat(e.target.value))}
                    className="w-full h-6"
                    style={{
                      WebkitAppearance: 'none',
                      appearance: 'none',
                      background: 'gray',
                      outline: 'none',
                      opacity: '0.7',
                      transition: 'opacity .2s',
                      cursor: 'pointer',
                    }}
                  />
                  <span className="ml-2 text-sm">{settings.glowIntensity.toFixed(1)}</span>
                </div>
              </div>
              
              {/* OK Button */}
              <div className="flex justify-center mt-3">
                <button 
                  onClick={() => setShowMenu(false)}
                  className="px-4 py-1 bg-gray-300 border-2 border-gray-700 rounded-sm font-bold text-sm hover:bg-gray-400 active:bg-gray-500"
                  style={{
                    boxShadow: 'inset 1px 1px 0px #fff, inset -1px -1px 0px #888'
                  }}
                >
                  OK
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
      
      {/* Font loading - inline to ensure it works */}
      <style dangerouslySetInnerHTML={{ __html: `
        @font-face {
          font-family: 'DSEG7';
          src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff2') format('woff2');
          font-weight: normal;
          font-style: normal;
          font-display: block;
        }
        
        input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 16px;
          height: 16px;
          background: white;
          border: 1px solid #666;
          border-radius: 0;
          box-shadow: 0 1px 2px rgba(0,0,0,0.3);
          cursor: pointer;
        }
        
        input[type=range]::-moz-range-thumb {
          width: 16px;
          height: 16px;
          background: white;
          border: 1px solid #666;
          border-radius: 0;
          box-shadow: 0 1px 2px rgba(0,0,0,0.3);
          cursor: pointer;
        }
      `}} />
    </div>
  );
}