// ==========================================
// EditorPanel Component
// ==========================================

const EditorPanel = ({
    isOpen,
    onToggle,
    t,
    // File
    filePreview,
    onManualSpriteUpload,
    onClearFilePreview,
    // Settings
    spriteSettings,
    setSpriteSettings,
    bgColor,
    bgTolerance,
    setBgTolerance,
    removeBg,
    setRemoveBg,
    currentStyle,
    // Export
    isExporting,
    onExportPackage
}) => {
    const { ChevronIcon, SettingsIcon, UploadIcon, DownloadIcon, ImageIcon } = window.Icons;

    return (
        <section id="editor-panel" className="bg-slate-900/40 rounded-3xl border border-slate-800 overflow-hidden shadow-2xl transition-all duration-500">
            <div onClick={onToggle} className="p-6 flex items-center justify-between cursor-pointer hover:bg-slate-800/40 transition-colors">
                <div className="flex items-center gap-4">
                    <div className="w-12 h-12 rounded-2xl bg-emerald-500/10 flex items-center justify-center text-emerald-400">
                        <SettingsIcon />
                    </div>
                    <div>
                        <h2 className="font-bold text-xl">{t('Preview & Export', '预览与导出')}</h2>
                        <p className="text-xs text-slate-500">{t('Calibration view for final asset refinement.', '用于最终资产调整的校准视图。')}</p>
                    </div>
                </div>
                <ChevronIcon open={isOpen} />
            </div>

            {isOpen && (
                <div className="p-8 border-t border-slate-800 space-y-10">

                    <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
                        <div className="lg:col-span-4 space-y-8">
                            <div className="bg-slate-950 rounded-2xl border border-slate-800 p-6 space-y-6 shadow-inner">
                                <div className="grid grid-cols-2 gap-4">
                                    <div className="space-y-2">
                                        <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">{t('Slice Cols', '切分列数')}</label>
                                        <input
                                            type="number"
                                            value={spriteSettings.columns || ''}
                                            onChange={e => setSpriteSettings({ ...spriteSettings, columns: e.target.value === '' ? 0 : parseInt(e.target.value) })}
                                            onBlur={() => setSpriteSettings({ ...spriteSettings, columns: Math.max(1, spriteSettings.columns || 1) })}
                                            className="w-full bg-slate-900 border border-slate-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none transition-all"
                                        />
                                    </div>
                                    <div className="space-y-2">
                                        <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">{t('Slice Rows', '切分行数')}</label>
                                        <input
                                            type="number"
                                            value={spriteSettings.rows || ''}
                                            onChange={e => setSpriteSettings({ ...spriteSettings, rows: e.target.value === '' ? 0 : parseInt(e.target.value) })}
                                            onBlur={() => setSpriteSettings({ ...spriteSettings, rows: Math.max(1, spriteSettings.rows || 1) })}
                                            className="w-full bg-slate-900 border border-slate-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none transition-all"
                                        />
                                    </div>
                                </div>
                                <div className="space-y-2">
                                    <div className="flex justify-between items-center">
                                        <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">FPS</label>
                                        <span className="text-xs font-mono text-indigo-400 font-bold">{spriteSettings.fps}</span>
                                    </div>
                                    <input
                                        type="range"
                                        min="1"
                                        max="60"
                                        value={spriteSettings.fps}
                                        onChange={e => setSpriteSettings({ ...spriteSettings, fps: parseInt(e.target.value) })}
                                        className="w-full accent-indigo-500"
                                    />
                                </div>

                                {/* Tolerance Slider */}
                                <div className="space-y-2">
                                    <div className="flex justify-between items-center">
                                        <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">{t('Tolerance', '去背容差')}</label>
                                        <span className="text-xs font-mono text-indigo-400 font-bold">{bgTolerance}</span>
                                    </div>
                                    <input
                                        type="range"
                                        min="0"
                                        max="150"
                                        value={bgTolerance}
                                        onChange={e => setBgTolerance(parseInt(e.target.value))}
                                        className="w-full accent-indigo-500"
                                    />
                                </div>

                                <label className="flex items-center gap-3 p-3 bg-slate-900 rounded-xl border border-slate-800 cursor-pointer transition-all hover:border-slate-700">
                                    <input
                                        type="checkbox"
                                        checked={removeBg}
                                        onChange={e => setRemoveBg(e.target.checked)}
                                        className="w-4 h-4 accent-indigo-500"
                                    />
                                    <span className="text-xs font-bold text-slate-300">{t('Remove White Background', '自动去除背景 (透明化)')}</span>
                                </label>
                            </div>

                            {/* Animation Preview */}
                            <div className="bg-slate-950 rounded-2xl border border-slate-800 h-[320px] overflow-hidden flex flex-col shadow-inner">
                                <div className="px-4 py-3 bg-slate-900 border-b border-slate-800 flex justify-between items-center">
                                    <span className="text-[10px] font-black uppercase text-slate-500 tracking-widest">{t('Animation Preview', '动态预览')}</span>
                                    <div className="w-2 h-2 rounded-full bg-emerald-500 shadow-xl shadow-emerald-500/50 animate-pulse" />
                                </div>
                                <div className="flex-grow p-4">
                                    {filePreview ? (
                                        <window.SpritePreview
                                            imageUrl={filePreview}
                                            settings={spriteSettings}
                                            removeBg={removeBg}
                                            bgColorHex={bgColor}
                                            tolerance={bgTolerance}
                                            pixelated={currentStyle.pixelated}
                                        />
                                    ) : (
                                        <div className="h-full flex items-center justify-center text-[10px] uppercase font-black text-slate-800">{t('Buffer Empty', '缓冲区为空')}</div>
                                    )}
                                </div>
                            </div>
                        </div>

                        {/* Grid Display - Clickable Upload Area */}
                        <div className="lg:col-span-8 bg-slate-950 rounded-3xl border border-slate-800 min-h-[500px] overflow-hidden flex flex-col shadow-inner relative">
                            <div className="px-6 py-4 bg-slate-900 border-b border-slate-800 flex justify-between items-center">
                                <span className="text-[10px] font-black uppercase text-slate-300 tracking-widest">{t('Full Sheet', '完整图表')}</span>
                                <div className="flex items-center gap-3">
                                    <span className="text-[10px] text-slate-600 font-mono uppercase tracking-widest">MAP {spriteSettings.columns}x{spriteSettings.rows}</span>
                                    {filePreview && (
                                        <button
                                            onClick={onClearFilePreview}
                                            className="w-6 h-6 bg-slate-800 hover:bg-rose-500 text-slate-400 hover:text-white rounded-full flex items-center justify-center text-xs transition-colors"
                                        >
                                            ✕
                                        </button>
                                    )}
                                </div>
                            </div>
                            <div className="flex-grow p-6 overflow-auto relative">
                                {filePreview ? (
                                    <window.GridDisplay
                                        imageUrl={filePreview}
                                        settings={spriteSettings}
                                        pixelated={currentStyle.pixelated}
                                    />
                                ) : (
                                    <div className="h-full flex flex-col items-center justify-center text-center space-y-4 cursor-pointer group relative">
                                        <input
                                            type="file"
                                            accept="image/*"
                                            onChange={onManualSpriteUpload}
                                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
                                        />
                                        <div className="w-16 h-16 rounded-full bg-slate-800 group-hover:bg-slate-700 flex items-center justify-center transition-colors">
                                            <UploadIcon />
                                        </div>
                                        <p className="text-[10px] uppercase font-black text-slate-400 group-hover:text-slate-300 tracking-[0.2em] transition-colors">{t('Click to Upload', '点击上传图片')}</p>
                                        <p className="text-[10px] text-slate-500 max-w-xs">{t('Upload a sprite sheet to preview and export.', '上传 Sprite Sheet 进行预览和导出。')}</p>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* Export Button */}
                    <div className="flex justify-center">
                        <button
                            onClick={onExportPackage}
                            disabled={!filePreview || isExporting}
                            className="px-20 py-6 rounded-3xl bg-white text-slate-950 font-black text-xs uppercase tracking-[0.3em] hover:scale-105 active:scale-95 transition-all shadow-2xl shadow-white/5 disabled:opacity-30 flex items-center gap-4"
                        >
                            {isExporting ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-900 rounded-full animate-spin" /> : (
                                <DownloadIcon />
                            )}
                            {isExporting ? t('Packaging...', '正在打包...') : t('Package & Export', '打包导出')}
                        </button>
                    </div>
                </div>
            )}
        </section>
    );
};

window.EditorPanel = EditorPanel;