turash/bugulma/frontend/components/ui/Dialog.tsx

import React, { useEffect, useRef } from 'react';
import { clsx } from 'clsx';
import { X } from 'lucide-react';
import { useTranslation } from '@/hooks/useI18n';

export interface DialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  children: React.ReactNode;
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
  className?: string;
}

const sizeClasses = {
  sm: 'max-w-sm',
  md: 'max-w-lg',
  lg: 'max-w-2xl',
  xl: 'max-w-4xl',
  full: 'max-w-[95vw] max-h-[95vh]',
};

/**
 * Dialog/Modal component using divs for better control
 */
export const Dialog = ({ open, onOpenChange, children, size = 'md', className }: DialogProps) => {
  const dialogRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }

    return () => {
      document.body.style.overflow = '';
    };
  }, [open]);

  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && open) {
        onOpenChange(false);
      }
    };

    if (open) {
      document.addEventListener('keydown', handleEscape);
      // Focus trap
      const focusableElements = dialogRef.current?.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      const firstElement = focusableElements?.[0] as HTMLElement;
      firstElement?.focus();
    }

    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, [open, onOpenChange]);

  if (!open) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center"
      role="dialog"
      aria-modal="true"
      onClick={(e) => {
        if (e.target === e.currentTarget) {
          onOpenChange(false);
        }
      }}
    >
      {/* Backdrop */}
      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm" />

      {/* Dialog Content */}
      <div
        ref={dialogRef}
        className={clsx(
          'relative z-50 w-full max-h-[90vh]',
          sizeClasses[size],
          'bg-background rounded-lg shadow-lg border',
          'flex flex-col',
          'animate-in fade-in-0 zoom-in-95 duration-200',
          className
        )}
        onClick={(e) => e.stopPropagation()}
      >
        {children}
      </div>
    </div>
  );
};

export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
}

export const DialogHeader = ({ children, className, ...props }: DialogHeaderProps) => {
  return (
    <div className={clsx('flex flex-col space-y-1.5 p-6 pb-4', className)} {...props}>
      {children}
    </div>
  );
};

export interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
  children: React.ReactNode;
}

export const DialogTitle = ({ children, className, ...props }: DialogTitleProps) => {
  return (
    <h2 className={clsx('text-xl font-semibold leading-none tracking-tight', className)} {...props}>
      {children}
    </h2>
  );
};

export interface DialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
  children: React.ReactNode;
}

export const DialogDescription = ({ children, className, ...props }: DialogDescriptionProps) => {
  return (
    <p className={clsx('text-sm text-muted-foreground', className)} {...props}>
      {children}
    </p>
  );
};

export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
}

export const DialogContent = ({ children, className, ...props }: DialogContentProps) => {
  return (
    <div className={clsx('px-6 py-4 overflow-y-auto flex-1', className)} {...props}>
      {children}
    </div>
  );
};

export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
}

export const DialogFooter = ({ children, className, ...props }: DialogFooterProps) => {
  return (
    <div className={clsx('flex items-center justify-end gap-3 p-6 pt-4', className)} {...props}>
      {children}
    </div>
  );
};

export interface DialogCloseProps {
  onClose: () => void;
  className?: string;
}

export const DialogClose = ({ onClose, className }: DialogCloseProps) => {
  const { t } = useTranslation();
  return (
    <button
      type="button"
      onClick={onClose}
      className={clsx(
        'absolute right-4 top-4 rounded-sm opacity-70',
        'hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring',
        'transition-opacity',
        className
      )}
      aria-label={t('ui.close')}
    >
      <X className="h-4 w-4" />
      <span className="sr-only">{t('ui.close')}</span>
    </button>
  );
};