import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { useMemo } from "react";
import { PRIMARY_COLORS, useThemeStore } from "../store/ThemeStore";

export function MuiThemeProvider({ children }) {
  const { theme, primaryColor } = useThemeStore();
  const isDark = theme === "dark";

  // Obtener variantes del color primario
  const colorObj =
    PRIMARY_COLORS.find((c) => c.value === primaryColor) || PRIMARY_COLORS[0];
  const PRIMARY_COLOR = colorObj.value;
  const PRIMARY_LIGHT = colorObj.light;
  const PRIMARY_DARK = colorObj.dark;

  const muiTheme = useMemo(
    () =>
      createTheme({
        palette: {
          mode: isDark ? "dark" : "light",
          primary: {
            main: PRIMARY_COLOR,
            light: PRIMARY_LIGHT,
            dark: PRIMARY_DARK,
          },
          secondary: {
            main: "#8b5cf6",
          },
          background: {
            default: isDark ? "#0a0a0a" : "#f8fafc",
            paper: isDark ? "#141414" : "#ffffff",
          },
          text: {
            primary: isDark ? "#f1f5f9" : "#1e293b",
            secondary: isDark ? "#94a3b8" : "#64748b",
          },
          divider: isDark ? "#1e293b" : "#e2e8f0",
          // Usar action.hover para fondos sutiles en lugar de grey.50
          action: {
            hover: isDark ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.04)",
            selected: isDark
              ? "rgba(255, 255, 255, 0.08)"
              : "rgba(0, 0, 0, 0.08)",
          },
        },
        typography: {
          fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
        },
        components: {
          MuiDataGrid: {
            styleOverrides: {
              root: {
                border: "none",
                "& .MuiDataGrid-cell:focus": {
                  outline: "none",
                },
                "& .MuiDataGrid-columnHeader:focus": {
                  outline: "none",
                },
              },
              columnHeaders: {
                backgroundColor: isDark ? "#141414" : "#f1f5f9",
                borderBottom: `1px solid ${isDark ? "#1e293b" : "#e2e8f0"}`,
              },
            },
          },
          MuiPaper: {
            styleOverrides: {
              root: {
                backgroundImage: "none",
                border: `1px solid ${isDark ? "#1e293b" : "#e2e8f0"}`,
                borderRadius: 8,
              },
            },
          },
          MuiCard: {
            styleOverrides: {
              root: {
                border: `1px solid ${isDark ? "#1e293b" : "#e2e8f0"}`,
                borderRadius: 8,
              },
            },
          },
          MuiTabs: {
            styleOverrides: {
              root: {
                backgroundColor: isDark ? "#0f0f0f" : "#f1f5f9",
                borderRadius: "8px 8px 0 0",
              },
              indicator: {
                backgroundColor: PRIMARY_COLOR,
                height: 3,
              },
            },
          },
          MuiTab: {
            styleOverrides: {
              root: {
                color: isDark ? "#94a3b8" : "#64748b",
                fontWeight: 500,
                "&.Mui-selected": {
                  color: PRIMARY_COLOR,
                  fontWeight: 600,
                },
                "&:hover": {
                  backgroundColor: isDark
                    ? "rgba(99, 102, 241, 0.08)"
                    : "rgba(99, 102, 241, 0.04)",
                },
              },
            },
          },
          MuiChip: {
            styleOverrides: {
              root: {
                fontWeight: 500,
              },
            },
          },
          MuiTableCell: {
            styleOverrides: {
              root: {
                borderColor: isDark ? "#1e293b" : "#e2e8f0",
              },
              head: {
                backgroundColor: isDark ? "#141414" : "#f1f5f9",
                fontWeight: 600,
                color: isDark ? "#e2e8f0" : "#1e293b",
              },
            },
          },
          MuiTableHead: {
            styleOverrides: {
              root: {
                backgroundColor: isDark ? "#141414" : "#f1f5f9",
              },
            },
          },
          MuiButton: {
            styleOverrides: {
              contained: {
                boxShadow: "none",
                "&:hover": {
                  boxShadow: "0 4px 12px rgba(99, 102, 241, 0.3)",
                },
              },
            },
          },
          MuiTextField: {
            styleOverrides: {
              root: {
                "& .MuiOutlinedInput-root": {
                  "&:hover .MuiOutlinedInput-notchedOutline": {
                    borderColor: PRIMARY_COLOR,
                  },
                },
              },
            },
          },
        },
      }),
    [isDark, PRIMARY_COLOR, PRIMARY_LIGHT, PRIMARY_DARK],
  );

  return (
    <ThemeProvider theme={muiTheme}>
      <CssBaseline enableColorScheme />
      {children}
    </ThemeProvider>
  );
}