import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import darkPreview from 'src/assets/images/theme-preview-dark.svg';
import lightPreview from 'src/assets/images/theme-preview-light.svg';
import systemPreview from 'src/assets/images/theme-preview-system.svg';
import { THEMES } from 'src/constants/env';
import useThemeMode, { type ThemeMode } from 'src/hooks/useThemeMode';
import { useLokaliseTranslation } from 'src/utils/i18n';

type ThemeCardProps = {
  label: string;
  previewSrc: string;
  selected: boolean;
  onClick: () => void;
  // When true, the card fits its content instead of stretching to fill the row.
  fitContent?: boolean;
};

const ThemeCard = ({
  label,
  previewSrc,
  selected,
  onClick,
  fitContent = false,
}: ThemeCardProps) => {
  const theme = useTheme();
  return (
    <Box
      component="button"
      onClick={onClick}
      sx={{
        flex: fitContent ? '0 0 auto' : 1,
        width: fitContent ? 128 : undefined,
        minWidth: 0,
        minHeight: fitContent ? 112 : 76,
        borderRadius: 2,
        border: `${fitContent ? 1.5 : 1}px solid ${selected ? theme.palette.primary.main : theme.palette.new.border.neutral.default}`,
        bgcolor: selected
          ? theme.palette.new.background.elements.brand
          : theme.palette.new.background.elements.default,
        cursor: 'pointer',
        p: 1,
        display: 'flex',
        flexDirection: 'column',
        gap: fitContent ? 1 : 0.25,
        alignItems: 'center',
        justifyContent: fitContent ? 'flex-start' : 'center',
      }}
    >
      <Typography
        variant={fitContent ? 'globalS' : 'globalXS'}
        sx={{
          textAlign: 'center',
          width: '100%',
          fontWeight: 'fontWeightSemiBold',
        }}
      >
        {label}
      </Typography>
      <Box
        component="img"
        src={previewSrc}
        alt={label}
        sx={{
          width: '100%',
          maxWidth: fitContent ? 'none' : 70,
          borderRadius: 1,
        }}
      />
    </Box>
  );
};

type AppearanceSectionProps = {
  // When true, render only the theme cards (no grey container or title).
  // Used inside the welcome modal; the drawer keeps the full section.
  bare?: boolean;
};

const AppearanceSection = ({ bare = false }: AppearanceSectionProps) => {
  const { t } = useLokaliseTranslation('settings');
  const { selectedMode, previewThemeMode } = useThemeMode();

  const cards: { mode: ThemeMode; label: string; previewSrc: string }[] = [
    {
      mode: THEMES.LIGHT as ThemeMode,
      label: t('theme_light'),
      previewSrc: lightPreview,
    },
    {
      mode: THEMES.DARK as ThemeMode,
      label: t('theme_dark'),
      previewSrc: darkPreview,
    },
    {
      mode: THEMES.AUTO as ThemeMode,
      label: t('theme_system'),
      previewSrc: systemPreview,
    },
  ];

  const cardsRow = (
    <Stack
      sx={{
        flexDirection: 'row',
        gap: 1,
        justifyContent: bare ? 'center' : undefined,
      }}
    >
      {cards.map(({ mode, label, previewSrc }) => (
        <ThemeCard
          key={mode}
          label={label}
          previewSrc={previewSrc}
          selected={selectedMode === mode}
          onClick={() => previewThemeMode(mode)}
          fitContent={bare}
        />
      ))}
    </Stack>
  );

  if (bare) return cardsRow;

  return (
    <Stack
      sx={{
        gap: 2,
        p: 2,
        borderRadius: 2,
        backgroundColor: ({ palette }) => palette.new.background.elements.grey,
      }}
    >
      <Typography
        variant="globalS"
        sx={{ fontWeight: 'fontWeightSemiBold' }}
      >
        {t('appearance')}
      </Typography>
      {cardsRow}
    </Stack>
  );
};

export default AppearanceSection;
