// ==========================================
// PixelPanel Component (with Debug Mode support)
// ==========================================

const PixelPanel = ({
    isOpen,
    onToggle,
    t,
    // Source
    pixelSourcePreview,
    genState,
    onUseAiResult,
    onPixelUpload,
    onClearPixelSource,
    // State
    pixelState,
    onExecutePixelation,
    onApplyToEditor,
    onClearPixelResult
}) => {
    const { ChevronIcon, SparklesIcon, GridIcon, UploadIcon } = window.Icons;

    return (
        <section 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-amber-500/10 flex items-center justify-center text-amber-400">
                        <GridIcon />
                    </div>
                    <div>
                        <h2 className="font-bold text-xl">{t('Pixelation Tool', '像素化工具')}</h2>
                        <p className="text-xs text-slate-500">
                            {t('Post-process images with specialized pixelation filters.', '使用专业滤镜对图像进行像素化后期处理。')}
                        </p>
                    </div>
                </div>
                <ChevronIcon open={isOpen} />
            </div>

            <div className={`transition-all duration-500 overflow-hidden ${isOpen ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'}`}>
                <div className="p-8 border-t border-slate-800">
                    <div className="bg-slate-950 rounded-2xl border border-slate-800 p-6">

                        {/* Two Column Layout */}
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {/* Left: Source Image */}
                            <div className="space-y-4">
                                <div className="flex items-center justify-between">
                                    <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest px-1">{t('Source Image', '源图像')}</label>
                                    {genState.generatedImageBase64 && (
                                        <button
                                            onClick={onUseAiResult}
                                            className="text-[10px] font-bold text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1"
                                        >
                                            <SparklesIcon />
                                            {t('Use AI Result', '使用AI结果')}
                                        </button>
                                    )}
                                </div>

                                {/* Clickable Upload Area */}
                                <div className="relative aspect-video bg-black/20 rounded-xl overflow-hidden border border-slate-800 cursor-pointer group hover:border-slate-600 transition-colors">
                                    <input
                                        type="file"
                                        onChange={onPixelUpload}
                                        accept="image/*"
                                        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
                                    />

                                    {pixelSourcePreview ? (
                                        <>
                                            <img src={pixelSourcePreview} className="w-full h-full object-contain" alt="Source" />
                                            <div className="absolute top-2 left-2 bg-black/60 text-[9px] text-white px-2 py-1 rounded">BEFORE</div>
                                            {/* Clear Button */}
                                            <button
                                                onClick={(e) => { e.stopPropagation(); onClearPixelSource(); }}
                                                className="absolute top-2 right-2 w-6 h-6 bg-black/60 hover:bg-rose-500 text-white rounded-full flex items-center justify-center text-xs transition-colors z-20"
                                            >
                                                ✕
                                            </button>
                                        </>
                                    ) : (
                                        <div className="absolute inset-0 flex flex-col items-center justify-center text-slate-600 group-hover:text-slate-400 transition-colors">
                                            <UploadIcon />
                                            <span className="text-xs mt-2">{t('Click to upload image', '点击上传图片')}</span>
                                        </div>
                                    )}
                                </div>

                                {/* Pixelate Button */}
                                <button
                                    onClick={onExecutePixelation}
                                    disabled={!pixelSourcePreview || pixelState.isLoading}
                                    className="w-full py-3 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-xl text-xs uppercase tracking-widest transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 border border-slate-700"
                                >
                                    {pixelState.isLoading ? (
                                        <>
                                            <div className="w-4 h-4 border-2 border-slate-500 border-t-amber-400 rounded-full animate-spin" />
                                            {t('Processing...', '处理中...')}
                                        </>
                                    ) : (
                                        t('Start Pixelation', '开始像素化')
                                    )}
                                </button>
                            </div>

                            {/* Right: Result */}
                            <div className="space-y-4">
                                <div className="flex items-center justify-between">
                                    <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest px-1">{t('Processed Result', '处理结果')}</label>
                                </div>

                                {/* Result Display */}
                                <div className="relative aspect-video bg-black/20 rounded-xl overflow-hidden border border-slate-800">
                                    {pixelState.result ? (
                                        <>
                                            <img src={pixelState.result} className="w-full h-full object-contain" style={{ imageRendering: 'pixelated' }} alt="Result" />
                                            <div className="absolute top-2 left-2 bg-amber-500 text-[9px] text-slate-900 font-bold px-2 py-1 rounded">AFTER</div>
                                            {/* Clear Button */}
                                            <button
                                                onClick={onClearPixelResult}
                                                className="absolute top-2 right-2 w-6 h-6 bg-black/60 hover:bg-rose-500 text-white rounded-full flex items-center justify-center text-xs transition-colors"
                                            >
                                                ✕
                                            </button>
                                        </>
                                    ) : (
                                        <div className="absolute inset-0 flex items-center justify-center text-slate-600 text-xs">
                                            {pixelState.error ? (
                                                <span className="text-rose-500 text-center px-4">{pixelState.error}</span>
                                            ) : (
                                                t('Waiting for process...', '等待处理...')
                                            )}
                                        </div>
                                    )}
                                </div>

                                {/* Send to Editor Button */}
                                <button
                                    onClick={onApplyToEditor}
                                    disabled={!pixelState.result}
                                    className="w-full py-3 bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold rounded-xl text-xs uppercase tracking-widest transition-all disabled:opacity-50 disabled:bg-slate-800 disabled:text-slate-500 shadow-lg shadow-amber-500/20"
                                >
                                    {t('Send to Editor', '发送到编辑器')}
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>
    );
};

window.PixelPanel = PixelPanel;