/**
 * MUI 主题配置
 *
 * 匹配 Metona 暗色/亮色配色方案。
 * @see docs/MetonaAI-Desktop UI UX 设计集成方案.html — 主题系统
 */

import { createTheme, type ThemeOptions } from '@mui/material/styles';

const darkTheme: ThemeOptions = {
  palette: {
    mode: 'dark',
    primary: { main: '#818cf8' },
    secondary: { main: '#252836' },
    error: { main: '#f87171' },
    warning: { main: '#fbbf24' },
    info: { main: '#22d3ee' },
    success: { main: '#34d399' },
    background: {
      default: '#0f1117',
      paper: '#1a1d27',
    },
    text: {
      primary: '#e1e4ed',
      secondary: '#64748b',
      disabled: '#8b8fa7',
    },
    divider: '#2a2d3a',
  },
  typography: {
    fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif`,
    fontSize: 13,
    h6: { fontSize: 14, fontWeight: 600 },
    body2: { fontSize: 12, color: '#8b8fa7' },
    caption: { fontSize: 11, color: '#8b8fa7' },
  },
  shape: { borderRadius: 10 },
  components: {
    MuiButton: {
      styleOverrides: {
        root: { textTransform: 'none' as const, fontWeight: 500, fontSize: 12, borderRadius: 8 },
        sizeSmall: { height: 28, padding: '0 12px' },
      },
    },
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            fontSize: 12,
            borderRadius: 8,
            backgroundColor: '#252836',
            '& fieldset': { borderColor: '#2a2d3a' },
            '&:hover fieldset': { borderColor: '#818cf8' },
            '&.Mui-focused fieldset': { borderColor: '#818cf8' },
          },
          '& .MuiInputLabel-root': { fontSize: 12 },
        },
      },
    },
    MuiDialog: {
      styleOverrides: {
        paper: { backgroundImage: 'none', backgroundColor: '#1a1d27', border: '1px solid #2a2d3a' },
      },
    },
    MuiSelect: {
      styleOverrides: {
        root: { fontSize: 12, borderRadius: 8, backgroundColor: '#252836' },
      },
    },
    MuiTabs: {
      styleOverrides: {
        root: { minHeight: 36 },
        indicator: { height: 2 },
      },
    },
    MuiTab: {
      styleOverrides: {
        root: { textTransform: 'none' as const, fontSize: 12, minHeight: 36 },
      },
    },
    MuiTooltip: {
      styleOverrides: { tooltip: { fontSize: 11, backgroundColor: '#252836', border: '1px solid #2a2d3a' } },
    },
    MuiMenu: {
      styleOverrides: { paper: { backgroundImage: 'none', backgroundColor: '#1a1d27', border: '1px solid #2a2d3a' } },
    },
    MuiMenuItem: {
      styleOverrides: { root: { fontSize: 12 } },
    },
    MuiBadge: {
      styleOverrides: { standard: { fontSize: 10 } },
    },
    MuiCard: {
      styleOverrides: { root: { backgroundImage: 'none', backgroundColor: '#1a1d27', border: '1px solid #2a2d3a' } },
    },
    MuiSlider: {
      styleOverrides: { root: { color: '#818cf8' } },
    },
    MuiSwitch: {
      styleOverrides: { root: { '& .MuiSwitch-switchBase.Mui-checked': { color: '#818cf8' } } },
    },
    MuiCheckbox: {
      styleOverrides: { root: { color: '#8b8fa7', '&.Mui-checked': { color: '#818cf8' } } },
    },
    MuiDivider: {
      styleOverrides: { root: { borderColor: '#2a2d3a' } },
    },
    MuiPaper: {
      styleOverrides: { root: { backgroundImage: 'none' } },
    },
    MuiChip: {
      styleOverrides: { root: { fontSize: 10 } },
    },
    MuiIconButton: {
      styleOverrides: { root: { borderRadius: 8 } },
    },
    MuiAvatar: {
      styleOverrides: { root: { width: 32, height: 32, fontSize: 14 } },
    },
  },
};

const lightTheme: ThemeOptions = {
  ...darkTheme,
  palette: {
    mode: 'light',
    primary: { main: '#6366f1' },
    secondary: { main: '#f1f5f9' },
    error: { main: '#dc2626' },
    warning: { main: '#d97706' },
    info: { main: '#0891b2' },
    success: { main: '#059669' },
    background: { default: '#ffffff', paper: '#f8fafc' },
    text: { primary: '#0f172a', secondary: '#334155', disabled: '#64748b' },
    divider: '#e2e8f0',
  },
  components: {
    ...darkTheme.components,
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            fontSize: 12, borderRadius: 8, backgroundColor: '#f1f5f9',
            '& fieldset': { borderColor: '#e2e8f0' },
            '&:hover fieldset': { borderColor: '#6366f1' },
            '&.Mui-focused fieldset': { borderColor: '#6366f1' },
          },
          '& .MuiInputLabel-root': { fontSize: 12 },
        },
      },
    },
    MuiDialog: {
      styleOverrides: { paper: { backgroundImage: 'none', backgroundColor: '#f8fafc', border: '1px solid #e2e8f0' } },
    },
    MuiMenu: {
      styleOverrides: { paper: { backgroundImage: 'none', backgroundColor: '#f8fafc', border: '1px solid #e2e8f0' } },
    },
    MuiTooltip: {
      styleOverrides: { tooltip: { fontSize: 11, backgroundColor: '#f1f5f9', border: '1px solid #e2e8f0', color: '#0f172a' } },
    },
    MuiSelect: {
      styleOverrides: { root: { fontSize: 12, borderRadius: 8, backgroundColor: '#f1f5f9' } },
    },
  },
};

export const metonaDarkTheme = createTheme(darkTheme);
export const metonaLightTheme = createTheme(lightTheme);
