'use client';

import { useState, useEffect } from 'react';
import { Settings, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Slider } from '@/components/ui/slider';

interface SettingsPanelProps {
  cycleInterval: number;
  onIntervalChange: (interval: number) => void;
  tickerSpeed: number;
  onTickerSpeedChange: (speed: number) => void;
}

export function SettingsPanel({ cycleInterval, onIntervalChange, tickerSpeed, onTickerSpeedChange }: SettingsPanelProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [localInterval, setLocalInterval] = useState(cycleInterval);
  const [localTickerSpeed, setLocalTickerSpeed] = useState(tickerSpeed);

  useEffect(() => {
    if (!isOpen) {
      const timer = setTimeout(() => {
        // Auto-hide after 3 seconds of inactivity
      }, 3000);
      return () => clearTimeout(timer);
    }
  }, [isOpen]);

  const handleSave = () => {
    onIntervalChange(localInterval);
    localStorage.setItem('kiosk-cycle-interval', localInterval.toString());
    onTickerSpeedChange(localTickerSpeed);
    localStorage.setItem('kiosk-ticker-speed', localTickerSpeed.toString());
    setIsOpen(false);
  };

  return (
    <>
      <Button
        variant="ghost"
        size="icon"
        className="fixed top-4 right-4 z-50 text-gray-400 hover:text-white"
        onClick={() => setIsOpen(!isOpen)}
      >
        {isOpen ? <X className="w-8 h-8" /> : <Settings className="w-8 h-8" />}
      </Button>

      {isOpen && (
        <div className="fixed top-20 right-4 z-50 bg-gray-900 border-2 border-gray-700 rounded-lg p-6 w-96 shadow-2xl">
          <h3 className="text-2xl font-bold text-white mb-4">Display Settings</h3>
          
          <div className="space-y-4">
            <div>
              <label className="text-gray-300 text-lg mb-2 block">
                Card Cycle Speed: {localInterval} seconds
              </label>
              <Slider
                value={[localInterval]}
                onValueChange={(value: number[]) => setLocalInterval(value[0])}
                min={3}
                max={15}
                step={1}
                className="w-full"
              />
              <div className="flex justify-between text-sm text-gray-500 mt-1">
                <span>3s (Fast)</span>
                <span>15s (Slow)</span>
              </div>
            </div>

            <div>
              <label className="text-gray-300 text-lg mb-2 block">
                Ticker Scroll Speed: {localTickerSpeed} seconds
              </label>
              <Slider
                value={[localTickerSpeed]}
                onValueChange={(value: number[]) => setLocalTickerSpeed(value[0])}
                min={8}
                max={120}
                step={2}
                className="w-full"
              />
              <div className="flex justify-between text-sm text-gray-500 mt-1">
                <span>8s (Very Fast)</span>
                <span>120s (Slow)</span>
              </div>
            </div>

            <Button
              onClick={handleSave}
              className="w-full bg-blue-600 hover:bg-blue-700 text-white text-lg py-6"
            >
              Save Settings
            </Button>
          </div>
        </div>
      )}
    </>
  );
}