import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { UserProvider } from "./hooks/useUser";
import "./index.css";
import "./plugins/firebase.js";
import "./plugins/supabase.js";
import { AuthProvider } from "./contexts/AuthContext";
import { DimensionProvider } from "./contexts/DimensionContext";
import createCache from "@emotion/cache";
import { CacheProvider, ThemeProvider } from "@emotion/react";
import { createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import rtlPlugin from "stylis-plugin-rtl";
import { router } from "./router.js";
import { ConfirmProvider } from "material-ui-confirm";
import { ToastContainer } from "react-toastify";
import { initAnalytics } from "./plugins/analytics";
import "react-toastify/dist/ReactToastify.css";

// Create rtl cache
const cacheRtl = createCache({
  key: "muirtl",
  stylisPlugins: [rtlPlugin],
});

const theme = createTheme({
  direction: "rtl",
  shape: {
    borderRadius: 14,
  },
  spacing: 8,
  typography: {
    fontSize: 14,
    fontFamily: [
      "Heebo",
      "Rubik",
      "Open Sans",
      "sans-serif",
      "Arial",
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(","),
    h1: { fontSize: "2.5rem", fontWeight: 800, lineHeight: 1.15, letterSpacing: "-0.015em" },
    h2: { fontSize: "2rem", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.01em" },
    h3: { fontSize: "1.5rem", fontWeight: 700, lineHeight: 1.25 },
    h4: { fontSize: "1.25rem", fontWeight: 700, lineHeight: 1.35 },
    h5: { fontSize: "1.05rem", fontWeight: 600, lineHeight: 1.4 },
    h6: { fontSize: "0.95rem", fontWeight: 600, lineHeight: 1.45 },
    subtitle1: { fontSize: "0.95rem", fontWeight: 500, lineHeight: 1.45 },
    subtitle2: { fontSize: "0.85rem", fontWeight: 500, lineHeight: 1.45 },
    body1: { fontSize: "0.95rem", lineHeight: 1.5 },
    body2: { fontSize: "0.85rem", lineHeight: 1.5 },
    caption: { fontSize: "0.75rem", lineHeight: 1.45, fontWeight: 500 },
    button: { textTransform: "none", fontWeight: 600, letterSpacing: "0" },
  },
  palette: {
    primary: { main: "#16608D", contrastText: "#ffffff" },
    secondary: { main: "#1D2B4E", contrastText: "#ffffff" },
    info: { main: "#0E9CB5", contrastText: "#ffffff" },
    success: { main: "#0B8F62", contrastText: "#ffffff" },
    warning: { main: "#B67B20", contrastText: "#ffffff" },
    error: { main: "#B3403D", contrastText: "#ffffff" },
    background: {
      default: "#F2F6FB",
      paper: "#FFFFFFCC",
    },
    text: {
      primary: "#15213C",
      secondary: "#44536E",
    },
    divider: "#D6E2F0",
  },
  transitions: {
    duration: {
      shortest: 120,
      shorter: 170,
      short: 220,
      standard: 280,
      complex: 360,
      enteringScreen: 220,
      leavingScreen: 180,
    },
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        ":root": {
          colorScheme: "light",
        },
      },
    },
    MuiPaper: {
      styleOverrides: {
        root: {
          backdropFilter: "blur(10px)",
          border: "1px solid rgba(255,255,255,0.7)",
          boxShadow: "0 16px 32px rgba(14, 36, 67, 0.08)",
          borderRadius: 14,
        },
      },
    },
    MuiButton: {
      defaultProps: {
        disableElevation: true,
      },
      styleOverrides: {
        root: {
          borderRadius: 12,
          minHeight: 40,
          transition: "transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease",
        },
        contained: {
          boxShadow: "0 8px 20px rgba(22, 96, 141, 0.26)",
        },
      },
    },
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: 12,
          backgroundColor: "rgba(255, 255, 255, 0.85)",
          transition: "box-shadow 180ms ease, border-color 180ms ease",
          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: "#16608D",
            borderWidth: 2,
          },
        },
      },
    },
    MuiInputLabel: {
      styleOverrides: {
        root: {
          fontWeight: 500,
        },
      },
    },
    MuiMenu: {
      styleOverrides: {
        paper: {
          borderRadius: 14,
        },
      },
    },
    MuiChip: {
      styleOverrides: {
        root: {
          borderRadius: 999,
          fontWeight: 600,
        },
      },
    },
  },
});

initAnalytics();

ReactDOM.createRoot(document.getElementById("root")!).render(
  <CacheProvider value={cacheRtl}>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <ConfirmProvider
        defaultOptions={{
          title: "בטוח?",
          description: "פעולה זו לא ניתנת לביטול",
          confirmationText: "מחיקה",
          cancellationText: "ביטול",
          confirmationButtonProps: {
            variant: "contained",
            color: "error",
          },
          cancellationButtonProps: {
            color: "secondary",
          },
        }}
      >
        <AuthProvider>
          <UserProvider>
            <DimensionProvider>
              <RouterProvider router={router} />
              <ToastContainer
                position="bottom-center"
                autoClose={2000}
                hideProgressBar={true}
                newestOnTop
                closeButton={false}
                rtl
                pauseOnHover
                pauseOnFocusLoss={false}
                limit={3}
                toastClassName="toast-modern"
                className="toast-modern__container"
              />
            </DimensionProvider>
          </UserProvider>
        </AuthProvider>
      </ConfirmProvider>
    </ThemeProvider>
  </CacheProvider>
);