import React from 'react';
import MetadataModal from './MetadataModal';
import ConfirmDialog from './ConfirmDialog';
import ExportDialog from './ExportDialog';
import { t } from '../utils/translation';
import type { ExportFormat } from '../hooks/useExport';

interface ModalsProps {
  // Metadata Modal
  showMetadataModal: boolean;
  onCloseMetadataModal: () => void;
  onMetadataSubmit: (metadata: {
    id?: string;
    label: string;
    description?: string;
    version?: string;
    executable?: boolean;
    template?: boolean;
    storage?: string;
    documentation?: string;
    tags: string[];
    changelog?: string;
  }) => void;
  modelMetadata: {
    label?: string;
    description?: string;
    version?: string;
    executable?: boolean;
    template?: boolean;
    storage?: string;
    documentation?: string;
    tags?: string[];
    changelog?: string;
  };
  modelId?: string;
  isNewModel?: boolean;
  /** Whether the user may edit metadata fields. */
  canEditMetadata?: boolean;
  /** Whether the user may mark a model as template. */
  canCreateTemplate?: boolean;
  
  // Confirm Dialog
  showConfirmDialog: boolean;
  confirmDialogTitle: string;
  confirmDialogMessage: string;
  confirmDialogType: 'danger' | 'warning' | 'info';
  onConfirmDialog: () => void;
  onCancelDialog: () => void;
  onCloseWithoutSave?: () => void;
  confirmDialogLoading: boolean;
  confirmDialogPrimaryLabel?: string;
  /** Pass `false` to hide the secondary button entirely. */
  confirmDialogSecondaryLabel?: string | false;
  confirmDialogCancelLabel?: string;
  confirmDialogPrimaryVariant?: 'primary' | 'danger';
  
  // Export Dialog
  showExportDialog?: boolean;
  onCloseExportDialog?: () => void;
  exportAvailableFormats?: ExportFormat[];
  exportHasReplayData?: boolean;
  exportRequiredModules?: string[];
  onExport?: (format: ExportFormat, includeReplayData?: boolean) => void;
  isExporting?: boolean;

  // Additional modal states that might be used
  showSearchModal?: boolean;
  onCloseSearchModal?: () => void;
  
  // Generic modal props
  onModalBackdropClick?: (event: React.MouseEvent) => void;
}

const Modals: React.FC<ModalsProps> = ({
  // Metadata Modal
  showMetadataModal,
  onCloseMetadataModal,
  onMetadataSubmit,
  modelMetadata,
  modelId,
  isNewModel = false,
  canEditMetadata = true,
  canCreateTemplate = true,
  
  // Confirm Dialog
  showConfirmDialog,
  confirmDialogTitle,
  confirmDialogMessage,
  confirmDialogType: _confirmDialogType,
  onConfirmDialog,
  onCancelDialog,
  onCloseWithoutSave,
  confirmDialogLoading: _confirmDialogLoading,
  confirmDialogPrimaryLabel,
  confirmDialogSecondaryLabel,
  confirmDialogCancelLabel,
  confirmDialogPrimaryVariant,
  
  // Export Dialog
  showExportDialog,
  onCloseExportDialog,
  exportAvailableFormats = [],
  exportHasReplayData = false,
  exportRequiredModules = [],
  onExport,
  isExporting,

  // Additional modals
  showSearchModal,
  onCloseSearchModal,
  
  // Generic props
  onModalBackdropClick,
}) => {
  // Handle backdrop clicks to close modals
  const handleBackdropClick = (event: React.MouseEvent, onClose: () => void) => {
    if (onModalBackdropClick) {
      onModalBackdropClick(event);
    }
    
    // Close modal if clicking on backdrop (not on modal content)
    if (event.target === event.currentTarget) {
      onClose();
    }
  };

  return (
    <>
      {/* Metadata Modal */}
      {showMetadataModal && (
        <MetadataModal
          isOpen={showMetadataModal}
          onClose={onCloseMetadataModal}
          onSave={onMetadataSubmit}
          metadata={modelMetadata}
          modelId={modelId}
          isNew={isNewModel}
          canEditMetadata={canEditMetadata}
          canCreateTemplate={canCreateTemplate}
        />
      )}

      {/* Confirm Dialog */}
      {showConfirmDialog && (
        <ConfirmDialog
          isOpen={showConfirmDialog}
          onClose={onCancelDialog}
          onSaveAndClose={onConfirmDialog}
          onCloseWithoutSave={onCloseWithoutSave}
          title={confirmDialogTitle}
          message={confirmDialogMessage}
          primaryButtonLabel={confirmDialogPrimaryLabel}
          secondaryButtonLabel={confirmDialogSecondaryLabel}
          cancelButtonLabel={confirmDialogCancelLabel}
          primaryButtonVariant={confirmDialogPrimaryVariant}
        />
      )}

      {/* Export Dialog */}
      {showExportDialog && onCloseExportDialog && onExport && (
        <ExportDialog
          isOpen={showExportDialog}
          onClose={onCloseExportDialog}
          availableFormats={exportAvailableFormats}
          hasReplayData={exportHasReplayData}
          requiredModules={exportRequiredModules}
          onExport={onExport}
          isExporting={isExporting}
        />
      )}

      {/* Search Modal (placeholder for future implementation) */}
      {showSearchModal && onCloseSearchModal && (
        <div 
          className="modal-backdrop"
          onClick={(event) => handleBackdropClick(event, onCloseSearchModal)}
        >
          <div className="modal-content search-modal" role="dialog" aria-modal="true" aria-labelledby="search-modal-title">
            <div className="modal-header">
              <h3 id="search-modal-title">{t('Advanced Search')}</h3>
              <button 
                type="button" 
                className="close-button"
                onClick={onCloseSearchModal}
                aria-label={t('Close search')}
              >
                ×
              </button>
            </div>
            <div className="modal-body">
              <p>{t('Advanced search functionality coming soon...')}</p>
            </div>
            <div className="modal-footer">
              <button 
                type="button" 
                className="btn btn-secondary"
                onClick={onCloseSearchModal}
              >
                {t('Close')}
              </button>
            </div>
          </div>
        </div>
      )}

    </>
  );
};

export default Modals;