NetMesh/components/terminal/ThemeSidePanel.tsx

/**
 * ThemeSidePanel - Theme/Font customization panel for the terminal side panel
 *
 * Adapted from ThemeCustomizeModal's left panel content.
 * No preview - the actual terminal behind serves as a live preview.
 * Changes apply in real-time.
 */

import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Check, Download, Minus, Palette, Pencil, Plus, Sparkles, Type } from 'lucide-react';
import { useI18n } from '../../application/i18n/I18nProvider';
import { useAvailableFonts } from '../../application/state/fontStore';
import { TERMINAL_THEMES, TerminalThemeConfig, USER_VISIBLE_TERMINAL_THEMES, getBuiltinTerminalThemeById, isUiMatchTerminalThemeId } from '../../infrastructure/config/terminalThemes';
import { MIN_FONT_SIZE, MAX_FONT_SIZE, TerminalFont } from '../../infrastructure/config/fonts';
import { useCustomThemes, useCustomThemeActions } from '../../application/state/customThemeStore';
import { terminalAppearanceThemePanelVars } from '../../infrastructure/theme/terminalAppearanceTokens';
import { parseItermcolors } from '../../infrastructure/parsers/itermcolorsParser';
import { CustomThemeModal } from './CustomThemeModal';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { cn } from '../../lib/utils';
import { TerminalTheme } from '../../domain/models';
import { ScrollArea } from '../ui/scroll-area';
import { isFollowAppTerminalThemeId } from '../../domain/terminalAppearance';
import { TERMINAL_SIDE_PANEL_INNER_HEADER_CLASS } from '../terminalLayer/terminalSidePanelChrome';

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

// Memoized theme item component
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-2.5 px-3 py-2 text-left group cursor-pointer'
    )}
    style={{ backgroundColor: isSelected ? 'var(--terminal-panel-active)' : 'transparent' }}
    onMouseEnter={(e) => {
      if (!isSelected) e.currentTarget.style.backgroundColor = 'var(--terminal-panel-hover)';
    }}
    onMouseLeave={(e) => {
      if (!isSelected) e.currentTarget.style.backgroundColor = 'transparent';
    }}
  >
    {/* Color swatch */}
    <div
      className="h-6 w-8 rounded-[4px] flex-shrink-0 flex flex-col justify-center items-start pl-1 gap-0.5 border-[0.5px]"
      style={{ backgroundColor: theme.colors.background, borderColor: 'var(--terminal-panel-border)' }}
    >
      <div className="h-0.5 w-2.5 rounded-full" style={{ backgroundColor: theme.colors.green }} />
      <div className="h-0.5 w-4 rounded-full" style={{ backgroundColor: theme.colors.blue }} />
      <div className="h-0.5 w-1.5 rounded-full" style={{ backgroundColor: theme.colors.yellow }} />
    </div>
    <div className="flex-1 min-w-0">
      <div className="text-xs font-medium truncate">
        {theme.name}
      </div>
      <div className="text-[10px] capitalize" style={{ color: 'var(--terminal-panel-muted)' }}>
        {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-5 h-5 rounded flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all"
        style={{ color: 'var(--terminal-panel-muted)' }}
      >
        <Pencil size={10} />
      </div>
    )}
    {isSelected && !onEdit && (
      <Check size={12} className="flex-shrink-0" style={{ color: 'var(--terminal-panel-fg)' }} />
    )}
  </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-2.5 px-3 py-2 text-left transition-colors'
    )}
    style={{ backgroundColor: isSelected ? 'var(--terminal-panel-active)' : 'transparent' }}
    onMouseEnter={(e) => {
      if (!isSelected) e.currentTarget.style.backgroundColor = 'var(--terminal-panel-hover)';
    }}
    onMouseLeave={(e) => {
      if (!isSelected) e.currentTarget.style.backgroundColor = 'transparent';
    }}
  >
    <div className="flex-1 min-w-0">
      <div
        className="text-xs font-medium truncate"
        style={{ fontFamily: font.family }}
      >
        {font.name}
      </div>
      <div className="text-[10px] truncate" style={{ color: 'var(--terminal-panel-muted)' }}>{font.description}</div>
    </div>
    {isSelected && (
      <Check size={12} className="flex-shrink-0" style={{ color: 'var(--terminal-panel-fg)' }} />
    )}
  </button>
));
FontItem.displayName = 'FontItem';

