import { useEffect } from 'react';
import { Button } from '../Button';
import styles from './ModalLayout.module.scss';

const CloseIcon = ({ size = 20 }: { size?: number }) => (
  <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M15 5L5 15M5 5L15 15"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

export interface ModalHeaderProps {
  /** Modal title */
  title?: string;
  /** Show dismiss button */
  showDismiss?: boolean;
  /** Dismiss handler */
  onDismiss?: () => void;
}

export const ModalHeader = ({
  title,
  showDismiss = true,
  onDismiss,
}: ModalHeaderProps) => {
  return (
    <div className={styles.header}>
      <h2 className={styles.headerTitle}>{title}</h2>
      {showDismiss && (
        <button className={styles.closeButton} onClick={onDismiss} aria-label="Close">
          <CloseIcon size={20} />
        </button>
      )}
    </div>
  );
};

export interface ModalFooterProps {
  /** Show the entire footer */
  showFooter?: boolean;
  /** Show primary action button */
  showPrimaryAction?: boolean;
  /** Show secondary action button */
  showSecondaryAction?: boolean;
  /** Primary action button text */
  primaryActionText?: string;
  /** Secondary action button text */
  secondaryActionText?: string;
  /** Primary action handler */
  onPrimaryAction?: () => void;
  /** Secondary action handler */
  onSecondaryAction?: () => void;
  /** Disable primary action */
  primaryActionDisabled?: boolean;
  /** Primary action button variant */
  primaryActionVariant?: 'primary' | 'danger';
}

export const ModalFooter = ({
  showFooter = true,
  showPrimaryAction = true,
  showSecondaryAction = true,
  primaryActionText = 'Save',
  secondaryActionText = 'Discard',
  onPrimaryAction,
  onSecondaryAction,
  primaryActionDisabled = false,
  primaryActionVariant = 'primary',
}: ModalFooterProps) => {
  if (!showFooter) return null;

  return (
    <div className={styles.footer}>
      {showSecondaryAction && (
        <Button variant="secondary" size="regular" onClick={onSecondaryAction}>
          {secondaryActionText}
        </Button>
      )}
      {showPrimaryAction && (
        <Button
          variant={primaryActionVariant}
          size="regular"
          onClick={onPrimaryAction}
          disabled={primaryActionDisabled}
        >
          {primaryActionText}
        </Button>
      )}
    </div>
  );
};

export interface ModalLayoutProps {
  /** Modal content */
  children: React.ReactNode;
  /** Modal title */
  title?: string;
  /** Whether the modal is open */
  isOpen: boolean;
  /** Show dismiss button */
  showDismiss?: boolean;
  /** Show the entire footer */
  showFooter?: boolean;
  /** Show primary action button */
  showPrimaryAction?: boolean;
  /** Show secondary action button */
  showSecondaryAction?: boolean;
  /** Primary action button text */
  primaryActionText?: string;
  /** Secondary action button text */
  secondaryActionText?: string;
  /** Dismiss handler */
  onDismiss?: () => void;
  /** Primary action handler */
  onPrimaryAction?: () => void;
  /** Secondary action handler */
  onSecondaryAction?: () => void;
  /** Disable primary action */
  primaryActionDisabled?: boolean;
  /** Primary action button variant */
  primaryActionVariant?: 'primary' | 'danger';
  /** Modal width in pixels */
  width?: number;
}

export const ModalLayout = ({
  children,
  title,
  isOpen,
  showDismiss = true,
  showFooter = true,
  showPrimaryAction = true,
  showSecondaryAction = true,
  primaryActionText,
  secondaryActionText,
  onDismiss,
  onPrimaryAction,
  onSecondaryAction,
  primaryActionDisabled,
  primaryActionVariant = 'primary',
  width = 800,
}: ModalLayoutProps) => {
  // Close on Escape key
  useEffect(() => {
    if (!isOpen) return;
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onDismiss?.();
    };
    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [isOpen, onDismiss]);

  if (!isOpen) return null;

  return (
    <div className={styles.overlay} onClick={onDismiss}>
      <div
        className={styles.layout}
        style={{ width: `${width}px` }}
        onClick={(e) => e.stopPropagation()}
      >
        <ModalHeader title={title} showDismiss={showDismiss} onDismiss={onDismiss} />
        <div className={styles.content}>{children}</div>
        <ModalFooter
          showFooter={showFooter}
          showPrimaryAction={showPrimaryAction}
          showSecondaryAction={showSecondaryAction}
          primaryActionText={primaryActionText}
          secondaryActionText={secondaryActionText}
          onPrimaryAction={onPrimaryAction}
          onSecondaryAction={onSecondaryAction}
          primaryActionDisabled={primaryActionDisabled}
          primaryActionVariant={primaryActionVariant}
        />
      </div>
    </div>
  );
};