import React, { useState, useEffect, useRef } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';

export default function OrderTabs({ counts, currentStatus, changeTab }) {
    const { t } = useTranslation();
    const scrollRef = useRef(null);
    const [showLeftArrow, setShowLeftArrow] = useState(false);
    const [showRightArrow, setShowRightArrow] = useState(false);

    const checkScroll = () => {
        if (scrollRef.current) {
            const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
            setShowLeftArrow(scrollLeft > 0);
            setShowRightArrow(scrollLeft < scrollWidth - clientWidth - 5);
        }
    };

    useEffect(() => {
        checkScroll();
        window.addEventListener('resize', checkScroll);
        return () => window.removeEventListener('resize', checkScroll);
    }, [counts]);

    const scroll = (direction) => {
        if (scrollRef.current) {
            const offset = direction === 'left' ? -200 : 200;
            scrollRef.current.scrollBy({ left: offset, behavior: 'smooth' });
        }
    };

    const tabs = [
        { id: 'all', label: t('All Orders'), count: counts.all },
        { id: 'pending', label: t('Awaiting Payment'), count: counts.pending },
        { id: 'processing', label: t('To Ship'), count: counts.processing },
        { id: 'shipped', label: t('Shipped'), count: counts.shipped },
        { id: 'completed', label: t('Completed'), count: counts.completed },
        { id: 'refund_requests', label: t('Refund Requests'), count: counts.refund_requests || 0 },
        { id: 'cancelled', label: t('Cancelled'), count: counts.cancelled || 0 }, 
    ];

    return (
        <div className="relative group w-full border-b border-border/60 bg-card rounded-t-xl mb-4 overflow-hidden">
            
            {showLeftArrow && (
                <button 
                    onClick={() => scroll('left')}
                    className="absolute left-0 top-0 bottom-0 z-10 w-12 bg-gradient-to-r from-card via-card/90 to-transparent flex items-center justify-start pl-2 text-primary md:hidden"
                >
                    <ChevronLeft className="w-5 h-5 animate-pulse" />
                </button>
            )}

            <div 
                ref={scrollRef}
                onScroll={checkScroll}
                className="flex w-full overflow-x-auto no-scrollbar scroll-smooth px-4"
            >
                {/* CHANGED: Used gap-4 sm:gap-6 instead of space-x-6 for better mobile spacing */}
                <div className="flex w-max gap-4 sm:gap-6">
                    {tabs.map(tab => (
                        <button 
                            key={tab.id}
                            onClick={() => changeTab(tab.id)}
                            // CHANGED: Added shrink-0 to prevent text from squishing on mobile
                            className={`shrink-0 py-4 px-1 text-sm font-bold border-b-2 transition-all whitespace-nowrap flex items-center gap-2 ${
                                currentStatus === tab.id ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'
                            }`}
                        >
                            {tab.label} 
                            <span className={`px-2 py-0.5 rounded-full text-[10px] ${currentStatus === tab.id ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}>
                                {tab.count}
                            </span>
                        </button>
                    ))}
                </div>
            </div>

            {showRightArrow && (
                <button 
                    onClick={() => scroll('right')}
                    className="absolute right-0 top-0 bottom-0 z-10 w-12 bg-gradient-to-l from-card via-card/90 to-transparent flex items-center justify-end pr-2 text-primary md:hidden"
                >
                    <ChevronRight className="w-5 h-5 animate-pulse" />
                </button>
            )}
        </div>
    );
}