/**
 * Terminal Theme Customize Modal
 * Left-right split design: list on left, large preview on right
 * Uses React Portal to render at document root for proper z-index
 *
 * Features:
 * - Real-time preview: changes are applied immediately to the terminal
 * - Save: persists the current settings
 * - Cancel: reverts to the original settings when modal was opened
 * - Custom themes: create, edit, delete, import .itermcolors
 */

import React, { useEffect, useMemo, useState, useCallback, useRef, memo } from 'react';
import { createPortal } from 'react-dom';
import { Check, Download, Minus, Palette, Pencil, Plus, Sparkles, Type, X } from 'lucide-react';
import { useI18n } from '../../application/i18n/I18nProvider';
import { useAvailableFonts } from '../../application/state/fontStore';
import { TERMINAL_THEMES, TerminalThemeConfig, USER_VISIBLE_TERMINAL_THEMES, isUiMatchTerminalThemeId } from '../../infrastructure/config/terminalThemes';
import { DEFAULT_FONT_SIZE, MIN_FONT_SIZE, MAX_FONT_SIZE, TerminalFont } from '../../infrastructure/config/fonts';
import { useCustomThemes, useCustomThemeActions } from '../../application/state/customThemeStore';
import { parseItermcolors } from '../../infrastructure/parsers/itermcolorsParser';
import { CustomThemeModal } from './CustomThemeModal';
import { Button } from '../ui/button';
import { cn } from '../../lib/utils';
import { TerminalTheme } from '../../domain/models';

type TabType = 'theme' | 'font' | 'custom';

// Memoized theme item component to prevent unnecessary re-renders
const ThemeItem = memo(({
    theme,
    isSelected,
    onSelect,
    onEdit,
}: {
    theme: TerminalThemeConfig;
    isSelected: boolean;
    onSelect: (id: string) => void;
    onEdit?: (id: string) => void;
}) => (
    <div
        role="button"
        tabIndex={0}
        onClick={() => onSelect(theme.id)}
        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(theme.id); } }}
        className={cn(
            'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all group cursor-pointer',
            isSelected
                ? 'bg-primary/15 ring-1 ring-primary'
                : 'hover:bg-muted'
        )}
    >
        {/* Color swatch */}
        <div
            className="w-8 h-8 rounded-md flex-shrink-0 flex flex-col justify-center items-start pl-1 gap-0.5 border border-border/50"
            style={{ backgroundColor: theme.colors.background }}
        >
            <div className="h-1 w-3 rounded-full" style={{ backgroundColor: theme.colors.green }} />
            <div className="h-1 w-5 rounded-full" style={{ backgroundColor: theme.colors.blue }} />
            <div className="h-1 w-2 rounded-full" style={{ backgroundColor: theme.colors.yellow }} />
        </div>
        <div className="flex-1 min-w-0">
            <div className={cn('text-xs font-medium truncate', isSelected ? 'text-primary' : 'text-foreground')}>
                {theme.name}
            </div>
            <div className="text-[10px] text-muted-foreground capitalize">
                {theme.type}
                {theme.isCustom && ' • custom'}
            </div>
        </div>
        {onEdit && (
            <div
                role="button"
                tabIndex={0}
                onClick={(e) => { e.stopPropagation(); onEdit(theme.id); }}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); e.preventDefault(); onEdit(theme.id); } }}
                className="w-6 h-6 rounded flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-0 group-hover:opacity-100 transition-all"
            >
                <Pencil size={11} />
            </div>
        )}
        {isSelected && !onEdit && (
            <Check size={14} className="text-primary flex-shrink-0" />
        )}
    </div>
));
ThemeItem.displayName = 'ThemeItem';

