import { ReactNode } from 'react';
import { Modal, Typography, Space } from 'antd';
import {
  ExclamationCircleOutlined,
  WarningOutlined,
  DeleteOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { colors } from '@/styles/designTokens';
import { useResponsiveModal } from '@/hooks/useResponsiveModal';

const { Text, Paragraph } = Typography;

export type ConfirmationType = 'danger' | 'warning' | 'info' | 'confirm';

interface ConfirmationModalProps {
  /** Modal open state */
  open: boolean;
  /** Close handler */
  onClose: () => void;
  /** Confirm handler */
  onConfirm: () => void | Promise<void>;
  /** Modal title */
  title: string;
  /** Main message to display */
  message: ReactNode;
  /** Optional additional details */
  details?: ReactNode;
  /** Type of confirmation (affects styling) */
  type?: ConfirmationType;
  /** Text for confirm button */
  confirmText?: string;
  /** Text for cancel button */
  cancelText?: string;
  /** Loading state for confirm button */
  loading?: boolean;
  /** Disabled state for confirm button */
  disabled?: boolean;
}

const TYPE_CONFIG = {
  danger: {
    icon: <DeleteOutlined />,
    color: colors.error,
    okType: 'primary' as const,
    okDanger: true,
    defaultConfirmText: 'Slet',
  },
  warning: {
    icon: <WarningOutlined />,
    color: colors.warning,
    okType: 'primary' as const,
    okDanger: false,
    defaultConfirmText: 'Fortsæt',
  },
  info: {
    icon: <ExclamationCircleOutlined />,
    color: colors.info,
    okType: 'primary' as const,
    okDanger: false,
    defaultConfirmText: 'OK',
  },
  confirm: {
    icon: <QuestionCircleOutlined />,
    color: colors.primary,
    okType: 'primary' as const,
    okDanger: false,
    defaultConfirmText: 'Bekræft',
  },
};

/**
 * Reusable confirmation modal for destructive or important actions.
 *
 * @example
 * <ConfirmationModal
 *   open={showDeleteConfirm}
 *   onClose={() => setShowDeleteConfirm(false)}
 *   onConfirm={handleDelete}
 *   type="danger"
 *   title="Slet postering?"
 *   message="Er du sikker på at du vil slette denne postering?"
 *   details="Denne handling kan ikke fortrydes."
 *   loading={isDeleting}
 * />
 */
export function ConfirmationModal({
  open,
  onClose,
  onConfirm,
  title,
  message,
  details,
  type = 'confirm',
  confirmText,
  cancelText = 'Annuller',
  loading = false,
  disabled = false,
}: ConfirmationModalProps) {
  const config = TYPE_CONFIG[type];
  const responsiveModalProps = useResponsiveModal({ size: 'small' });

  const handleConfirm = async () => {
    await onConfirm();
  };

  return (
    <Modal
      open={open}
      onCancel={onClose}
      onOk={handleConfirm}
      title={
        <Space>
          <span style={{ color: config.color }}>{config.icon}</span>
          {title}
        </Space>
      }
      okText={confirmText || config.defaultConfirmText}
      cancelText={cancelText}
      okType={config.okType}
      okButtonProps={{
        danger: config.okDanger,
        loading,
        disabled,
      }}
      {...responsiveModalProps}
      destroyOnHidden
    >
      <div style={{ paddingTop: 8 }}>
        {typeof message === 'string' ? (
          <Paragraph style={{ marginBottom: details ? 8 : 0 }}>{message}</Paragraph>
        ) : (
          message
        )}
        {details && (
          <Text type="secondary" style={{ fontSize: 13 }}>
            {details}
          </Text>
        )}
      </div>
    </Modal>
  );
}

/**
 * Helper function to show a quick confirmation dialog.
 * Uses Ant Design's Modal.confirm under the hood.
 */
export function showConfirmation({
  title,
  content,
  type = 'confirm',
  onOk,
  okText,
}: {
  title: string;
  content: ReactNode;
  type?: ConfirmationType;
  onOk: () => void | Promise<void>;
  okText?: string;
}) {
  const config = TYPE_CONFIG[type];

  Modal.confirm({
    title,
    icon: <span style={{ color: config.color, marginRight: 8 }}>{config.icon}</span>,
    content,
    okText: okText || config.defaultConfirmText,
    cancelText: 'Annuller',
    okType: config.okType,
    okButtonProps: { danger: config.okDanger },
    onOk,
    centered: true,
  });
}

export default ConfirmationModal;
