import React from 'react';
import { useActivity } from '../context/ActivityContext';
import { MissionPopupViewProps } from '../types';
import ActivityUser from './ActivityUser';
import MissionListView from './MissionListView';

const MissionPopupView = ({
  activityInfo,
  visible = false,
  onClose,
  onMissionProgressUpdate,
  className = 'mission-popup',
  style,
  overlayClassName = 'mission-popup-overlay',
  popupClassName = 'mission-popup',
  headerClassName = 'popup-header',
  contentClassName = 'popup-content',
  closeButtonClassName = 'close-button',
  title = '活动任务',
  loadingText = '加载中...',
  errorText = '加载失败',
  retryText = '重试'
}: MissionPopupViewProps): React.ReactElement => {
  const { loading, error } = useActivity();

  if (!visible) return null;

  const handleOverlayClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose?.();
    }
  };

  return (
    <div className={overlayClassName} onClick={handleOverlayClick}>
      <div className={className} style={style}>
        <div className={headerClassName}>
          <h2>{title}</h2>
          <button className={closeButtonClassName} onClick={onClose}>
            ×
          </button>
        </div>

        <div className={contentClassName}>
          {loading ? (
            <div className="loading-state">{loadingText}</div>
          ) : error ? (
            <div className="error-state">
              <p>{errorText}: {error}</p>
              <button onClick={() => window.location.reload()}>{retryText}</button>
            </div>
          ) : (
            <>
              <div className="user-section">
                <ActivityUser activityInfo={activityInfo} />
              </div>

              <div className="missions-section">
                <MissionListView
                  activityInfo={activityInfo}
                  onMissionProgressUpdate={onMissionProgressUpdate}
                />
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default MissionPopupView;