import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import Switch from "@mui/material/Switch";
import Typography from "@mui/material/Typography";
import { alpha } from "@mui/material/styles";

import type { LanguageCode } from "../types/notification-setting-types";

type NotificationSettingRowProps = {
  icon: ReactNode;
  title: string;
  description: string;
  checked: boolean;
  disabled?: boolean;
  language?: LanguageCode;
  titleFontSizeOffset?: number;
  onChange: (checked: boolean) => void;
};

const notificationSwitchSx = {
  width: 36,
  height: 20,
  p: 0,
  flexShrink: 0,
  overflow: "visible",

  "& .MuiSwitch-switchBase": {
    p: "2px",
    transitionDuration: "180ms",

    "&.Mui-checked": {
      transform: "translateX(16px)",
      color: "#FFFFFF",

      "& + .MuiSwitch-track": {
        bgcolor: "primary.main",
        opacity: 1,
      },
    },

    "&.Mui-disabled": {
      color: "#F5F5F5",

      "& + .MuiSwitch-track": {
        opacity: 0.35,
      },
    },
  },

  "& .MuiSwitch-thumb": {
    width: 16,
    height: 16,
    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.28)",
  },

  "& .MuiSwitch-track": {
    borderRadius: "10px",
    bgcolor: "action.disabled",
    opacity: 0.65,
  },
} as const;

export function NotificationSettingRow({
  icon,
  title,
  description,
  checked,
  disabled = false,
  language = "en",
  titleFontSizeOffset = 0,
  onChange,
}: NotificationSettingRowProps) {
  const isKhmer = language === "kh";

  const fontFamily = isKhmer
    ? '"Battambang", "Kantumruy Pro", sans-serif'
    : '"Inter", "Segoe UI", Arial, sans-serif';

  const baseTitleFontSize = isKhmer ? 13.5 : 13;

  return (
    <Box
      sx={{
        minHeight: isKhmer ? 80 : 70,
        px: 2,
        py: isKhmer ? 1.1 : 1,
        display: "flex",
        alignItems: "center",
        gap: 1.5,
        opacity: disabled ? 0.55 : 1,
        borderBottom: "1px solid",
        borderColor: "divider",

        "&:last-child": {
          borderBottom: 0,
        },

        "&:hover": {
          bgcolor: disabled
            ? "transparent"
            : "action.hover",
        },
      }}
    >
      {icon}

      <Box sx={{ minWidth: 0, flex: 1 }}>
        <Typography
          sx={{
            color: "text.primary",
            fontFamily,
            fontSize:
              baseTitleFontSize +
              titleFontSizeOffset,
            fontWeight: 600,
            lineHeight: isKhmer ? 1.7 : 1.4,
          }}
        >
          {title}
        </Typography>

        <Typography
          sx={{
            mt: isKhmer ? 0.05 : 0.25,
            color: "text.secondary",
            fontFamily,
            fontSize: isKhmer ? 12 : 11.5,
            lineHeight: isKhmer ? 1.8 : 1.5,
          }}
        >
          {description}
        </Typography>
      </Box>

      <Switch
        checked={checked}
        disabled={disabled}
        onChange={(_, value) => onChange(value)}
        slotProps={{
          input: {
            "aria-label": title,
          },
        }}
        sx={notificationSwitchSx}
      />
    </Box>
  );
}