import { type ReactNode } from 'react';

import Button from '@design-system/Buttons/Button';
import {
  DialogActions,
  DialogContent,
  IconButton,
  Stack,
  type SxProps,
  type Theme,
  Typography,
  useTheme,
} from '@mui/material';
import { IconInfoCircle, IconX } from '@tabler/icons-react';
import { composeSx } from '@utils/components';

import { type DialogProps } from './types';

/**
 * Dialog.Header - Header section with title and close button
 */
export function DialogHeader({
  title,
  onClose,
  children,
  sx,
}: {
  title?: string;
  onClose: () => void;
  children?: ReactNode;
  sx?: SxProps<Theme>;
}) {
  const theme = useTheme();

  return (
    <Stack
      sx={composeSx(
        {
          alignItems: 'center',
          flexDirection: 'row',
          gap: '8px',
          justifyContent: title || children ? 'space-between' : 'flex-end',
          p: 3,
        },
        sx,
      )}
    >
      {title && (
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
        >
          {title}
        </Typography>
      )}
      {children}
      <IconButton
        aria-label="close"
        onClick={onClose}
        sx={{ p: 0 }}
      >
        <IconX color={theme.palette.new.text.neutral.default} />
      </IconButton>
    </Stack>
  );
}

/**
 * Dialog.Body - Content section with scroll support
 */
export function DialogBody({
  children,
  textBody,
  sx,
}: {
  children?: ReactNode;
  textBody?: string;
  sx?: SxProps<Theme>;
}) {
  const theme = useTheme();

  return (
    <DialogContent
      sx={composeSx(
        { px: 3, py: 2, maxHeight: '400px', overflowY: 'auto' },
        sx,
      )}
    >
      {textBody && (
        <Typography
          variant="globalS"
          sx={{ color: theme.palette.new.text.neutral.default }}
        >
          {textBody}
        </Typography>
      )}
      {children}
    </DialogContent>
  );
}

/**
 * Dialog.Footer - Footer section for actions and info
 */
export function DialogFooter({
  children,
  actionInfo,
  hideBorder = false,
  sx,
}: {
  children?: ReactNode;
  actionInfo?: string;
  hideBorder?: boolean;
  sx?: SxProps<Theme>;
}) {
  const theme = useTheme();

  return (
    <DialogActions
      sx={composeSx(
        {
          p: 3,
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: actionInfo ? 'space-between' : 'flex-end',
          borderTop: hideBorder
            ? 'none'
            : `1px solid ${theme.palette.new.border.neutral.default}`,
        },
        sx,
      )}
    >
      {actionInfo && (
        <Stack sx={{ flexDirection: 'row', gap: '4px', alignItems: 'center' }}>
          <IconInfoCircle
            size={16}
            color={theme.palette.new.text.neutral.lighter}
          />
          <Typography
            variant="globalXS"
            sx={{ color: theme.palette.new.text.neutral.lighter }}
          >
            {actionInfo}
          </Typography>
        </Stack>
      )}
      <Stack sx={{ flexDirection: 'row', gap: '8px' }}>{children}</Stack>
    </DialogActions>
  );
}

/**
 * Main Dialog component - Uses composition components internally
 * Maintains backward compatibility with the existing API
 */
const Dialog = ({
  title,
  onClose,
  body,
  textBody,
  primaryButtonProps,
  secondaryButtonProps,
  actionInfo,
  footerProps = { hideBorder: false },
  sx,
}: DialogProps) => {
  const hasFooter = primaryButtonProps || secondaryButtonProps || actionInfo;
  const hasBody = textBody || body;

  return (
    <Stack sx={composeSx({ maxHeight: '600px' }, sx)}>
      <DialogHeader
        title={title}
        onClose={onClose}
      />
      {hasBody && <DialogBody textBody={textBody}>{body}</DialogBody>}
      {hasFooter && (
        <DialogFooter
          actionInfo={actionInfo}
          hideBorder={footerProps.hideBorder}
        >
          {secondaryButtonProps && (
            <Button
              variant="tertiary"
              {...secondaryButtonProps}
            />
          )}
          {primaryButtonProps && (
            <Button
              variant="primary"
              {...primaryButtonProps}
            />
          )}
        </DialogFooter>
      )}
    </Stack>
  );
};

// Attach composition components to Dialog namespace
Dialog.Header = DialogHeader;
Dialog.Body = DialogBody;
Dialog.Footer = DialogFooter;

export type { DialogProps };

export default Dialog;