import React from 'react';
import ContactSelection from './ContactSelection';
import FutureTimeForm from './FutureTimeForm';
import MessageForm from './MessageForm';
import ConfirmationStep from './ConfirmationStep';
import StepNavigation from './StepNavigation';
import useSendMessageWizard from './useSendMessageWizard';
import styles from './SendMessageWizard.module.css';

function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
  const wizard = useSendMessageWizard();

  if (!isOpen) return null;

  const renderStep = () => {
    switch (wizard.currentStep) {
      case 'select':
        return (
          <ContactSelection
            selectedContacts={wizard.selectedContacts}
            onToggleContact={wizard.toggleContact}
          />
        );
      case 'message':
        return (
          <MessageForm
            message={wizard.message}
            onMessageChange={wizard.setMessage}
            onMessageCreated={wizard.setCreatedMessage}
            onToggleScheduled={wizard.toggleScheduled}
          />
        );
      case 'schedule':
        return (
          <FutureTimeForm
            scheduledTime={wizard.scheduledTime}
            setScheduledTime={wizard.setScheduledTime}
          />
        );
      case 'confirm':
        return (
          <ConfirmationStep
            selectedContacts={wizard.selectedContacts}
            createdMessage={wizard.createdMessage}
            message={wizard.message}
            scheduledTime={wizard.scheduledTime}
            isSubmitting={wizard.isSubmitting}
          />
        );
      case 'result':
        return (
          <div className={styles.resultStep}>
            {wizard.submissionError ? (
              <div className={styles.error}>
                <h3>Error Sending Messages</h3>
                <p>{wizard.submissionError}</p>
              </div>
            ) : (
              <div className={styles.success}>
                <h3>Messages Sent Successfully!</h3>
                <p>
                  Your message has been sent to {wizard.selectedContacts.length}{' '}
                  contacts.
                </p>
              </div>
            )}
          </div>
        );
      default:
        return null;
    }
  };

  const handleClose = () => {
    wizard.reset();
    onClose();
  };

  const handleComplete = () => {
    wizard.reset();
    onComplete();
  };

  const stepTitles = {
    select: 'Select Contacts',
    message: 'Compose Message',
    schedule: 'Schedule message',
    confirm: 'Review & Send',
    result: 'Result',
  };

  return (
    <div className={styles.modalOverlay}>
      <div className={styles.modal}>
        <div className={styles.modalHeader}>
          <h2>{stepTitles[wizard.currentStep]}</h2>
          <button
            onClick={handleClose}
            className={styles.closeButton}
            aria-label="Close"
          >
            ×
          </button>
        </div>

        <div className={styles.modalBody}>{renderStep()}</div>

        <div className={styles.modalFooter}>
          <StepNavigation
            currentStep={wizard.currentStep}
            onNext={wizard.nextStep}
            onBack={wizard.prevStep}
            onSubmit={wizard.submit}
            onDone={handleComplete}
            canProceed={wizard.canProceedToNextStep}
            canGoBack={wizard.canGoBack}
            isSubmitting={wizard.isSubmitting}
            submissionError={wizard.submissionError}
          />
        </div>
      </div>
    </div>
  );
}

export default SendMessageWizardModal;