import React, { useRef, useCallback } from 'react';
import { motion } from 'framer-motion';
import { ChevronLeft, ChevronRight, Cloudy, UserRound, PersonStanding, Shirt, Smile, RefreshCcw } from 'lucide-react';

/** 快捷操作标签的数据结构 */
export interface QuickAction {
    id: string;
    label: string;
    icon: any;
}

/** 预设的快捷操作标签 */
export const DEFAULT_QUICK_ACTIONS: QuickAction[] = [
    { id: 'weather', label: 'change weather', icon: Cloudy },
    { id: 'character', label: 'change character', icon: UserRound },
    { id: 'costume', label: 'change clothing', icon: Shirt },
    { id: 'action', label: 'change action', icon: PersonStanding },
    { id: 'emotion', label: 'change emotion', icon: Smile },
    { id: 'retry', label: 'retry failed video', icon: RefreshCcw } 
];

interface QuickActionTagsProps {
    /** 自定义标签列表，如果不提供则使用默认标签 */
    actions?: QuickAction[];
    /** 点击标签时的回调函数 */
    onTagClick: (action: QuickAction) => void;
}

/**
 * 快捷操作标签组组件
 * @param props 组件属性
 * @returns JSX.Element
 */
export function QuickActionTags({ actions = DEFAULT_QUICK_ACTIONS, onTagClick }: QuickActionTagsProps) {
    const scrollContainerRef = useRef<HTMLDivElement>(null);

    const scroll = useCallback((direction: 'left' | 'right') => {
        const container = scrollContainerRef.current;
        if (!container) return;

        const scrollAmount = 200; // 每次滚动的距离
        const targetScroll = container.scrollLeft + (direction === 'left' ? -scrollAmount : scrollAmount);
        
        container.scrollTo({
            left: targetScroll,
            behavior: 'smooth'
        });
    }, []);

    return (
        <div 
            data-alt="quick-action-tags"
            className="relative flex items-center px-3 py-2 group bg-gradient-to-r from-black/20 to-transparent"
        >
            {/* 左侧渐变遮罩 */}
            {/* <div className="absolute left-0 top-0 bottom-0 w-12 bg-gradient-to-r from-black/20 to-transparent pointer-events-none z-10" /> */}
            
            {/* 左滚动按钮 */}
            <motion.button
                onClick={() => scroll('left')}
                className="absolute left-1 z-20 p-1 rounded-full bg-black/30 text-white/80 
                         backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity
                         hover:bg-black/40"
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
                data-alt="scroll-left"
            >
                <ChevronLeft size={16} />
            </motion.button>

            {/* 标签滚动容器 */}
            <div 
                ref={scrollContainerRef}
                className="flex overflow-x-auto gap-2 no-scrollbar scroll-smooth"
                style={{
                    msOverflowStyle: 'none',  /* IE and Edge */
                    scrollbarWidth: 'none',   /* Firefox */
                }}
            >
                {actions.map((action) => (
                    <motion.button
                        key={action.id}
                        onClick={() => onTagClick(action)}
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                        className="flex items-center flex-shrink-0 gap-1 px-[8px] py-[3px] rounded-full text-[10px] text-white/80 
                                 backdrop-blur-md bg-white/10 border border-white/20
                                 hover:bg-white/20 hover:text-white
                                 transition-colors duration-200
                                 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-1px_rgba(0,0,0,0.06)]"
                        data-alt={`quick-action-${action.id}`}
                    >
                        {action.icon && <action.icon className="w-3 h-3" />}
                        {action.label}
                    </motion.button>
                ))}
            </div>

            {/* 右侧渐变遮罩 */}
            {/* <div className="absolute right-0 top-0 bottom-0 w-12 bg-gradient-to-l from-black/20 to-transparent pointer-events-none z-10" /> */}
            
            {/* 右滚动按钮 */}
            <motion.button
                onClick={() => scroll('right')}
                className="absolute right-1 z-20 p-1 rounded-full bg-black/30 text-white/80 
                         backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity
                         hover:bg-black/40"
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
                data-alt="scroll-right"
            >
                <ChevronRight size={16} />
            </motion.button>
        </div>
    );
}

// 添加全局样式来隐藏滚动条
const style = document.createElement('style');
style.textContent = `
    /* Hide scrollbar for Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
`;
document.head.appendChild(style);