// Memoized font item component
const FontItem = memo(({
    font,
    isSelected,
    onSelect
}: {
    font: TerminalFont;
    isSelected: boolean;
    onSelect: (id: string) => void;
}) => (
    <button
        onClick={() => onSelect(font.id)}
        className={cn(
            'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all',
            isSelected
                ? 'bg-primary/15 ring-1 ring-primary'
                : 'hover:bg-muted'
        )}
    >
        <div className="flex-1 min-w-0">
            <div
                className={cn('text-sm truncate', isSelected ? 'text-primary' : 'text-foreground')}
                style={{ fontFamily: font.family }}
            >
                {font.name}
            </div>
            <div className="text-[10px] text-muted-foreground truncate">{font.description}</div>
        </div>
        {isSelected && (
            <Check size={14} className="text-primary flex-shrink-0" />
        )}
    </button>
));
FontItem.displayName = 'FontItem';

interface ThemeCustomizeModalProps {
    open: boolean;
    onClose: () => void;
    currentThemeId?: string;
    displayThemeId?: string;
    currentFontFamilyId?: string;
    currentFontSize?: number;
    /** Called immediately when user selects a theme (for real-time preview) */
    onThemeChange?: (themeId: string) => void;
    /** Called when the theme should return to inherited/default state */
    onThemeReset?: () => void;
    /** Called immediately when user selects a font (for real-time preview) */
    onFontFamilyChange?: (fontFamilyId: string) => void;
    /** Called immediately when user changes font size (for real-time preview) */
    onFontSizeChange?: (fontSize: number) => void;
    /** Called when user clicks Save to persist settings */
    onSave?: () => void;
    /** Optional live preview callback for consumers that render outside this modal */
    onPreviewThemeChange?: (theme: TerminalTheme | null) => void;
}

