'use client';

import React from 'react';
import { Home, Grid, Scan, User, Search } from 'lucide-react';
import { usePathname } from 'next/navigation';

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

export const BottomNavigation = ({ onHome, onShelf, onSearch, onProfile, onScan }: BottomNavigationProps) => {
    const fileInputRef = React.useRef<HTMLInputElement>(null);

    const handleScanClick = () => {
        fileInputRef.current?.click();
    };

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

    return (
        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-sm z-50 pointer-events-none">
            {/* Hidden Input for Scanning */}
            <input
                type="file"
                ref={fileInputRef}
                onChange={handleFileChange}
                accept="image/*"
                className="hidden"
            />

            <div className="flex items-center justify-between px-2 py-2 bg-zinc-900/90 backdrop-blur-lg border border-zinc-800 rounded-full shadow-2xl pointer-events-auto">
                {/* Left Items */}
                <button
                    onClick={onHome}
                    className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
                    aria-label="Home"
                >
                    <Home size={22} strokeWidth={2.5} />
                </button>

                <button
                    onClick={onShelf}
                    className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
                    aria-label="Shelf"
                >
                    <Grid size={22} strokeWidth={2.5} />
                </button>

                {/* PRIMARY ACTION - The "Industrial Button" */}
                <button
                    onClick={handleScanClick}
                    className="flex items-center justify-center w-14 h-14 rounded-full bg-orange-600 text-white hover:bg-orange-500 active:scale-95 transition-all mx-2 shadow-lg shadow-orange-950/40"
                    aria-label="Scan Bottle"
                >
                    <Scan size={26} strokeWidth={2.5} />
                </button>

                {/* Right Items */}
                <button
                    onClick={onSearch}
                    className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
                    aria-label="Search"
                >
                    <Search size={22} strokeWidth={2.5} />
                </button>

                <button
                    onClick={onProfile}
                    className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
                    aria-label="Profile"
                >
                    <User size={22} strokeWidth={2.5} />
                </button>
            </div>
        </div>
    );
};