'use client';

import { Button } from '@/components/ui/button';
import { Cigarette, Leaf, X } from 'lucide-react';
import { useEffect } from 'react';

interface UsageLoggerDropUpProps {
    isOpen: boolean;
    onSelect: (substance: 'nicotine' | 'weed') => void;
    onClose: () => void;
}

export function UsageLoggerDropUp({ isOpen, onSelect, onClose }: UsageLoggerDropUpProps) {

    // Close on Escape key
    useEffect(() => {
        if (!isOpen) return;
        const handleKeyDown = (e: KeyboardEvent) => {
            if (e.key === 'Escape') onClose();
        };
        window.addEventListener('keydown', handleKeyDown);
        return () => window.removeEventListener('keydown', handleKeyDown);
    }, [isOpen, onClose]);

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-40">
            {/* Backdrop */}
            <div
                className="absolute inset-0 bg-black/20 backdrop-blur-[2px] transition-opacity animate-in fade-in duration-300"
                onClick={onClose}
            />

            {/* Container for Buttons */}
            <div className="absolute bottom-24 right-6 flex flex-col items-end gap-3 z-50">
                {/* Nicotine Button */}
                <div className="animate-in slide-in-from-bottom-4 fade-in duration-300 fill-mode-both" style={{ animationDelay: '50ms' }}>
                    <Button
                        size="lg"
                        onClick={() => onSelect('nicotine')}
                        className="h-14 px-6 rounded-full shadow-xl bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 text-white border-none font-bold uppercase tracking-widest flex items-center gap-3 transition-all hover:scale-105 active:scale-95"
                    >
                        <Cigarette className="h-5 w-5" />
                        <span>Nicotine</span>
                    </Button>
                </div>

                {/* Marijuana Button */}
                <div className="animate-in slide-in-from-bottom-4 fade-in duration-300 fill-mode-both" style={{ animationDelay: '150ms' }}>
                    <Button
                        size="lg"
                        onClick={() => onSelect('weed')}
                        className="h-14 px-6 rounded-full shadow-xl bg-gradient-to-r from-green-600 to-green-500 hover:from-green-500 hover:to-green-400 text-white border-none font-bold uppercase tracking-widest flex items-center gap-3 transition-all hover:scale-105 active:scale-95"
                    >
                        <Leaf className="h-5 w-5" />
                        <span>Marijuana</span>
                    </Button>
                </div>
            </div>
        </div>
    );
}