// Memoized preview component to avoid re-rendering on every state change
const TerminalPreview = memo(({
    theme,
    font,
    fontSize
}: {
    theme: TerminalThemeConfig;
    font: TerminalFont;
    fontSize: number;
}) => (
    <div
        className="flex-1 rounded-xl overflow-hidden border border-border flex flex-col"
        style={{ backgroundColor: theme.colors.background }}
    >
        {/* Fake title bar */}
        <div
            className="flex items-center gap-2 px-3 py-2 border-b shrink-0"
            style={{
                backgroundColor: theme.colors.background,
                borderColor: `${theme.colors.foreground}15`
            }}
        >
            <div className="flex gap-1.5">
                <div className="w-3 h-3 rounded-full bg-red-500/80" />
                <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
                <div className="w-3 h-3 rounded-full bg-green-500/80" />
            </div>
            <div
                className="flex-1 text-center text-xs"
                style={{ color: theme.colors.foreground, opacity: 0.5, fontFamily: font.family }}
            >
                user@server — bash
            </div>
        </div>

        {/* Terminal content */}
        <div
            className="flex-1 p-4 font-mono overflow-auto"
            style={{
                color: theme.colors.foreground,
                fontFamily: font.family,
                fontSize: `${fontSize}px`,
                lineHeight: 1.5,
            }}
        >
            <div className="space-y-1">
                <div>
                    <span style={{ color: theme.colors.green }}>user@server</span>
                    <span style={{ color: theme.colors.foreground }}>:</span>
                    <span style={{ color: theme.colors.blue }}>~</span>
                    <span style={{ color: theme.colors.foreground }}>$ </span>
                    <span>neofetch</span>
                </div>
                <div style={{ color: theme.colors.cyan }}>
                    {'       _,met$$$$$gg.          '}
                </div>
                <div style={{ color: theme.colors.cyan }}>
                    {'    ,g$$$$$$$$$$$$$$$P.       '}
                    <span style={{ color: theme.colors.foreground }}>user</span>
                    <span style={{ color: theme.colors.yellow }}>@</span>
                    <span style={{ color: theme.colors.foreground }}>server</span>
                </div>
                <div style={{ color: theme.colors.cyan }}>
                    {'  ,g$$P"     """Y$$."".        '}
                    <span style={{ color: theme.colors.foreground }}>-----------</span>
                </div>
                <div style={{ color: theme.colors.cyan }}>
                    {` ,$$P'              $$$.     `}
                    <span style={{ color: theme.colors.blue }}>OS</span>
                    <span style={{ color: theme.colors.foreground }}>: Ubuntu 22.04 LTS</span>
                </div>
                <div style={{ color: theme.colors.cyan }}>
                    {`'', $$P, ggs.     $$b:   `}
                    <span style={{ color: theme.colors.blue }}>Kernel</span>
                    <span style={{ color: theme.colors.foreground }}>: 5.15.0-generic</span>
                </div>
                <div style={{ color: theme.colors.cyan }}>
                    {`d$$'     ,$P"'   .    $$$    `}
                    <span style={{ color: theme.colors.blue }}>Uptime</span>
                    <span style={{ color: theme.colors.foreground }}>: 42 days, 3 hours</span>
                </div>
                <div style={{ color: theme.colors.cyan }}>
                    {` $$P      d$'     ,    $$P    `}
                    <span style={{ color: theme.colors.blue }}>Shell</span>
                    <span style={{ color: theme.colors.foreground }}>: bash 5.1.16</span>
                </div>
                <div style={{ color: theme.colors.cyan }}>
                    {` $$:      $$.   -    ,d$$'    `}
                    <span style={{ color: theme.colors.blue }}>Memory</span>
                    <span style={{ color: theme.colors.foreground }}>: 4.2G / 16G (26%)</span>
                </div>
                <div>&nbsp;</div>
                {/* ANSI color palette preview row */}
                <div className="flex gap-0.5 mt-1">
                    {[theme.colors.black, theme.colors.red, theme.colors.green, theme.colors.yellow,
                    theme.colors.blue, theme.colors.magenta, theme.colors.cyan, theme.colors.white].map((c, i) => (
                        <div key={i} className="w-4 h-3 rounded-sm" style={{ backgroundColor: c }} />
                    ))}
                </div>
                <div className="flex gap-0.5">
                    {[theme.colors.brightBlack, theme.colors.brightRed, theme.colors.brightGreen, theme.colors.brightYellow,
                    theme.colors.brightBlue, theme.colors.brightMagenta, theme.colors.brightCyan, theme.colors.brightWhite].map((c, i) => (
                        <div key={i} className="w-4 h-3 rounded-sm" style={{ backgroundColor: c }} />
                    ))}
                </div>
                <div>&nbsp;</div>
                <div>
                    <span style={{ color: theme.colors.green }}>user@server</span>
                    <span style={{ color: theme.colors.foreground }}>:</span>
                    <span style={{ color: theme.colors.blue }}>~</span>
                    <span style={{ color: theme.colors.foreground }}>$ </span>
                    <span
                        style={{
                            backgroundColor: theme.colors.cursor || theme.colors.foreground,
                            color: theme.colors.background
                        }}
                    >▋</span>
                </div>
            </div>
        </div>
    </div>
));
TerminalPreview.displayName = 'TerminalPreview';

const cloneTheme = (theme: TerminalTheme): TerminalTheme => ({
    ...theme,
    colors: { ...theme.colors },
    isCustom: true,
});

const serializeTheme = (theme: TerminalTheme): string => JSON.stringify(theme);

