import React from 'react';
import ReactDOM from 'react-dom/client';
import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import App, { wizardSteps } from './App';
import UploadStep from './components/UploadStep';
import CropStep from './components/CropStep';
import BulkCropStep from './components/BulkCropStep';
import OcrStep from './components/OcrStep';
import EpubStep from './components/EpubStep';
import DownloadStep from './components/DownloadStep';
import Login from './pages/auth/Login';
import Register from './pages/auth/Register';
import ForgotPassword from './pages/auth/ForgotPassword';

const theme = createTheme({
  palette: {
    mode: 'light',
    primary: {
      main: '#E7C179',
      contrastText: '#30281B',
    },
    secondary: {
      main: '#29615D',
    },
    background: {
      default: '#F9F7F4',
      paper: '#FAF8F6',
    },
    text: {
      primary: '#30281B',
      secondary: '#666057',
    },
    success: {
      main: '#88aaa8ff',
      contrastText: '#30281B',
    },
  },
  shape: {
    borderRadius: 16,
  },
  components: {
    MuiBox: {
      styleOverrides: {
        root: {
          color: '#EDEFF2',
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          fontWeight: 600,
          borderRadius: 999,
          textTransform: 'none',
          boxShadow: '0 6px 20px rgba(231, 193, 121, 0.35)',
          transition: 'background-color 0.2s ease, box-shadow 0.2s ease',
          '&:hover': {
            backgroundColor: '#d7b16a',
            boxShadow: 'none',
          },
        },
      },
    },
    MuiPaper: {
      styleOverrides: {
        root: {
          backgroundColor: '#FFFFFF',
          border: '1px solid #D2D2D2',
          borderRadius: '16px',
          boxShadow: '0 10px 18px rgba(0,0,0,0.06)',
        },
      },
    },
    MuiAlert: {
      styleOverrides: {
        root: {
          backgroundColor: '#EDEFF2',
          color: '#30281B',
          borderRadius: 16,
        },
      },
    },
    MuiSvgIcon: {
      styleOverrides: {
        root: {
          color: '#B5AD9A',
        },
      },
    },
    MuiStepIcon: {
      styleOverrides: {
        text: {
          fill: '#F9F7F3',
          fontWeight: 700,
        },
        root: {
          color: '#B5AD9A',
          '&.Mui-active': {
            color: '#E7C179',
          },
          '&.Mui-completed': {
            color: '#E7C179',
          },
        },
      },
    },
    MuiStepLabel: {
      styleOverrides: {
        label: {
          backgroundColor: '#FFFFFF',
          border: '1px solid #D2D2D2',
          borderRadius: '16px',
          padding: '4px 10px',
          color: '#1C1815',
          boxShadow: '0 6px 12px rgba(0,0,0,0.05)',
          fontWeight: 600,
          '&.Mui-disabled': {
            color: '#B5AD9A',
            opacity: 0.8,
          },
        },
      },
    },
  },
});

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      { index: true, element: <UploadStep /> },
      { path: wizardSteps[1].path, element: <CropStep /> },
      { path: wizardSteps[2].path, element: <BulkCropStep /> },
      { path: wizardSteps[3].path, element: <OcrStep /> },
      { path: wizardSteps[4].path, element: <EpubStep /> },
      { path: wizardSteps[5].path, element: <DownloadStep /> },
    ],
  },
  { path: '/login', element: <Login /> },
  { path: '/register', element: <Register /> },
  { path: '/forgot-password', element: <ForgotPassword /> },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <RouterProvider router={router} />
    </ThemeProvider>
  </React.StrictMode>,
);
