import { FC, ReactElement } from 'react'
import { BlockType } from '../../types/blocks'
import { useEmailBuilderStore } from '../../store/builderStore'
import { Text, LinkSquare, Gallery, Box1, ArrangeVertical } from 'iconsax-react'

interface BlockLibraryProps {
    className?: string
}

interface BlockDefinition {
    type: BlockType
    name: string
    icon: ReactElement
    description: string
    color: string
}

const blockDefinitions: BlockDefinition[] = [
    {
        type: BlockType.TEXT,
        name: 'متن',
        icon: <Text size={24} />,
        description: 'اضافه کردن متن و محتوای نوشتاری',
        color: '#3b82f6'
    },
    {
        type: BlockType.BUTTON,
        name: 'دکمه',
        icon: <LinkSquare size={24} />,
        description: 'دکمه قابل کلیک با لینک',
        color: '#10b981'
    },
    {
        type: BlockType.IMAGE,
        name: 'تصویر',
        icon: <Gallery size={24} />,
        description: 'افزودن تصویر یا عکس',
        color: '#f59e0b'
    },
    {
        type: BlockType.SPACER,
        name: 'فاصله',
        icon: <ArrangeVertical size={24} />,
        description: 'اضافه کردن فاصله عمودی',
        color: '#6b7280'
    },
    {
        type: BlockType.CONTAINER,
        name: 'کانتینر',
        icon: <Box1 size={24} />,
        description: 'گروه‌بندی سایر المان‌ها',
        color: '#8b5cf6'
    }
]

const BlockLibrary: FC<BlockLibraryProps> = ({ className = '' }) => {
    const { addBlock } = useEmailBuilderStore()

    const handleAddBlock = (type: BlockType) => {
        addBlock(type)
    }

    return (
        <div className={`bg-white rounded-4xl p-6 ${className}`}>
            <div className="mb-6">
                <h3 className="text-lg font-semibold text-gray-900">بلوک‌ها</h3>
                <p className="text-sm text-gray-600 mt-1">
                    المان‌های مورد نیاز را به قالب اضافه کنید
                </p>
            </div>

            <div className="space-y-3">
                {blockDefinitions.map((blockDef) => (
                    <div
                        key={blockDef.type}
                        className="block-library-item group cursor-pointer p-3 border-2 border-gray-200 rounded-xl hover:border-blue-300 hover:bg-blue-50 transition-all duration-200"
                        onClick={() => handleAddBlock(blockDef.type)}
                        style={{
                            borderColor: '#e5e7eb'
                        }}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.borderColor = blockDef.color
                            e.currentTarget.style.backgroundColor = `${blockDef.color}08`
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.borderColor = '#e5e7eb'
                            e.currentTarget.style.backgroundColor = 'transparent'
                        }}
                    >
                        <div className="flex items-start gap-3">
                            <div
                                className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center text-white"
                                style={{ backgroundColor: blockDef.color }}
                            >
                                {blockDef.icon}
                            </div>

                            <div className="flex-1 min-w-0">
                                <h4 className="font-medium text-gray-900 group-hover:text-gray-700">
                                    {blockDef.name}
                                </h4>
                                <p className="text-xs text-gray-500 mt-1 group-hover:text-gray-600">
                                    {blockDef.description}
                                </p>
                            </div>

                            <div className="flex-shrink-0 text-gray-400 group-hover:text-gray-600">
                                <svg
                                    className="w-4 h-4"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M12 4v16m8-8H4"
                                    />
                                </svg>
                            </div>
                        </div>
                    </div>
                ))}
            </div>

            <div className="mt-8 p-4 bg-gray-50 rounded-xl">
                <h4 className="font-medium text-gray-700 mb-2">💡 راهنما</h4>
                <ul className="text-xs text-gray-600 space-y-1">
                    <li>• روی هر بلوک کلیک کنید تا اضافه شود</li>
                    <li>• برای ویرایش، روی بلوک در کانوس کلیک کنید</li>
                    <li>• برای حذف، بلوک را انتخاب کرده و Delete بزنید</li>
                </ul>
            </div>
        </div>
    )
}

export default BlockLibrary 