import { FC, useState } from 'react'
import { useEmailBuilderStore } from './store/builderStore'
import BlockLibrary from './components/panels/BlockLibrary'
import Canvas from './components/canvas/Canvas'
import Button from '@/components/Button'
import Input from '@/components/Input'
import {
    Eye,
    EyeSlash,
    DocumentDownload,
    Save2,
    Refresh,
    Setting4
} from 'iconsax-react'

const EmailBuilder: FC = () => {
    const {
        template,
        isPreviewMode,
        togglePreview,
        updateTemplateName,
        resetTemplate
    } = useEmailBuilderStore()

    const [showSettings, setShowSettings] = useState(false)

    const handleSave = () => {
        // TODO: Integrate with existing template save API
        // const exportedTemplate = exportTemplate()
        // Here you would call your existing template save API
    }

    const handleExportHTML = () => {
        import('./utils/htmlExporter').then(({ exportToHTML, downloadFile }) => {
            const html = exportToHTML(template)
            downloadFile(html, `${template.name}.html`, 'text/html')
        })
    }

    const handleReset = () => {
        if (confirm('آیا مطمئن هستید که می‌خواهید قالب را ریست کنید؟')) {
            resetTemplate()
        }
    }

    return (
        <div className="h-screen bg-gray-100 flex flex-col">
            {/* Top Toolbar */}
            <div className="bg-white border-b border-gray-200 px-6 py-4">
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-4">
                        <div className="flex items-center gap-2">
                            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                                <span className="text-white font-bold text-sm">📧</span>
                            </div>
                            <div>
                                <h1 className="text-lg font-semibold text-gray-900">
                                    سازنده قالب ایمیل
                                </h1>
                                <p className="text-xs text-gray-500">
                                    Email Template Builder v2.0
                                </p>
                            </div>
                        </div>

                        <div className="flex items-center gap-2">
                            <Input
                                value={template.name}
                                onChange={(e) => updateTemplateName(e.target.value)}
                                placeholder="نام قالب"
                                className="w-48"
                            />
                        </div>
                    </div>

                    <div className="flex items-center gap-2">
                        <Button
                            variant="secondary"
                            onClick={togglePreview}
                            className="w-fit"
                        >
                            {isPreviewMode ? (
                                <>
                                    <EyeSlash size={16} />
                                    <span>ویرایش</span>
                                </>
                            ) : (
                                <>
                                    <Eye size={16} />
                                    <span>پیش‌نمایش</span>
                                </>
                            )}
                        </Button>

                        <Button
                            variant="secondary"
                            onClick={() => setShowSettings(!showSettings)}
                            className="w-fit"
                        >
                            <Setting4 size={16} />
                            <span>تنظیمات</span>
                        </Button>

                        <Button
                            variant="secondary"
                            onClick={handleExportHTML}
                            className="w-fit"
                        >
                            <DocumentDownload size={16} />
                            <span>خروجی HTML</span>
                        </Button>

                        <Button
                            onClick={handleSave}
                            className="w-fit"
                        >
                            <Save2 size={16} />
                            <span>ذخیره</span>
                        </Button>

                        <Button
                            variant="secondary"
                            onClick={handleReset}
                            className="w-fit border-red-200 text-red-600 hover:bg-red-50"
                        >
                            <Refresh size={16} />
                            <span>ریست</span>
                        </Button>
                    </div>
                </div>
            </div>

            {/* Main Content */}
            <div className="flex-1 flex gap-6 p-6 overflow-hidden">
                {/* Left Sidebar - Block Library */}
                <div className="w-80 flex-shrink-0">
                    <BlockLibrary />
                </div>

                {/* Main Canvas */}
                <div className="flex-1 min-w-0">
                    <Canvas />
                </div>

                {/* Right Sidebar - Settings (conditional) */}
                {showSettings && (
                    <div className="w-80 flex-shrink-0">
                        <div className="bg-white rounded-4xl p-6 h-full">
                            <h3 className="text-lg font-semibold text-gray-900 mb-4">
                                تنظیمات قالب
                            </h3>

                            <div className="space-y-4">
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-2">
                                        عرض قالب (پیکسل)
                                    </label>
                                    <Input
                                        type="number"
                                        value={template.settings.width.toString()}
                                        onChange={(e) => {
                                            const width = parseInt(e.target.value) || 600
                                            useEmailBuilderStore.getState().updateTemplateSettings({ width })
                                        }}
                                        min="300"
                                        max="800"
                                    />
                                </div>

                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-2">
                                        رنگ پس‌زمینه
                                    </label>
                                    <Input
                                        type="color"
                                        value={template.settings.backgroundColor}
                                        onChange={(e) => {
                                            useEmailBuilderStore.getState().updateTemplateSettings({
                                                backgroundColor: e.target.value
                                            })
                                        }}
                                    />
                                </div>

                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-2">
                                        فونت
                                    </label>
                                    <select
                                        value={template.settings.fontFamily}
                                        onChange={(e) => {
                                            useEmailBuilderStore.getState().updateTemplateSettings({
                                                fontFamily: e.target.value
                                            })
                                        }}
                                        className="w-full p-2 border border-gray-300 rounded-lg"
                                    >
                                        <option value="Vazir, Arial, sans-serif">وزیر</option>
                                        <option value="Tahoma, Arial, sans-serif">تاهوما</option>
                                        <option value="Arial, sans-serif">Arial</option>
                                        <option value="Georgia, serif">Georgia</option>
                                    </select>
                                </div>

                                <div className="flex items-center gap-2">
                                    <input
                                        type="checkbox"
                                        id="rtl"
                                        checked={template.settings.rtl}
                                        onChange={(e) => {
                                            useEmailBuilderStore.getState().updateTemplateSettings({
                                                rtl: e.target.checked
                                            })
                                        }}
                                        className="rounded"
                                    />
                                    <label htmlFor="rtl" className="text-sm font-medium text-gray-700">
                                        راست‌چین (RTL)
                                    </label>
                                </div>
                            </div>

                            <div className="mt-8 p-4 bg-gray-50 rounded-xl">
                                <h4 className="font-medium text-gray-700 mb-2">📊 آمار قالب</h4>
                                <div className="text-sm text-gray-600 space-y-1">
                                    <div>تعداد بلوک‌ها: {template.blocks.length}</div>
                                    <div>متغیرها: {template.variables.length}</div>
                                    <div>عرض: {template.settings.width}px</div>
                                    <div>جهت: {template.settings.rtl ? 'راست‌چین' : 'چپ‌چین'}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </div>

            {/* Status Bar */}
            <div className="bg-white border-t border-gray-200 px-6 py-2">
                <div className="flex items-center justify-between text-xs text-gray-500">
                    <div className="flex items-center gap-4">
                        <span>
                            📦 {template.blocks.length} بلوک
                        </span>
                        {template.variables.length > 0 && (
                            <span>
                                🔧 {template.variables.length} متغیر
                            </span>
                        )}
                        <span>
                            📏 {template.settings.width}px
                        </span>
                    </div>

                    <div>
                        {isPreviewMode ? '👁️ حالت پیش‌نمایش' : '✏️ حالت ویرایش'}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default EmailBuilder 