GNX-WEB/frontEnd/components/pages/support/SupportCenterContent.tsx

"use client";
import { useEffect } from 'react';
import CreateTicketForm from './CreateTicketForm';
import KnowledgeBase from './KnowledgeBase';
import TicketStatusCheck from './TicketStatusCheck';

type ModalType = 'create' | 'knowledge' | 'status' | null;

interface SupportCenterContentProps {
  activeModal: ModalType;
  onClose: () => void;
  onOpenModal?: (type: ModalType) => void;
}

const SupportCenterContent = ({ activeModal, onClose, onOpenModal }: SupportCenterContentProps) => {
  // Close modal on escape key
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && activeModal) {
        onClose();
      }
    };

    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [activeModal, onClose]);

  // Prevent body scroll when modal is open
  useEffect(() => {
    if (activeModal) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }

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

  if (!activeModal) return null;

  return (
    <>
      {/* Modal Overlay */}
      <div 
        className="support-modal-overlay" 
        onClick={onClose}
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          zIndex: 9998,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '20px',
          backdropFilter: 'blur(5px)',
        }}
      >
        {/* Modal Content */}
        <div 
          className="support-modal-content"
          onClick={(e) => e.stopPropagation()}
          style={{
            backgroundColor: '#fff',
            borderRadius: '12px',
            maxWidth: '1000px',
            width: '100%',
            maxHeight: '90vh',
            overflow: 'auto',
            position: 'relative',
            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
            animation: 'modalSlideIn 0.3s ease-out',
          }}
        >
          {/* Close Button */}
          <button
            onClick={onClose}
            className="support-modal-close"
            aria-label="Close modal"
            style={{
              position: 'sticky',
              top: '20px',
              right: '20px',
              float: 'right',
              background: '#f3f4f6',
              border: 'none',
              borderRadius: '50%',
              width: '40px',
              height: '40px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              cursor: 'pointer',
              fontSize: '20px',
              color: '#374151',
              transition: 'all 0.2s',
              zIndex: 10,
              marginBottom: '-40px',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = '#e5e7eb';
              e.currentTarget.style.transform = 'scale(1.1)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = '#f3f4f6';
              e.currentTarget.style.transform = 'scale(1)';
            }}
          >
            <i className="fa-solid fa-times"></i>
          </button>

          {/* Modal Body */}
          <div className="support-modal-body" style={{ padding: '40px' }}>
            {activeModal === 'create' && (
              <CreateTicketForm onOpenStatusCheck={() => {
                if (onOpenModal) {
                  onOpenModal('status');
                }
              }} />
            )}
            {activeModal === 'knowledge' && <KnowledgeBase />}
            {activeModal === 'status' && <TicketStatusCheck />}
          </div>
        </div>
      </div>

      {/* Modal Animation Keyframes */}
      <style jsx>{`
        @keyframes modalSlideIn {
          from {
            opacity: 0;
            transform: translateY(-20px) scale(0.95);
          }
          to {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
        }

        .support-modal-content::-webkit-scrollbar {
          width: 8px;
        }

        .support-modal-content::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 10px;
        }

        .support-modal-content::-webkit-scrollbar-thumb {
          background: #888;
          border-radius: 10px;
        }

        .support-modal-content::-webkit-scrollbar-thumb:hover {
          background: #555;
        }

        @media (max-width: 768px) {
          .support-modal-body {
            padding: 20px !important;
          }
        }
      `}</style>
    </>
  );
};

export default SupportCenterContent;