export const ThemeCustomizeModal: React.FC<ThemeCustomizeModalProps> = ({
    open,
    onClose,
    currentThemeId,
    displayThemeId,
    currentFontFamilyId = 'menlo',
    currentFontSize = DEFAULT_FONT_SIZE,
    onThemeChange,
    onThemeReset,
    onFontFamilyChange,
    onFontSizeChange,
    onSave,
    onPreviewThemeChange,
}) => {
    const { t } = useI18n();
    const availableFonts = useAvailableFonts();
    const customThemes = useCustomThemes();
    const { addTheme, updateTheme, deleteTheme } = useCustomThemeActions();

    const resolvedThemeId = currentThemeId ?? displayThemeId ?? TERMINAL_THEMES[0].id;
    const [activeTab, setActiveTab] = useState<TabType>('theme');
    const [selectedTheme, setSelectedTheme] = useState(resolvedThemeId);
    const [selectedFont, setSelectedFont] = useState(currentFontFamilyId);
    const [fontSize, setFontSize] = useState(currentFontSize);
    const [draftCustomThemes, setDraftCustomThemes] = useState<TerminalTheme[]>(() => customThemes.map(cloneTheme));

    // Custom theme editor state
    const [editingTheme, setEditingTheme] = useState<TerminalTheme | null>(null);
    const [isNewTheme, setIsNewTheme] = useState(false);
    const fileInputRef = useRef<HTMLInputElement>(null);

    // Store original values when modal opens (for cancel/revert)
    const originalValuesRef = useRef({
        theme: currentThemeId,
        font: currentFontFamilyId,
        fontSize: currentFontSize,
    });
    const originalCustomThemesRef = useRef<TerminalTheme[]>([]);
    const wasOpenRef = useRef(false);

    // Combine built-in + custom themes
    const allThemes = useMemo(
        () => [...TERMINAL_THEMES, ...draftCustomThemes],
        [draftCustomThemes]
    );

    // Sync state when modal opens
    useEffect(() => {
        if (open && !wasOpenRef.current) {
            // Store original values for potential cancel
            originalValuesRef.current = {
                theme: currentThemeId,
                font: currentFontFamilyId,
                fontSize: currentFontSize,
            };
            originalCustomThemesRef.current = customThemes.map((theme) => ({
                ...cloneTheme(theme),
            }));
            // Initialize selected values
            setSelectedTheme(resolvedThemeId);
            setSelectedFont(currentFontFamilyId);
            setFontSize(currentFontSize);
            setDraftCustomThemes(customThemes.map(cloneTheme));
            setEditingTheme(null);
            setIsNewTheme(false);
        }
        wasOpenRef.current = open;
    }, [open, currentThemeId, resolvedThemeId, currentFontFamilyId, currentFontSize, customThemes]);

    const currentFont = useMemo(
        (): TerminalFont => availableFonts.find(f => f.id === selectedFont) || availableFonts[0],
        [selectedFont, availableFonts]
    );
    const currentTheme = useMemo(
        () => editingTheme || allThemes.find(t => t.id === selectedTheme) || TERMINAL_THEMES[0],
        [selectedTheme, allThemes, editingTheme]
    );
    const hiddenSelectedTheme = useMemo(
        () => (isUiMatchTerminalThemeId(selectedTheme)
            ? TERMINAL_THEMES.find((theme) => theme.id === selectedTheme) || null
            : null),
        [selectedTheme]
    );

    useEffect(() => {
        onPreviewThemeChange?.(open ? currentTheme : null);
    }, [currentTheme, onPreviewThemeChange, open]);

    // Handle theme selection - apply immediately for real-time preview
    const handleThemeSelect = useCallback((themeId: string) => {
        setSelectedTheme(themeId);
        setEditingTheme(null);
        onThemeChange?.(themeId); // Apply immediately
    }, [onThemeChange]);

    // Handle font selection - apply immediately for real-time preview
    const handleFontSelect = useCallback((fontId: string) => {
        setSelectedFont(fontId);
        onFontFamilyChange?.(fontId); // Apply immediately
    }, [onFontFamilyChange]);

    // Handle font size change - apply immediately for real-time preview
    const handleFontSizeChange = useCallback((delta: number) => {
        setFontSize(prev => {
            const newSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, prev + delta));
            onFontSizeChange?.(newSize); // Apply immediately
            return newSize;
        });
    }, [onFontSizeChange]);

    // ---- Custom Theme Actions ----

    const handleNewTheme = useCallback(() => {
        // Clone current theme as starting point
        const base = allThemes.find(t => t.id === selectedTheme) || TERMINAL_THEMES[0];
        const newTheme: TerminalTheme = {
            ...base,
            id: `custom-${Date.now()}`,
            name: `${base.name} (Custom)`,
            isCustom: true,
            colors: { ...base.colors },
        };
        setEditingTheme(newTheme);
        setIsNewTheme(true);
    }, [selectedTheme, allThemes]);

    const handleImportFile = useCallback(() => {
        fileInputRef.current?.click();
    }, []);

    const handleFileSelected = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;

        const name = file.name.replace(/\.(itermcolors|xml)$/i, '');
        const reader = new FileReader();
        reader.onload = () => {
            const xml = reader.result as string;
            const parsed = parseItermcolors(xml, name);
            if (parsed) {
                setDraftCustomThemes((prev) => [...prev, cloneTheme(parsed)]);
                setSelectedTheme(parsed.id);
                onThemeChange?.(parsed.id);
                setActiveTab('theme');
            } else {
                console.error('[ThemeCustomize] Failed to parse .itermcolors file:', file.name);
                window.alert(t('terminal.customTheme.importError') || 'Failed to parse the selected file. Please ensure it is a valid .itermcolors XML file.');
            }
        };
        reader.onerror = () => {
            console.error('[ThemeCustomize] Failed to read file:', file.name, reader.error);
        };
        reader.readAsText(file);
        // Reset file input so the same file can be re-imported
        e.target.value = '';
    }, [onThemeChange, t]);

    const handleEditTheme = useCallback((themeId: string) => {
        const theme = draftCustomThemes.find(t => t.id === themeId);
        if (theme) {
            setEditingTheme({ ...theme, colors: { ...theme.colors } });
            setIsNewTheme(false);
            setActiveTab('custom');
        }
    }, [draftCustomThemes]);


    const handleEditorBack = useCallback(() => {
        setEditingTheme(null);
        setIsNewTheme(false);
    }, []);

    const handleEditorDelete = useCallback((themeId: string) => {
        setDraftCustomThemes((prev) => prev.filter((theme) => theme.id !== themeId));
        if (selectedTheme === themeId) {
            const originalThemeId = originalValuesRef.current.theme;
            const fallbackThemeId = originalThemeId && originalThemeId !== themeId
                ? originalThemeId
                : (displayThemeId && displayThemeId !== themeId ? displayThemeId : USER_VISIBLE_TERMINAL_THEMES[0].id);
            setSelectedTheme(fallbackThemeId);
            if (originalThemeId == null && displayThemeId && displayThemeId !== themeId) {
                onThemeReset?.();
            } else {
                onThemeChange?.(fallbackThemeId);
            }
        }
        setEditingTheme(null);
        setIsNewTheme(false);
    }, [displayThemeId, onThemeChange, onThemeReset, selectedTheme]);

    // Save: just close (changes are already applied)
    const handleSave = useCallback(() => {
        const originalThemes = originalCustomThemesRef.current;
        const originalMap = new Map(originalThemes.map((theme) => [theme.id, theme]));
        const draftMap = new Map(draftCustomThemes.map((theme) => [theme.id, theme]));

        for (const [id, originalTheme] of originalMap) {
            if (!draftMap.has(id)) {
                deleteTheme(id);
                continue;
            }
            const nextTheme = draftMap.get(id)!;
            if (serializeTheme(originalTheme) !== serializeTheme(nextTheme)) {
                updateTheme(id, nextTheme);
            }
        }

        for (const [id, draftTheme] of draftMap) {
            if (!originalMap.has(id)) {
                addTheme(draftTheme);
            }
        }

        onSave?.();
        onClose();
    }, [addTheme, deleteTheme, draftCustomThemes, onClose, onSave, updateTheme]);

    // Cancel: revert to original values
    const handleCancel = useCallback(() => {
        const original = originalValuesRef.current;
        // Revert all changes
        if (original.theme) {
            onThemeChange?.(original.theme);
        } else {
            onThemeReset?.();
        }
        onFontFamilyChange?.(original.font);
        onFontSizeChange?.(original.fontSize);
        onClose();
    }, [onThemeChange, onThemeReset, onFontFamilyChange, onFontSizeChange, onClose]);

    // Handle ESC key - same as cancel, but skip when child editor is open
    useEffect(() => {
        if (!open) return;
        const handleKeyDown = (e: KeyboardEvent) => {
            if (e.key === 'Escape' && !editingTheme) handleCancel();
        };
        document.addEventListener('keydown', handleKeyDown);
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, [open, handleCancel, editingTheme]);

    // Handle backdrop click - same as cancel
    const handleBackdropClick = useCallback((e: React.MouseEvent) => {
        if (e.target === e.currentTarget) handleCancel();
    }, [handleCancel]);

    if (!open) return null;

    // Separate built-in and custom themes for display in the theme list
    const builtinThemes = USER_VISIBLE_TERMINAL_THEMES;

    const modalContent = (
        <div
            className="fixed inset-0 z-[200] flex items-center justify-center bg-black/60"
            onClick={handleBackdropClick}
        >
            <div
                className="w-[800px] h-[560px] bg-background border border-border rounded-2xl shadow-2xl flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200"
                onClick={(e) => e.stopPropagation()}
            >
                {/* Header */}
                <div className="flex items-center justify-between px-5 py-3 shrink-0 border-b border-border">
                    <div className="flex items-center gap-3">
                        <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-primary/10">
                            <Palette size={16} className="text-primary" />
                        </div>
                        <h2 className="text-sm font-semibold text-foreground">{t('terminal.themeModal.title')}</h2>
                    </div>
                    <button
                        onClick={handleCancel}
                        className="w-8 h-8 rounded-lg flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
                    >
                        <X size={16} />
                    </button>
                </div>

                {/* Main Content - Left/Right Split */}
                <div className="flex-1 flex min-h-0">
                    {/* Left Panel - List */}
                    <div className="w-[280px] border-r border-border flex flex-col shrink-0">
                        {/* Tab Bar */}
                        <div className="flex p-2 gap-1 shrink-0 border-b border-border">
                            <button
                                onClick={() => { setActiveTab('theme'); setEditingTheme(null); }}
                                className={cn(
                                    'flex-1 flex items-center justify-center gap-1.5 px-2 py-2 rounded-lg text-xs font-medium transition-all',
                                    activeTab === 'theme'
                                        ? 'bg-primary/15 text-primary'
                                        : 'text-muted-foreground hover:text-foreground hover:bg-muted'
                                )}
                            >
                                <Palette size={13} />
                                {t('terminal.themeModal.tab.theme')}
                            </button>
                            <button
                                onClick={() => setActiveTab('font')}
                                className={cn(
                                    'flex-1 flex items-center justify-center gap-1.5 px-2 py-2 rounded-lg text-xs font-medium transition-all',
                                    activeTab === 'font'
                                        ? 'bg-primary/15 text-primary'
                                        : 'text-muted-foreground hover:text-foreground hover:bg-muted'
                                )}
                            >
                                <Type size={13} />
                                {t('terminal.themeModal.tab.font')}
                            </button>
                            <button
                                onClick={() => setActiveTab('custom')}
                                className={cn(
                                    'flex-1 flex items-center justify-center gap-1.5 px-2 py-2 rounded-lg text-xs font-medium transition-all',
                                    activeTab === 'custom'
                                        ? 'bg-primary/15 text-primary'
                                        : 'text-muted-foreground hover:text-foreground hover:bg-muted'
                                )}
                            >
                                <Sparkles size={13} />
                                {t('terminal.themeModal.tab.custom')}
                            </button>
                        </div>

                        {/* List Content */}
                        <>
                            <div className="flex-1 min-h-0 overflow-y-auto p-2">
                                {activeTab === 'theme' && (
                                    <div className="space-y-1">
                                        {hiddenSelectedTheme && (
                                            <div className="rounded-lg border border-border/60 bg-muted/30 px-3 py-2.5 mb-2">
                                                <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1 font-semibold">
                                                    {t('terminal.hiddenTheme.title')}
                                                </div>
                                                <div className="text-xs font-medium text-foreground">{hiddenSelectedTheme.name}</div>
                                                <div className="text-[10px] text-muted-foreground mt-1">
                                                    {t('terminal.hiddenTheme.desc')}
                                                </div>
                                            </div>
                                        )}
                                        {/* Built-in themes */}
                                        {builtinThemes.map(theme => (
                                            <ThemeItem
                                                key={theme.id}
                                                theme={theme}
                                                isSelected={selectedTheme === theme.id && !editingTheme}
                                                onSelect={handleThemeSelect}
                                            />
                                        ))}
                                        {/* Custom themes section */}
                                        {draftCustomThemes.length > 0 && (
                                            <>
                                                <div className="text-[9px] uppercase tracking-wider text-muted-foreground mt-3 mb-1.5 px-1 font-semibold">
                                                    {t('terminal.customTheme.section')}
                                                </div>
                                                {draftCustomThemes.map(theme => (
                                                    <ThemeItem
                                                        key={theme.id}
                                                        theme={theme}
                                                        isSelected={selectedTheme === theme.id && !editingTheme}
                                                        onSelect={handleThemeSelect}
                                                        onEdit={handleEditTheme}
                                                    />
                                                ))}
                                            </>
                                        )}
                                    </div>
                                )}
                                {activeTab === 'font' && (
                                    <div className="space-y-1">
                                        {availableFonts.map(font => (
                                            <FontItem
                                                key={font.id}
                                                font={font}
                                                isSelected={selectedFont === font.id}
                                                onSelect={handleFontSelect}
                                            />
                                        ))}
                                    </div>
                                )}
                                {activeTab === 'custom' && !editingTheme && (
                                    <div className="space-y-2">
                                        {/* Actions */}
                                        <button
                                            onClick={handleNewTheme}
                                            className="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg text-left hover:bg-muted transition-colors"
                                        >
                                            <div className="w-8 h-8 rounded-md flex items-center justify-center bg-primary/10 text-primary">
                                                <Plus size={16} />
                                            </div>
                                            <div>
                                                <div className="text-xs font-medium text-foreground">{t('terminal.customTheme.new')}</div>
                                                <div className="text-[10px] text-muted-foreground">{t('terminal.customTheme.newDesc')}</div>
                                            </div>
                                        </button>
                                        <button
                                            onClick={handleImportFile}
                                            className="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg text-left hover:bg-muted transition-colors"
                                        >
                                            <div className="w-8 h-8 rounded-md flex items-center justify-center bg-blue-500/10 text-blue-500">
                                                <Download size={16} />
                                            </div>
                                            <div>
                                                <div className="text-xs font-medium text-foreground">{t('terminal.customTheme.import')}</div>
                                                <div className="text-[10px] text-muted-foreground">{t('terminal.customTheme.importDesc')}</div>
                                            </div>
                                        </button>
                                        <input
                                            ref={fileInputRef}
                                            type="file"
                                            accept=".itermcolors"
                                            onChange={handleFileSelected}
                                            className="hidden"
                                        />

                                        {/* Custom themes list */}
                                        {draftCustomThemes.length > 0 && (
                                            <>
                                                <div className="text-[9px] uppercase tracking-wider text-muted-foreground mt-3 mb-1 px-1 font-semibold">
                                                    {t('terminal.customTheme.yourThemes')}
                                                </div>
                                                {draftCustomThemes.map(theme => (
                                                    <ThemeItem
                                                        key={theme.id}
                                                        theme={theme}
                                                        isSelected={selectedTheme === theme.id}
                                                        onSelect={handleThemeSelect}
                                                        onEdit={handleEditTheme}
                                                    />
                                                ))}
                                            </>
                                        )}
                                    </div>
                                )}
                            </div>

                            {/* Font Size Control (only in font tab) */}
                            {activeTab === 'font' && (
                                <div className="p-3 border-t border-border shrink-0">
                                    <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold">
                                        {t('terminal.themeModal.fontSize')}
                                    </div>
                                    <div className="flex items-center justify-between gap-2 bg-muted/30 rounded-lg p-2">
                                        <button
                                            onClick={() => handleFontSizeChange(-1)}
                                            disabled={fontSize <= MIN_FONT_SIZE}
                                            className="w-8 h-8 rounded-md flex items-center justify-center bg-background hover:bg-accent text-foreground hover:text-accent-foreground disabled:opacity-30 disabled:cursor-not-allowed transition-colors border border-border"
                                        >
                                            <Minus size={14} />
                                        </button>
                                        <div className="flex items-baseline gap-1">
                                            <span className="text-xl font-bold text-foreground tabular-nums">{fontSize}</span>
                                            <span className="text-[10px] text-muted-foreground">px</span>
                                        </div>
                                        <button
                                            onClick={() => handleFontSizeChange(1)}
                                            disabled={fontSize >= MAX_FONT_SIZE}
                                            className="w-8 h-8 rounded-md flex items-center justify-center bg-background hover:bg-accent text-foreground hover:text-accent-foreground disabled:opacity-30 disabled:cursor-not-allowed transition-colors border border-border"
                                        >
                                            <Plus size={14} />
                                        </button>
                                    </div>
                                </div>
                            )}
                        </>
                    </div>

                    {/* Right Panel - Large Preview */}
                    <div className="flex-1 flex flex-col min-w-0 p-4">
                        <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-3 font-semibold">
                            {t('terminal.themeModal.livePreview')}
                        </div>
                        <TerminalPreview theme={currentTheme} font={currentFont} fontSize={fontSize} />

                        {/* Info line */}
                        <div className="mt-3 text-xs text-muted-foreground flex items-center justify-between">
                            <span>
                                {currentTheme.name} • {currentFont.name} • {fontSize}px
                            </span>
                            <span className="text-[10px] uppercase">
                                {t('terminal.themeModal.themeType', { type: currentTheme.type })}
                            </span>
                        </div>
                    </div>
                </div>

                {/* Footer */}
                <div className="flex gap-3 px-5 py-3 shrink-0 border-t border-border bg-muted/20">
                    <Button
                        variant="ghost"
                        onClick={handleCancel}
                        className="flex-1 h-10"
                    >
                        {t('common.cancel')}
                    </Button>
                    <Button
                        onClick={handleSave}
                        className="flex-1 h-10"
                    >
                        {t('common.save')}
                    </Button>
                </div>
            </div>
        </div>
    );

    // Use Portal to render at document root
    return (
        <>
            {createPortal(modalContent, document.body)}
            {editingTheme && (
                <CustomThemeModal
                    open={!!editingTheme}
                    theme={editingTheme}
                    isNew={isNewTheme}
                    onSave={(theme) => {
                        setDraftCustomThemes((prev) => {
                            if (isNewTheme) {
                                return [...prev, cloneTheme(theme)];
                            }
                            return prev.map((entry) => entry.id === theme.id ? cloneTheme(theme) : entry);
                        });
                        if (isNewTheme) {
                            setSelectedTheme(theme.id);
                            onThemeChange?.(theme.id);
                        } else {
                            if (selectedTheme === theme.id) {
                                onThemeChange?.(theme.id);
                            }
                        }
                        setEditingTheme(null);
                        setIsNewTheme(false);
                    }}
                    onDelete={isNewTheme ? undefined : handleEditorDelete}
                    onCancel={handleEditorBack}
                />
            )}
        </>
    );
};

export default ThemeCustomizeModal;