"use client";

import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import { alpha, useTheme } from "@mui/material/styles";

const SIDEBAR_WIDTH = 288;

type LayoutSectionProps = {
  children: ReactNode;
};

type MobileSidebarProps = LayoutSectionProps & {
  open: boolean;
  onClose: () => void;
};

export function PageContainer({ children }: LayoutSectionProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        minHeight: "100vh",
        display: "flex",
        bgcolor: theme.palette.background.default,
        color: theme.palette.text.primary,
      }}
    >
      {children}
    </Box>
  );
}

export function SidebarSection({ children }: LayoutSectionProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        width: SIDEBAR_WIDTH,
        display: { xs: "none", lg: "flex" },
        flexShrink: 0,
        flexDirection: "column",
        bgcolor: theme.palette.background.paper,
        borderRight: `1px solid ${theme.palette.divider}`,
        position: "sticky",
        top: 0,
        height: "100vh",
        zIndex: 1000,
      }}
    >
      {children}
    </Box>
  );
}

export function ContentSection({ children }: LayoutSectionProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        flex: 1,
        minWidth: 0,
        minHeight: "100vh",
        display: "flex",
        flexDirection: "column",
        bgcolor: theme.palette.background.default,
      }}
    >
      {children}
    </Box>
  );
}

export function HeaderSection({ children }: LayoutSectionProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        position: "sticky",
        top: 0,
        zIndex: 1000,
        minHeight: 64,
        bgcolor: alpha(theme.palette.background.paper, 0.96),
        backdropFilter: "blur(8px)",
        borderBottom: `1px solid ${theme.palette.divider}`,
      }}
    >
      {children}
    </Box>
  );
}

export function MobileSidebar({ open, onClose, children }: MobileSidebarProps) {
  const theme = useTheme();

  return (
    <Drawer
      open={open}
      onClose={onClose}
      ModalProps={{ keepMounted: true }}
      sx={{
        display: { xs: "block", lg: "none" },
        zIndex: 1000,
        "& .MuiDrawer-paper": {
          width: SIDEBAR_WIDTH,
          bgcolor: theme.palette.background.paper,
          color: theme.palette.text.primary,
          borderRight: `1px solid ${theme.palette.divider}`,
          backgroundImage: "none",
          zIndex: 1000,
        },
      }}
    >
      <Box sx={{ minHeight: "100%", bgcolor: theme.palette.background.paper }}>
        {children}
      </Box>
    </Drawer>
  );
}

export function MainContent({ children }: LayoutSectionProps) {
  const theme = useTheme();

  return (
    <Box
      component="main"
      sx={{
        flex: 1,
        minWidth: 0,
        bgcolor: theme.palette.background.default,
        color: theme.palette.text.primary,
      }}
    >
      {children}
    </Box>
  );
}