interface ThemeSidePanelProps {
  followAppTerminalTheme?: boolean;
  currentThemeId: string;
  globalThemeId: string;
  currentFontFamilyId: string;
  globalFontFamilyId: string;
  currentFontSize: number;
  currentFontWeight: number;
  canResetTheme?: boolean;
  canResetFontFamily?: boolean;
  canResetFontSize?: boolean;
  canResetFontWeight?: boolean;
  onThemeChange: (themeId: string) => void;
  onThemeReset?: () => void;
  onFontFamilyChange: (fontFamilyId: string) => void;
  onFontFamilyReset?: () => void;
  onFontSizeChange: (fontSize: number) => void;
  onFontSizeReset?: () => void;
  onFontWeightChange: (fontWeight: number) => void;
  onFontWeightReset?: () => void;
  isVisible?: boolean;
}

const ThemeSidePanelInner: React.FC<ThemeSidePanelProps> = ({
  followAppTerminalTheme = false,
  currentThemeId,
  globalThemeId,
  currentFontFamilyId,
  globalFontFamilyId,
  currentFontSize,
  currentFontWeight,
  canResetTheme = false,
  canResetFontFamily = false,
  canResetFontSize = false,
  canResetFontWeight = false,
  onThemeChange,
  onThemeReset,
  onFontFamilyChange,
  onFontFamilyReset,
  onFontSizeChange,
  onFontSizeReset,
  onFontWeightChange,
  onFontWeightReset,
  isVisible = true,
}) => {
  const { t } = useI18n();
  const availableFonts = useAvailableFonts();
  const customThemes = useCustomThemes();
  const { addTheme, updateTheme, deleteTheme } = useCustomThemeActions();

  const [activeTab, setActiveTab] = useState<TabType>('theme');
  const [editingTheme, setEditingTheme] = useState<TerminalTheme | null>(null);
  const [isNewTheme, setIsNewTheme] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (followAppTerminalTheme && activeTab === 'custom') {
      setActiveTab('theme');
      setEditingTheme(null);
    }
  }, [activeTab, followAppTerminalTheme]);

  const customThemeById = useMemo(
    () => new Map(customThemes.map((theme) => [theme.id, theme])),
    [customThemes],
  );
  const fontById = useMemo(
    () => new Map(availableFonts.map((font) => [font.id, font])),
    [availableFonts],
  );
  const getThemeById = useCallback((themeId: string): TerminalTheme | undefined =>
    getBuiltinTerminalThemeById(themeId) ?? customThemeById.get(themeId),
  [customThemeById]);
  const globalTheme = useMemo(
    () => getThemeById(globalThemeId) || TERMINAL_THEMES[0],
    [getThemeById, globalThemeId],
  );
  const hiddenSelectedTheme = useMemo(
    () => (isUiMatchTerminalThemeId(currentThemeId)
      ? getBuiltinTerminalThemeById(currentThemeId) || null
      : null),
    [currentThemeId],
  );
  const globalFont = useMemo(
    () => fontById.get(globalFontFamilyId) || availableFonts[0],
    [availableFonts, fontById, globalFontFamilyId],
  );
  const builtinThemes = useMemo(
    () => (followAppTerminalTheme
      ? TERMINAL_THEMES.filter((theme) => isFollowAppTerminalThemeId(theme.id))
      : USER_VISIBLE_TERMINAL_THEMES),
    [followAppTerminalTheme],
  );

  const handleThemeSelect = useCallback((themeId: string) => {
    setEditingTheme(null);
    onThemeChange(themeId);
  }, [onThemeChange]);

  const handleFontSelect = useCallback((fontId: string) => {
    onFontFamilyChange(fontId);
  }, [onFontFamilyChange]);

  const handleFontSizeChange = useCallback((delta: number) => {
    const newSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, currentFontSize + delta));
    onFontSizeChange(newSize);
  }, [currentFontSize, onFontSizeChange]);

  const handleNewTheme = useCallback(() => {
    const base = getThemeById(currentThemeId) || TERMINAL_THEMES[0];
    const newTheme: TerminalTheme = {
      ...base,
      id: `custom-${Date.now()}`,
      name: `${base.name} (Custom)`,
      isCustom: true,
      colors: { ...base.colors },
    };
    setEditingTheme(newTheme);
    setIsNewTheme(true);
  }, [currentThemeId, getThemeById]);

  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) {
        addTheme(parsed);
        onThemeChange(parsed.id);
        setActiveTab('theme');
      } else {
        window.alert(t('terminal.customTheme.importError') || 'Failed to parse the selected file.');
      }
    };
    reader.readAsText(file);
    e.target.value = '';
  }, [addTheme, onThemeChange, t]);

  const handleEditTheme = useCallback((themeId: string) => {
    const theme = customThemeById.get(themeId);
    if (theme) {
      setEditingTheme({ ...theme, colors: { ...theme.colors } });
      setIsNewTheme(false);
    }
  }, [customThemeById]);

  const handleEditorDelete = useCallback((themeId: string) => {
    deleteTheme(themeId);
    if (currentThemeId === themeId) {
      onThemeChange(TERMINAL_THEMES[0].id);
    }
    setEditingTheme(null);
    setIsNewTheme(false);
  }, [deleteTheme, currentThemeId, onThemeChange]);

  if (!isVisible) return null;

  const footerThemeName = getThemeById(currentThemeId)?.name ?? currentThemeId;
  const footerFontName = fontById.get(currentFontFamilyId)?.name ?? currentFontFamilyId;
  const footerLabel = `${footerThemeName} • ${footerFontName} • ${currentFontSize}px • ${currentFontWeight}`;
  const panelVars = terminalAppearanceThemePanelVars;

  return (
    <>
      <div
        className="h-full flex flex-col overflow-hidden"
        style={{
          ...panelVars,
          backgroundColor: 'var(--terminal-panel-bg)',
          color: 'var(--terminal-panel-fg)',
          borderColor: 'var(--terminal-panel-border)',
        }}
      >
        {/* Tab Bar */}
        <div
          className={cn(TERMINAL_SIDE_PANEL_INNER_HEADER_CLASS, 'flex items-center px-1.5 gap-0.5 border-b')}
          style={{ borderColor: 'var(--terminal-panel-border)' }}
        >
          <button
            onClick={() => { setActiveTab('theme'); setEditingTheme(null); }}
            className="h-6 flex-1 flex items-center justify-center gap-1 px-1.5 rounded-md text-[11px] font-medium transition-all"
            style={{
              backgroundColor: activeTab === 'theme' ? 'var(--terminal-panel-active)' : 'transparent',
              color: activeTab === 'theme' ? 'var(--terminal-panel-fg)' : 'var(--terminal-panel-muted)',
            }}
          >
            <Palette size={12} />
            {t('terminal.themeModal.tab.theme')}
          </button>
          <button
            onClick={() => setActiveTab('font')}
            className="h-6 flex-1 flex items-center justify-center gap-1 px-1.5 rounded-md text-[11px] font-medium transition-all"
            style={{
              backgroundColor: activeTab === 'font' ? 'var(--terminal-panel-active)' : 'transparent',
              color: activeTab === 'font' ? 'var(--terminal-panel-fg)' : 'var(--terminal-panel-muted)',
            }}
          >
            <Type size={12} />
            {t('terminal.themeModal.tab.font')}
          </button>
          {!followAppTerminalTheme && (
            <button
              onClick={() => setActiveTab('custom')}
              className="h-6 flex-1 flex items-center justify-center gap-1 px-1.5 rounded-md text-[11px] font-medium transition-all"
              style={{
                backgroundColor: activeTab === 'custom' ? 'var(--terminal-panel-active)' : 'transparent',
                color: activeTab === 'custom' ? 'var(--terminal-panel-fg)' : 'var(--terminal-panel-muted)',
              }}
            >
              <Sparkles size={12} />
              {t('terminal.themeModal.tab.custom')}
            </button>
          )}
        </div>

        {/* List Content */}
        <ScrollArea className="flex-1 min-h-0">
          <div className="py-1">
            {activeTab === 'theme' && (
              <div>
                {!followAppTerminalTheme && hiddenSelectedTheme && (
                  <ThemeItem
                    theme={hiddenSelectedTheme}
                    isSelected={currentThemeId === hiddenSelectedTheme.id && !editingTheme}
                    onSelect={handleThemeSelect}
                  />
                )}
                {builtinThemes.map(theme => (
                  <ThemeItem
                    key={theme.id}
                    theme={theme}
                    isSelected={currentThemeId === theme.id && !editingTheme}
                    onSelect={handleThemeSelect}
                  />
                ))}
                {!followAppTerminalTheme && customThemes.length > 0 && (
                  <>
                    <div className="text-[9px] uppercase tracking-wider mt-2 mb-1 px-1 font-semibold" style={{ color: 'var(--terminal-panel-muted)' }}>
                      {t('terminal.customTheme.section')}
                    </div>
                    {customThemes.map(theme => (
                      <ThemeItem
                        key={theme.id}
                        theme={theme}
                        isSelected={currentThemeId === theme.id && !editingTheme}
                        onSelect={handleThemeSelect}
                        onEdit={handleEditTheme}
                      />
                    ))}
                  </>
                )}
                {canResetTheme && (
                  <>
                    <div className="text-[9px] uppercase tracking-wider mt-2 mb-1 px-1 font-semibold" style={{ color: 'var(--terminal-panel-muted)' }}>
                      {t('terminal.themeModal.globalTheme')}
                    </div>
                    <ThemeItem
                      theme={globalTheme}
                      isSelected={!canResetTheme}
                      onSelect={() => onThemeReset?.()}
                    />
                  </>
                )}
              </div>
            )}
            {activeTab === 'font' && (
              <div>
                {availableFonts.map(font => (
                  <FontItem
                    key={font.id}
                    font={font}
                    isSelected={currentFontFamilyId === font.id}
                    onSelect={handleFontSelect}
                  />
                ))}
                {canResetFontFamily && (
                  <>
                    <div className="text-[9px] uppercase tracking-wider mt-2 mb-1 px-1 font-semibold" style={{ color: 'var(--terminal-panel-muted)' }}>
                      {t('terminal.themeModal.globalFont')}
                    </div>
                    <FontItem
                      font={globalFont}
                      isSelected={!canResetFontFamily}
                      onSelect={() => onFontFamilyReset?.()}
                    />
                  </>
                )}
              </div>
            )}
            {activeTab === 'custom' && !editingTheme && (
              <div>
                <button
                  onClick={handleNewTheme}
                  className="w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors"
                  onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--terminal-panel-hover)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
                >
                    <div
                      className="w-6 h-6 rounded-md flex items-center justify-center shrink-0"
                      style={{
                        backgroundColor: 'color-mix(in srgb, var(--terminal-panel-fg) 10%, transparent)',
                        color: 'var(--terminal-panel-fg)',
                      }}
                    >
                      <Plus size={12} />
                    </div>
                  <div>
                    <div className="text-xs font-medium">{t('terminal.customTheme.new')}</div>
                    <div className="text-[10px]" style={{ color: 'var(--terminal-panel-muted)' }}>{t('terminal.customTheme.newDesc')}</div>
                  </div>
                </button>
                <button
                  onClick={handleImportFile}
                  className="w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors"
                  onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--terminal-panel-hover)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
                >
                  <div className="w-6 h-6 rounded-md flex items-center justify-center bg-blue-500/10 text-blue-500 shrink-0">
                    <Download size={12} />
                  </div>
                  <div>
                    <div className="text-xs font-medium">{t('terminal.customTheme.import')}</div>
                    <div className="text-[10px]" style={{ color: 'var(--terminal-panel-muted)' }}>{t('terminal.customTheme.importDesc')}</div>
                  </div>
                </button>
                <input
                  ref={fileInputRef}
                  type="file"
                  accept=".itermcolors"
                  onChange={handleFileSelected}
                  className="hidden"
                />
                {customThemes.length > 0 && (
                  <>
                    <div className="text-[9px] uppercase tracking-wider mt-2 mb-1 px-1 font-semibold" style={{ color: 'var(--terminal-panel-muted)' }}>
                      {t('terminal.customTheme.yourThemes')}
                    </div>
                    {customThemes.map(theme => (
                      <ThemeItem
                        key={theme.id}
                        theme={theme}
                        isSelected={currentThemeId === theme.id}
                        onSelect={handleThemeSelect}
                        onEdit={handleEditTheme}
                      />
                    ))}
                  </>
                )}
              </div>
            )}
          </div>
        </ScrollArea>

        {/* Font Size Control (only in font tab) */}
        {activeTab === 'font' && (
          <div className="p-2.5 border-t shrink-0" style={{ borderColor: 'var(--terminal-panel-border)' }}>
            <div className="flex items-center justify-between gap-2 mb-1.5">
              <div className="text-[9px] uppercase tracking-wider font-semibold" style={{ color: 'var(--terminal-panel-muted)' }}>
                {t('terminal.themeModal.fontSize')}
              </div>
              {canResetFontSize && (
                <button
                  onClick={onFontSizeReset}
                  className="text-[10px] font-medium hover:opacity-80 transition-opacity"
                  style={{ color: 'var(--terminal-panel-fg)' }}
                >
                  {t('common.useGlobal')}
                </button>
              )}
            </div>
            <div className="flex items-center justify-between gap-2 rounded-lg p-1.5" style={{ backgroundColor: 'var(--terminal-panel-hover)' }}>
              <button
                onClick={() => handleFontSizeChange(-1)}
                disabled={currentFontSize <= MIN_FONT_SIZE}
                className="w-7 h-7 rounded-md flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed transition-colors border"
                style={{
                  backgroundColor: 'var(--terminal-panel-bg)',
                  color: 'var(--terminal-panel-fg)',
                  borderColor: 'var(--terminal-panel-border)',
                }}
              >
                <Minus size={12} />
              </button>
              <div className="flex items-baseline gap-1">
                <span className="text-lg font-bold tabular-nums">{currentFontSize}</span>
                <span className="text-[9px]" style={{ color: 'var(--terminal-panel-muted)' }}>px</span>
              </div>
              <button
                onClick={() => handleFontSizeChange(1)}
                disabled={currentFontSize >= MAX_FONT_SIZE}
                className="w-7 h-7 rounded-md flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed transition-colors border"
                style={{
                  backgroundColor: 'var(--terminal-panel-bg)',
                  color: 'var(--terminal-panel-fg)',
                  borderColor: 'var(--terminal-panel-border)',
                }}
              >
                <Plus size={12} />
              </button>
            </div>
          </div>
        )}

        {/* Font Weight Control (only in font tab) */}
        {activeTab === 'font' && (
          <div className="p-2.5 border-t shrink-0" style={{ borderColor: 'var(--terminal-panel-border)' }}>
            <div className="flex items-center justify-between gap-2 mb-1.5">
              <div className="text-[9px] uppercase tracking-wider font-semibold" style={{ color: 'var(--terminal-panel-muted)' }}>
                {t('terminal.themeModal.fontWeight')}
              </div>
              {canResetFontWeight && (
                <button
                  onClick={onFontWeightReset}
                  className="text-[10px] font-medium hover:opacity-80 transition-opacity"
                  style={{ color: 'var(--terminal-panel-fg)' }}
                >
                  {t('common.useGlobal')}
                </button>
              )}
            </div>
            <div className="flex items-center gap-2 rounded-lg p-1.5" style={{ backgroundColor: 'var(--terminal-panel-hover)' }}>
              <Select
                value={String(currentFontWeight)}
                onValueChange={(v) => onFontWeightChange(Number(v))}
              >
                <SelectTrigger
                  className="flex-1 h-7 text-xs"
                  style={{
                    backgroundColor: 'var(--terminal-panel-bg)',
                    color: 'var(--terminal-panel-fg)',
                    borderColor: 'var(--terminal-panel-border)',
                  }}
                >
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="100">100 Thin</SelectItem>
                  <SelectItem value="200">200 ExtraLight</SelectItem>
                  <SelectItem value="300">300 Light</SelectItem>
                  <SelectItem value="400">400 Normal</SelectItem>
                  <SelectItem value="500">500 Medium</SelectItem>
                  <SelectItem value="600">600 SemiBold</SelectItem>
                  <SelectItem value="700">700 Bold</SelectItem>
                  <SelectItem value="800">800 ExtraBold</SelectItem>
                  <SelectItem value="900">900 Black</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        )}

        {/* Current selection info */}
        <div className="px-2.5 py-1.5 border-t shrink-0" style={{ borderColor: 'var(--terminal-panel-border)' }}>
          <div className="text-[9px] truncate" style={{ color: 'var(--terminal-panel-muted)' }}>
            {footerLabel}
          </div>
        </div>
      </div>

      {/* Custom Theme Editor Modal */}
      {editingTheme && (
        <CustomThemeModal
          open={!!editingTheme}
          theme={editingTheme}
          isNew={isNewTheme}
          onSave={(theme) => {
            if (isNewTheme) {
              addTheme(theme);
              onThemeChange(theme.id);
            } else {
              updateTheme(theme.id, theme);
              if (currentThemeId === theme.id) {
                onThemeChange(theme.id);
              }
            }
            setEditingTheme(null);
            setIsNewTheme(false);
          }}
          onDelete={isNewTheme ? undefined : handleEditorDelete}
          onCancel={() => { setEditingTheme(null); setIsNewTheme(false); }}
        />
      )}
    </>
  );
};

export const ThemeSidePanel = memo(ThemeSidePanelInner);
ThemeSidePanel.displayName = 'ThemeSidePanel';