"use client";

import type { ReactNode, WheelEvent } from "react";

import Paper from "@mui/material/Paper";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import { alpha, useTheme } from "@mui/material/styles";

export type TableColumn = {
    label: string;
    width?: string | number;
};

type SectionTableProps = {
    columns: TableColumn[];
    children: ReactNode;
    minWidth?: number;
};

export function SectionTable({
    columns,
    children,
    minWidth = 900,
}: SectionTableProps) {
    const theme = useTheme();

    const headerBg =
        theme.palette.mode === "dark"
            ? alpha(theme.palette.primary.main, 0.18)
            : "#dbeeff";

    const borderColor =
        theme.palette.mode === "dark"
            ? alpha(theme.palette.common.white, 0.08)
            : "#eef2f6";

    const handleMouseWheelScroll = (event: WheelEvent<HTMLDivElement>) => {
        const container = event.currentTarget;

        const maxScrollLeft = container.scrollWidth - container.clientWidth;

        if (maxScrollLeft <= 0) return;

        const isHorizontalWheel = Math.abs(event.deltaX) > Math.abs(event.deltaY);

        if (isHorizontalWheel) return;

        const isScrollingLeft = event.deltaY < 0;
        const isScrollingRight = event.deltaY > 0;

        const isAtStart = container.scrollLeft <= 0;
        const isAtEnd = container.scrollLeft >= maxScrollLeft - 1;

        if ((isScrollingLeft && isAtStart) || (isScrollingRight && isAtEnd)) {
            return;
        }

        event.preventDefault();
        container.scrollLeft += event.deltaY;
    };

    return (
        <TableContainer
            component={Paper}
            elevation={0}
            onWheel={handleMouseWheelScroll}
            sx={{
                width: "100%",
                maxWidth: "100%",
                borderRadius: "12px",
                border: `1px solid ${borderColor}`,
                overflowX: "auto",
                overflowY: "hidden",
                bgcolor: theme.palette.background.paper,
                cursor: "default",

                // Hide scrollbar but keep mouse wheel horizontal scroll working
                scrollbarWidth: "none",
                msOverflowStyle: "none",
                "&::-webkit-scrollbar": {
                    display: "none",
                },
            }}
        >
            <Table
                sx={{
                    minWidth,
                    width: "100%",
                    tableLayout: "fixed",
                }}
            >
                <TableHead>
                    <TableRow>
                        {columns.map((column) => (
                            <TableCell
                                key={column.label}
                                sx={{
                                    width: column.width,
                                    minWidth: column.width,
                                    bgcolor: headerBg,
                                    color: theme.palette.text.secondary,
                                    fontSize: 13,
                                    fontWeight: 500,
                                    borderColor,
                                    height: 56,
                                    px: 2,
                                    whiteSpace: "nowrap",
                                }}
                            >
                                {column.label}
                            </TableCell>
                        ))}
                    </TableRow>
                </TableHead>

                <TableBody>{children}</TableBody>
            </Table>
        </TableContainer>
    );
}

export function BodyCell({
    children,
    width,
}: {
    children: ReactNode;
    width?: string | number;
}) {
    const theme = useTheme();

    return (
        <TableCell
            sx={{
                width,
                minWidth: width,
                maxWidth: width,
                height: 64,
                px: 2,
                fontSize: 13,
                color: theme.palette.text.primary,
                borderColor:
                    theme.palette.mode === "dark"
                        ? alpha(theme.palette.common.white, 0.08)
                        : "#eef2f6",
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis",
            }}
            title={typeof children === "string" ? children : undefined}
        >
            {children}
        </TableCell>
    );
}