import { Button } from '@/components/ui/button';
import { Map, Grid } from 'lucide-react';
import { useLaravelReactI18n } from 'laravel-react-i18n';
import { cn } from '@/lib/utils';
import { createPortal } from 'react-dom';
import { useEffect, useState } from 'react';

interface ExploreMobileTabsProps {
    isMapView: boolean;
    onToggle: (isMap: boolean) => void;
}

export default function ExploreMobileTabs({ isMapView, onToggle }: ExploreMobileTabsProps) {
    const { t } = useLaravelReactI18n();
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
        return () => setMounted(false);
    }, []);

    const content = (
        <div className="lg:hidden fixed bottom-8 left-1/2 transform -translate-x-1/2 z-[9999] touch-manipulation pointer-events-auto">
            <div className="bg-white dark:bg-card backdrop-blur-md shadow-[0_8px_32px_rgba(0,0,0,0.2)] rounded-full p-2 flex gap-2 border border-gray-200 dark:border-gray-700">
                <Button
                    variant={isMapView ? "default" : "ghost"}
                    size="lg"
                    onClick={() => onToggle(true)}
                    className={cn(
                        "rounded-full px-6 py-5 transition-all duration-200 ease-out font-semibold text-base min-w-[120px]",
                        isMapView
                            ? "bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-700 shadow-lg"
                            : "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300"
                    )}
                >
                    <Map className="h-5 w-5 mr-2" />
                    <span>{t('Map')}</span>
                </Button>
                <Button
                    variant={!isMapView ? "default" : "ghost"}
                    size="lg"
                    onClick={() => onToggle(false)}
                    className={cn(
                        "rounded-full px-6 py-5 transition-all duration-200 ease-out font-semibold text-base min-w-[120px]",
                        !isMapView
                            ? "bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-700 shadow-lg"
                            : "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300"
                    )}
                >
                    <Grid className="h-5 w-5 mr-2" />
                    <span>{t('List')}</span>
                </Button>
            </div>
        </div>
    );

    // Use portal to render at document.body level, bypassing parent containers
    return mounted ? createPortal(content, document.body) : null;
}