'use client';

import React, { useEffect, useRef } from 'react';

import MarketplaceButton, {
  MarketplaceButtonVariant,
} from './MarketplaceButton';

export interface MarketplaceConfirmDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm?: () => void;
  title: string;
  message?: string;
  confirmText?: string;
  cancelText?: string;
  variant?: 'accept' | 'reject' | 'warning' | 'primary';
  icon?: React.ReactNode;
  alertMode?: boolean; // If true, only show one button (OK/Got it)
}

const MarketplaceConfirmDialog: React.FC<MarketplaceConfirmDialogProps> = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmText = 'Confirm',
  cancelText = 'Cancel',
  variant = 'primary',
  icon,
  alertMode = false,
}) => {
  const dialogRef = useRef<HTMLDivElement>(null);

  // Handle escape key
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
      // Prevent body scroll when dialog is open
      document.body.style.overflow = 'hidden';
    }

    return () => {
      document.removeEventListener('keydown', handleEscape);
      document.body.style.overflow = '';
    };
  }, [isOpen, onClose]);

  // Handle click outside
  const handleBackdropClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  if (!isOpen) return null;

  return (
    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm'>
      <button
        type='button'
        className='absolute inset-0 h-full w-full cursor-default'
        onClick={handleBackdropClick}
        aria-label='Close dialog'
        tabIndex={-1}
      />
      <div
        ref={dialogRef}
        className='relative z-10 mx-4 w-full max-w-md rounded-xl border border-border-primary bg-background-primary p-6 shadow-2xl'
        role='dialog'
        aria-modal='true'
        aria-labelledby='dialog-title'
      >
        {/* Icon & Title */}
        <div className='mb-4 flex items-start gap-3'>
          {icon && (
            <div className='flex-shrink-0 text-accent-brand'>{icon}</div>
          )}
          <div className='flex-1'>
            <h2
              id='dialog-title'
              className='text-lg font-semibold text-foreground-primary'
            >
              {title}
            </h2>
            {message && (
              <p className='mt-2 text-sm text-foreground-secondary'>
                {message}
              </p>
            )}
          </div>
        </div>

        {/* Actions */}
        <div className='flex justify-end gap-2'>
          {!alertMode && (
            <MarketplaceButton
              variant='secondary'
              onClick={onClose}
              className='px-4 py-2 text-sm'
            >
              {cancelText}
            </MarketplaceButton>
          )}
          <MarketplaceButton
            variant={variant as MarketplaceButtonVariant}
            onClick={() => {
              if (onConfirm) {
                onConfirm();
              }
              onClose();
            }}
            className='px-4 py-2 text-sm'
          >
            {alertMode ? confirmText || 'Got it' : confirmText}
          </MarketplaceButton>
        </div>
      </div>
    </div>
  );
};

export default MarketplaceConfirmDialog;