import React from 'react';
import styles from './ConfirmationStep.module.css';

function ConfirmationStep({ selectedContact, contactDetails, isSubmitting }) {
  if (!selectedContact || !contactDetails) {
    return (
      <div className={styles.confirmationStep}>
        <div className={styles.noDataMessage}>
          <p>No contact selected or details available.</p>
          <p className={styles.hint}>
            Please go back and select a contact to modify.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className={styles.confirmationStep}>
      <h3 className={styles.sectionTitle}>Review Your Changes</h3>

      <div className={styles.reviewSection}>
        <div className={styles.reviewItem}>
          <span className={styles.reviewLabel}>Contact Phone</span>
          <span className={styles.reviewValue}>
            {selectedContact.phone_number}
          </span>
        </div>

        <div className={styles.reviewDivider} />

        <div className={styles.reviewItem}>
          <span className={styles.reviewLabel}>First Name</span>
          <div className={styles.reviewComparison}>
            <span className={styles.oldValue}>
              {selectedContact.first_name || 'Not set'}
            </span>
            <span className={styles.arrow}>→</span>
            <span className={styles.newValue}>
              {contactDetails.first_name || 'Not set'}
            </span>
          </div>
        </div>

        <div className={styles.reviewItem}>
          <span className={styles.reviewLabel}>Last Name</span>
          <div className={styles.reviewComparison}>
            <span className={styles.oldValue}>
              {selectedContact.last_name || 'Not set'}
            </span>
            <span className={styles.arrow}>→</span>
            <span className={styles.newValue}>
              {contactDetails.last_name || 'Not set'}
            </span>
          </div>
        </div>

        <div className={styles.reviewItem}>
          <span className={styles.reviewLabel}>Nickname</span>
          <div className={styles.reviewComparison}>
            <span className={styles.oldValue}>
              {selectedContact.nickname || 'Not set'}
            </span>
            <span className={styles.arrow}>→</span>
            <span className={styles.newValue}>
              {contactDetails.nickname || 'Not set'}
            </span>
          </div>
        </div>
      </div>

      {isSubmitting && (
        <div className={styles.submittingMessage}>
          <div className={styles.spinner}></div>
          <p>Updating contact information...</p>
        </div>
      )}
    </div>
  );
}

export default ConfirmationStep;