'use client';

import React from 'react';
import { Home, Library, Camera, UserRound, GlassWater } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { usePathname } from 'next/navigation';
import { useI18n } from '@/i18n/I18nContext';

interface BottomNavigationProps {
    onHome?: () => void;
    onShelf?: () => void;
    onSearch?: () => void;
    onTastings?: () => void;
    onProfile?: () => void;
    onScan: (file: File) => void;
}

interface NavButtonProps {
    onClick?: () => void;
    icon: React.ReactNode;
    label: string;
    ariaLabel: string;
    active?: boolean;
}

const NavButton = ({ onClick, icon, label, ariaLabel, active }: NavButtonProps) => (
    <button
        onClick={onClick}
        className={`flex flex-col items-center justify-center gap-1 w-full min-w-[44px] min-h-[44px] transition-all active:scale-95 ${active ? 'text-orange-500' : 'text-zinc-400 hover:text-zinc-200'}`}
        aria-label={ariaLabel}
    >
        <div className={`transition-transform duration-300 ${active ? 'scale-110' : ''}`}>
            {icon}
        </div>
        <span className={`text-[9px] font-black tracking-tight uppercase ${active ? 'opacity-100' : 'opacity-60'}`}>{label}</span>
    </button>
);

export function BottomNavigation({ onHome, onShelf, onTastings, onProfile, onScan }: BottomNavigationProps) {
    const { t } = useI18n();
    const pathname = usePathname();
    const cameraInputRef = React.useRef<HTMLInputElement>(null);
    const galleryInputRef = React.useRef<HTMLInputElement>(null);
    const [showSourcePicker, setShowSourcePicker] = React.useState(false);

    const handleCameraClick = () => {
        cameraInputRef.current?.click();
        setShowSourcePicker(false);
    };

    const handleGalleryClick = () => {
        galleryInputRef.current?.click();
        setShowSourcePicker(false);
    };

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) {
            onScan(file);
            // Reset inputs
            e.target.value = '';
        }
    };

    // Determine active tab based on path
    const isHome = pathname === '/';
    const isShelf = pathname?.includes('/shelf');
    const isProfile = pathname?.includes('/settings') || pathname?.includes('/profile');

    return (
        <div className="fixed bottom-0 left-0 right-0 p-6 pb-10 z-50 pointer-events-none">
            {/* Hidden Inputs for Scanning */}
            <input
                type="file"
                ref={cameraInputRef}
                onChange={handleFileChange}
                accept="image/*"
                capture="environment"
                className="hidden"
            />
            <input
                type="file"
                ref={galleryInputRef}
                onChange={handleFileChange}
                accept="image/*"
                className="hidden"
            />

            <AnimatePresence>
                {showSourcePicker && (
                    <>
                        {/* Backdrop to close */}
                        <motion.div
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                            className="fixed inset-0 z-40 pointer-events-auto"
                            onClick={() => setShowSourcePicker(false)}
                        />

                        {/* Source Picker Menu */}
                        <motion.div
                            initial={{ opacity: 0, y: 20, scale: 0.9 }}
                            animate={{ opacity: 1, y: 0, scale: 1 }}
                            exit={{ opacity: 0, y: 10, scale: 0.9 }}
                            className="absolute bottom-24 left-1/2 -translate-x-1/2 z-50 pointer-events-auto w-48 bg-zinc-900/95 backdrop-blur-2xl border border-white/10 rounded-3xl p-2 shadow-2xl"
                        >
                            <button
                                onClick={handleCameraClick}
                                className="w-full flex items-center justify-between p-4 hover:bg-white/5 rounded-2xl transition-colors text-zinc-50"
                            >
                                <div className="flex items-center gap-3 font-bold text-xs uppercase tracking-widest">
                                    <Camera size={18} className="text-orange-500" />
                                    <span>Kamera</span>
                                </div>
                                <div className="w-2 h-2 rounded-full bg-orange-500 shadow-[0_0_8px_rgba(249,115,22,0.6)]" />
                            </button>
                            <div className="h-px bg-white/5 mx-2" />
                            <button
                                onClick={handleGalleryClick}
                                className="w-full flex items-center justify-between p-4 hover:bg-white/5 rounded-2xl transition-colors text-zinc-50"
                            >
                                <div className="flex items-center gap-3 font-bold text-xs uppercase tracking-widest">
                                    <Library size={18} className="text-zinc-400" />
                                    <span>Galerie</span>
                                </div>
                            </button>
                        </motion.div>
                    </>
                )}
            </AnimatePresence>

            <div className="max-w-md mx-auto bg-[#09090b]/90 backdrop-blur-xl border border-white/10 rounded-[40px] p-2 flex items-center shadow-2xl pointer-events-auto">
                {/* Left Items */}
                <div className="flex-1 flex justify-around">
                    <NavButton
                        onClick={onHome}
                        icon={<Home size={18} strokeWidth={2.5} />}
                        label={t('nav.home')}
                        active={isHome}
                        ariaLabel={t('nav.home')}
                    />

                    <NavButton
                        onClick={onShelf}
                        icon={<Library size={18} strokeWidth={2.5} />}
                        label={t('nav.shelf')}
                        active={isShelf}
                        ariaLabel={t('nav.shelf')}
                    />
                </div>

                {/* Center FAB */}
                <div className="px-2">
                    <button
                        onClick={() => setShowSourcePicker(!showSourcePicker)}
                        className={`w-16 h-16 rounded-[30px] flex items-center justify-center text-white shadow-xl border active:scale-90 transition-all group relative ${showSourcePicker ? 'bg-zinc-800 border-white/20' : 'bg-orange-600 border-white/20 shadow-orange-950/40 hover:bg-orange-500 hover:rotate-2'}`}
                        aria-label={t('camera.scanBottle')}
                    >
                        <div className="absolute inset-0 bg-white/20 rounded-[30px] opacity-0 group-hover:opacity-100 transition-opacity" />
                        <Camera size={28} strokeWidth={2.5} className={`transition-transform duration-300 ${showSourcePicker ? 'rotate-90 text-orange-500 scale-90' : ''}`} />
                    </button>
                </div>

                {/* Right Items */}
                <div className="flex-1 flex justify-around">
                    <NavButton
                        onClick={onTastings}
                        icon={<GlassWater size={18} strokeWidth={2.5} />}
                        label={t('nav.activity')}
                        ariaLabel={t('nav.activity')}
                    />

                    <NavButton
                        onClick={onProfile}
                        icon={<UserRound size={18} strokeWidth={2.5} />}
                        label={t('nav.profile')}
                        active={isProfile}
                        ariaLabel={t('nav.profile')}
                    />
                </div>
            </div>
        </div>
    );
}
