/**
 * @ai-summary Material Design 3 theme configuration for MotoVaultPro
 * Supports both light and dark modes
 */

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

// Brand colors
const primaryHex = '#7A212A';

// Dark theme palette (Ferrari-inspired)
const nero = '#231F1C';       // Nero Daytona - page base
const avus = '#F2F3F6';       // Bianco Avus - primary text
const titanio = '#A8B8C0';    // Grigio Titanio - secondary text

// Shared theme options
const baseThemeOptions: ThemeOptions = {
  shape: {
    borderRadius: 16
  },
  typography: {
    fontFamily:
      'Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif',
    h3: {
      fontWeight: 700,
      letterSpacing: -0.5
    },
  },
  components: {
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 20,
        },
      },
    },
    MuiButton: {
      variants: [
        // Custom MD3-like "tonal" button
        {
          props: { variant: 'tonal' as any },
          style: ({ theme }) => ({
            backgroundColor: alpha(theme.palette.primary.main, 0.12),
            color: theme.palette.primary.main,
            borderRadius: 999,
            textTransform: 'none',
            fontWeight: 600,
            paddingInline: 18,
            '&:hover': {
              backgroundColor: alpha(theme.palette.primary.main, 0.18)
            },
          }),
        },
        {
          props: { variant: 'contained' },
          style: ({ theme }) => ({
            borderRadius: 999,
            textTransform: 'none',
            fontWeight: 700,
            paddingInline: 20,
            boxShadow: '0 8px 24px ' + alpha(theme.palette.primary.main, 0.25),
          }),
        },
      ],
    },
    MuiBottomNavigationAction: {
      styleOverrides: {
        root: {
          minWidth: 0,
          paddingTop: 8,
          paddingBottom: 8,
          '&.Mui-selected': {
            color: primaryHex
          },
        },
      },
    },
  },
};

// Light theme
export const md3LightTheme = createTheme({
  ...baseThemeOptions,
  palette: {
    mode: 'light',
    primary: { main: primaryHex },
    secondary: { main: alpha(primaryHex, 0.8) },
    background: {
      default: '#F8F5F3',
      paper: '#FFFFFF'
    },
    text: {
      primary: '#1a1a1a',
      secondary: '#666666',
    },
  },
  components: {
    ...baseThemeOptions.components,
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 20,
          boxShadow: '0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06)',
        },
      },
    },
    MuiBottomNavigation: {
      styleOverrides: {
        root: {
          borderTop: '1px solid rgba(16,24,40,.08)',
          background: alpha('#FFFFFF', 0.8),
          backdropFilter: 'blur(8px)',
        },
      },
    },
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-notchedOutline': {
            borderColor: '#9ca3af', // gray-400
            borderWidth: '1px',
          },
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: '#6b7280', // gray-500 - 4.5:1 contrast
            borderWidth: '1.5px',
          },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: '#7A212A', // primary - 6.3:1 contrast
            borderWidth: '2px',
          },
          '&.Mui-error .MuiOutlinedInput-notchedOutline': {
            borderColor: '#dc2626', // red-600 - 5.5:1 contrast
          },
          '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
            borderColor: '#e5e7eb', // gray-200
          },
        },
      },
    },
    MuiMenuItem: {
      styleOverrides: {
        root: {
          minHeight: 44, // Mobile touch target requirement
          fontSize: '16px', // Prevent iOS zoom on focus
          '&:hover': {
            backgroundColor: alpha('#7A212A', 0.08),
          },
          '&.Mui-selected': {
            backgroundColor: alpha('#7A212A', 0.12),
            fontWeight: 500,
            '&:hover': {
              backgroundColor: alpha('#7A212A', 0.16),
            },
          },
        },
      },
    },
    MuiSelect: {
      styleOverrides: {
        root: {
          minHeight: '44px', // Mobile touch target
          fontSize: '16px', // Prevent iOS zoom
        },
        icon: {
          color: '#6b7280', // gray-500 for better visibility
        },
      },
    },
  },
});

// Dark theme
export const md3DarkTheme = createTheme({
  ...baseThemeOptions,
  palette: {
    mode: 'dark',
    primary: { main: primaryHex },
    secondary: { main: alpha(primaryHex, 0.8) },
    background: {
      default: nero,
      paper: '#1D1A18'
    },
    text: {
      primary: avus,
      secondary: titanio,
    },
  },
  components: {
    ...baseThemeOptions.components,
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 20,
          boxShadow: '0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.3)',
          border: '1px solid rgba(255,255,255,0.1)',
        },
      },
    },
    MuiBottomNavigation: {
      styleOverrides: {
        root: {
          borderTop: '1px solid rgba(255,255,255,.1)',
          background: alpha(nero, 0.9),
          backdropFilter: 'blur(8px)',
        },
      },
    },
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-notchedOutline': {
            borderColor: 'rgba(255,255,255,0.23)',
            borderWidth: '1px',
          },
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: 'rgba(255,255,255,0.4)',
            borderWidth: '1.5px',
          },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: '#7A212A', // primary
            borderWidth: '2px',
          },
        },
      },
    },
    MuiMenuItem: {
      styleOverrides: {
        root: {
          minHeight: 44, // Mobile touch target requirement
          fontSize: '16px', // Prevent iOS zoom on focus
          '&:hover': {
            backgroundColor: alpha('#7A212A', 0.08),
          },
          '&.Mui-selected': {
            backgroundColor: alpha('#7A212A', 0.12),
            fontWeight: 500,
            '&:hover': {
              backgroundColor: alpha('#7A212A', 0.16),
            },
          },
        },
      },
    },
    MuiSelect: {
      styleOverrides: {
        root: {
          minHeight: '44px', // Mobile touch target
          fontSize: '16px', // Prevent iOS zoom
        },
        icon: {
          color: titanio, // Grigio Titanio for visibility on dark
        },
      },
    },
  },
});

// Default export for backward compatibility
export const md3Theme = md3LightTheme;
