import { FC, useState } from 'react'
import { ButtonBlock as ButtonBlockType } from '../../types/blocks'
import Input from '@/components/Input'

interface ButtonBlockProps {
    block: ButtonBlockType
    isSelected?: boolean
    onUpdate: (updates: Partial<ButtonBlockType>) => void
    onSelect: () => void
    isEditing?: boolean
}

const ButtonBlock: FC<ButtonBlockProps> = ({
    block,
    isSelected,
    onUpdate,
    onSelect,
    isEditing = false
}) => {
    const [localText, setLocalText] = useState(block.data.text)
    const [localUrl, setLocalUrl] = useState(block.data.url)

    const handleTextChange = (text: string) => {
        setLocalText(text)
        onUpdate({
            data: {
                ...block.data,
                text
            }
        })
    }

    const handleUrlChange = (url: string) => {
        setLocalUrl(url)
        onUpdate({
            data: {
                ...block.data,
                url
            }
        })
    }

    const blockStyle = {
        display: 'inline-block',
        backgroundColor: block.style.backgroundColor,
        color: block.style.textColor,
        fontSize: `${block.style.fontSize}px`,
        fontWeight: block.style.fontWeight,
        textAlign: block.style.textAlign as 'left' | 'center' | 'right',
        textDecoration: 'none',
        borderRadius: block.style.borderRadius ? `${block.style.borderRadius}px` : '6px',
        padding: block.style.padding ?
            `${block.style.padding.top}px ${block.style.padding.right}px ${block.style.padding.bottom}px ${block.style.padding.left}px` :
            '12px 24px',
        margin: block.style.margin ?
            `${block.style.margin.top}px ${block.style.margin.right}px ${block.style.margin.bottom}px ${block.style.margin.left}px` :
            '8px 0',
        border: 'none',
        cursor: 'pointer',
        width: typeof block.style.width === 'number' ? `${block.style.width}px` : block.style.width,
        minWidth: '80px',
        position: 'relative' as const
    }

    const containerStyle = {
        border: isSelected ? '2px dashed #0038FF' : '2px dashed transparent',
        borderRadius: '8px',
        padding: '4px',
        textAlign: block.style.textAlign as 'left' | 'center' | 'right',
        position: 'relative' as const
    }

    // Process variables in text for preview
    const processVariables = (content: string) => {
        return content.replace(/\{\{(\w+)\}\}/g, (match, key) => {
            const sampleData: Record<string, string> = {
                name: 'احمد محمدی',
                url: 'https://example.com',
                company: 'شرکت نمونه'
            }
            return sampleData[key] || match
        })
    }

    return (
        <div
            style={containerStyle}
            onClick={onSelect}
            className="button-block-wrapper"
        >
            {isEditing ? (
                <div className="space-y-2 p-2 bg-gray-50 rounded">
                    <Input
                        label="متن دکمه"
                        value={localText}
                        onChange={(e) => handleTextChange(e.target.value)}
                        placeholder="متن دکمه را وارد کنید"
                    />
                    <Input
                        label="آدرس لینک"
                        value={localUrl}
                        onChange={(e) => handleUrlChange(e.target.value)}
                        placeholder="https://example.com"
                    />
                </div>
            ) : (
                <button
                    style={blockStyle}
                    onClick={(e) => {
                        e.stopPropagation()
                        if (!isSelected) {
                            onSelect()
                        }
                    }}
                >
                    {processVariables(localText)}
                </button>
            )}

            {/* Block type indicator */}
            {isSelected && (
                <div
                    style={{
                        position: 'absolute',
                        top: '-8px',
                        right: '8px',
                        backgroundColor: '#0038FF',
                        color: 'white',
                        padding: '2px 6px',
                        fontSize: '10px',
                        borderRadius: '4px',
                        fontWeight: 'bold',
                        zIndex: 10
                    }}
                >
                    دکمه
                </div>
            )}
        </div>
    )
}

export default ButtonBlock 