import { useState, useCallback } from 'react';
import { Play, Pause, SkipBack, SkipForward, Clock } from 'lucide-react';

interface TimelineSliderProps {
    onDateChange: (date: Date) => void;
    minDate?: Date;
    maxDate?: Date;
    isPlaying?: boolean;
    onPlayPause?: () => void;
}

export function TimelineSlider({
    onDateChange,
    minDate = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), // 30 days ago
    maxDate = new Date(),
    isPlaying = false,
    onPlayPause,
}: TimelineSliderProps) {
    const [value, setValue] = useState(100); // 0-100 representing the range

    const handleSliderChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        const newValue = parseInt(e.target.value, 10);
        setValue(newValue);

        // Calculate date from slider position
        const range = maxDate.getTime() - minDate.getTime();
        const timestamp = minDate.getTime() + (range * newValue / 100);
        onDateChange(new Date(timestamp));
    }, [minDate, maxDate, onDateChange]);

    const jumpToStart = useCallback(() => {
        setValue(0);
        onDateChange(minDate);
    }, [minDate, onDateChange]);

    const jumpToEnd = useCallback(() => {
        setValue(100);
        onDateChange(maxDate);
    }, [maxDate, onDateChange]);

    // Calculate current date for display
    const range = maxDate.getTime() - minDate.getTime();
    const currentDate = new Date(minDate.getTime() + (range * value / 100));
    const isLive = value === 100;

    return (
        <div className="bg-black/70 backdrop-blur-md rounded-xl border border-slate-700 p-4 shadow-2xl">
            <div className="flex items-center gap-4">
                {/* Time Icon */}
                <div className="flex items-center gap-2 text-cyan-400">
                    <Clock size={18} />
                    <span className="text-xs font-semibold uppercase tracking-wider">Time Machine</span>
                </div>

                {/* Controls */}
                <div className="flex items-center gap-1">
                    <button
                        onClick={jumpToStart}
                        className="p-1.5 rounded-lg hover:bg-slate-700 transition-colors text-[var(--color-text-tertiary)] hover:text-white"
                        title="Go to start"
                    >
                        <SkipBack size={16} />
                    </button>

                    <button
                        onClick={onPlayPause}
                        className={`p-2 rounded-lg transition-colors ${isPlaying ? 'bg-cyan-600 text-white' : 'hover:bg-slate-700 text-[var(--color-text-tertiary)] hover:text-white'}`}
                        title={isPlaying ? 'Pause' : 'Play'}
                    >
                        {isPlaying ? <Pause size={18} /> : <Play size={18} />}
                    </button>

                    <button
                        onClick={jumpToEnd}
                        className="p-1.5 rounded-lg hover:bg-slate-700 transition-colors text-[var(--color-text-tertiary)] hover:text-white"
                        title="Go to now"
                    >
                        <SkipForward size={16} />
                    </button>
                </div>

                {/* Slider */}
                <div className="flex-1 relative">
                    <input
                        type="range"
                        min="0"
                        max="100"
                        value={value}
                        onChange={handleSliderChange}
                        className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-cyan-500"
                        style={{
                            background: `linear-gradient(to right, #06b6d4 0%, #06b6d4 ${value}%, #334155 ${value}%, #334155 100%)`
                        }}
                    />

                    {/* Date markers */}
                    <div className="absolute -bottom-5 left-0 right-0 flex justify-between text-[10px] text-[var(--color-text-tertiary)]">
                        <span>{minDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
                        <span>{maxDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
                    </div>
                </div>

                {/* Current Date Display */}
                <div className={`min-w-[140px] text-right ${isLive ? 'text-green-400' : 'text-cyan-300'}`}>
                    <div className="text-sm font-mono">
                        {currentDate.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}
                    </div>
                    <div className="text-xs text-[var(--color-text-tertiary)]">
                        {isLive ? (
                            <span className="flex items-center justify-end gap-1">
                                <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
                                LIVE
                            </span>
                        ) : (
                            currentDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}
