import React, { useState, useMemo } from 'react';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Search, LayoutGrid } from "lucide-react";
import { searchLucideIcons, ICON_CATEGORIES } from '@/config/lucideIcons';
import DynamicIcon from '@/components/DynamicIcon';

interface LucideIconSelectProps {
    /** 当前选中的图标名称 */
    value?: string;
    /** 图标变化回调 */
    onChange?: (iconName: string) => void;
    /** 是否显示弹窗 */
    open: boolean;
    /** 关闭弹窗回调 */
    onOpenChange: (open: boolean) => void;
}

/**
 * Lucide 图标选择器组件
 * 
 * 支持：
 * - 搜索图标
 * - 分类浏览
 * - 点击选择
 */
const LucideIconSelect: React.FC<LucideIconSelectProps> = ({
    value,
    onChange,
    open,
    onOpenChange
}) => {
    const [search, setSearch] = useState('');
    const [category, setCategory] = useState('all');

    // 过滤图标列表
    const iconList = useMemo(() => {
        return searchLucideIcons(search, category);
    }, [search, category]);

    // 选择图标
    const handleSelect = (iconName: string) => {
        onChange?.(iconName);
        onOpenChange(false);
        setSearch('');
        setCategory('all');
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-4xl h-[750px] max-h-[90vh] flex flex-col">
                <DialogHeader className="flex-shrink-0">
                    <DialogTitle>选择图标</DialogTitle>
                </DialogHeader>

                <div className="space-y-4 flex-1 flex flex-col overflow-hidden px-6 pb-6">
                    {/* 搜索框和当前选中 */}
                    <div className="flex items-center gap-3 flex-shrink-0">
                        <div className="relative flex-1">
                            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                            <Input
                                placeholder="搜索图标名称..."
                                value={search}
                                onChange={(e) => setSearch(e.target.value)}
                                className="pl-10"
                            />
                        </div>
                        {/* 当前选中 */}
                        {value && (
                            <div className="flex items-center gap-2 px-3 py-2 border rounded-md bg-muted/50">
                                <span className="text-sm text-muted-foreground whitespace-nowrap">当前选中:</span>
                                <div className="flex items-center gap-2">
                                    <DynamicIcon name={value} className="h-4 w-4" />
                                    <code className="text-xs">{value}</code>
                                </div>
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-7 w-7 p-0"
                                    onClick={() => {
                                        onChange?.('');
                                    }}
                                >
                                    ×
                                </Button>
                            </div>
                        )}
                    </div>

                    {/* 分类标签 */}
                    <Tabs value={category} onValueChange={setCategory} className="flex-1 flex flex-col overflow-hidden">
                        <TabsList className="w-full flex-wrap h-auto justify-start gap-1 p-1 bg-muted flex-shrink-0">
                            <TabsTrigger 
                                value="all" 
                                className="flex items-center gap-1.5 text-xs data-[state=active]:bg-background"
                            >
                                <LayoutGrid className="h-3.5 w-3.5" />
                                <span>全部</span>
                                <span className="text-muted-foreground">({iconList.length})</span>
                            </TabsTrigger>
                            {Object.entries(ICON_CATEGORIES).map(([key, cat]) => (
                                <TabsTrigger 
                                    key={key} 
                                    value={key} 
                                    className="flex items-center gap-1.5 text-xs data-[state=active]:bg-background"
                                    title={cat.name}
                                >
                                    <DynamicIcon name={cat.icon} className="h-3.5 w-3.5" />
                                    <span className="hidden sm:inline">{cat.name}</span>
                                </TabsTrigger>
                            ))}
                        </TabsList>

                        <TabsContent value={category} className="mt-4 flex-1 overflow-hidden">
                            {/* 图标网格 - 固定高度 */}
                            <div className="h-full overflow-y-auto p-2 border rounded-md bg-background">
                                <div className="grid grid-cols-8 gap-2">
                                    {iconList.length > 0 ? (
                                        iconList.map(({ name, component: Icon }) => (
                                            <Button
                                                key={name}
                                                variant={value === name ? "default" : "outline"}
                                                className="h-20 flex flex-col items-center justify-center gap-2 p-2"
                                                onClick={() => handleSelect(name)}
                                                title={name}
                                            >
                                                <Icon className="h-6 w-6" />
                                                <span className="text-[10px] truncate w-full text-center">
                                                    {name}
                                                </span>
                                            </Button>
                                        ))
                                    ) : (
                                        <div className="col-span-8 text-center py-16 text-muted-foreground">
                                            <div className="flex flex-col items-center gap-3">
                                                <Search className="h-12 w-12 opacity-20" />
                                                <p className="text-sm">未找到匹配的图标</p>
                                                <p className="text-xs text-muted-foreground/70">
                                                    尝试其他关键词或浏览分类
                                                </p>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </TabsContent>
                    </Tabs>
                </div>
            </DialogContent>
        </Dialog>
    );
};

export default LucideIconSelect;

