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

// Map existing CSS variable tokens to MUI palette via getComputedStyle at runtime (for SSR fallback provide defaults)
const cssVar = (name: string, fallback: string) => {
  if (typeof window === 'undefined') return fallback;
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  return v || fallback;
};

export const buildTheme = () => {
  const mode: 'light' | 'dark' = (typeof document !== 'undefined' && document.documentElement.classList.contains('dark')) ? 'dark' : 'light';
  const primaryMain = cssVar('--color-accent', '#00aeef');
  const bgDefault = cssVar('--color-background', mode === 'dark' ? '#0f1115' : '#f1f5f9');
  const bgPaper = cssVar('--color-surface', mode === 'dark' ? '#1c232d' : '#ffffff');
  const textPrimary = cssVar('--color-fg', mode === 'dark' ? '#e2e8f0' : '#0f172a');
  const textSecondary = cssVar('--color-fg-muted', mode === 'dark' ? '#94a3b8' : '#475569');

  return createTheme({
    palette: {
      mode,
      primary: { main: primaryMain },
      background: { default: bgDefault, paper: bgPaper },
      text: { primary: textPrimary, secondary: textSecondary },
      divider: cssVar('--color-border', mode === 'dark' ? '#334155' : '#e2e8f0'),
    },
    shape: { borderRadius: 8 },
    typography: {
      fontFamily: 'Roboto, Arial, Helvetica, sans-serif',
      button: { textTransform: 'none', fontWeight: 600 },
      fontSize: 14,
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: { borderRadius: 8 },
          containedPrimary: {
            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
          }
        }
      },
      MuiPaper: {
        styleOverrides: {
          root: { backgroundImage: 'none' }
        }
      }
    }
  });
};

export const muiTheme = buildTheme();