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

function ConfirmationStep({
  selectedContacts,
  createdMessage,
  message,
  isSubmitting,
}) {
  // In a real app, you might fetch full contact details here
  // For now, we'll work with just the IDs

  const contactsCount = selectedContacts.length;
  const messagePreview =
    message.length > 100 ? `${message.substring(0, 100)}...` : message;

  const getContactListText = () => {
    if (contactsCount === 0) return 'No contacts selected';
    if (contactsCount === 1) return '1 contact selected';
    return `${contactsCount} contacts selected`;
  };

  return (
    <div className={styles.confirmationStep}>
      <div className={styles.confirmationHeader}>
        <h3>Ready to Send</h3>
        <p className={styles.confirmationSubtitle}>
          Review your message and recipients before sending
        </p>
      </div>

      <div className={styles.confirmationSections}>
        {/* Recipients Section */}
        <div className={styles.confirmationSection}>
          <div className={styles.sectionHeader}>
            <span className={styles.sectionIcon}>👥</span>
            <h4>Recipients</h4>
          </div>
          <div className={styles.sectionContent}>
            <div className={styles.recipientsSummary}>
              <span className={styles.recipientsCount}>
                {getContactListText()}
              </span>
              {contactsCount > 0 && (
                <div className={styles.recipientIds}>
                  <strong>Contact IDs:</strong>
                  <div className={styles.idList}>
                    {selectedContacts.map((id, index) => (
                      <span key={id} className={styles.idTag}>
                        {id}
                        {index < selectedContacts.length - 1 && ', '}
                      </span>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Message Section */}
        <div className={styles.confirmationSection}>
          <div className={styles.sectionHeader}>
            <span className={styles.sectionIcon}>💬</span>
            <h4>Message</h4>
          </div>
          <div className={styles.sectionContent}>
            <div className={styles.messagePreviewContainer}>
              <div className={styles.messagePreview}>
                {message || (
                  <em className={styles.noMessage}>No message entered</em>
                )}
              </div>
              <div className={styles.messageStats}>
                <div className={styles.statItem}>
                  <span className={styles.statLabel}>Characters:</span>
                  <span className={styles.statLabel}>
                    {createdMessage.content.length}
                  </span>
                </div>
                <div className={styles.statItem}>
                  <span className={styles.statValue}>
                    {message.trim() ? message.trim().split(/\s+/).length : 0}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Summary Section */}
        <div className={styles.confirmationSection}>
          <div className={styles.sectionHeader}>
            <span className={styles.sectionIcon}>📊</span>
            <h4>Summary</h4>
          </div>
          <div className={styles.sectionContent}>
            <div className={styles.summaryStats}>
              <div className={styles.summaryStat}>
                <span className={styles.statNumber}>{contactsCount}</span>
                <span className={styles.statLabel}>Recipients</span>
              </div>
              <div className={styles.summaryStat}>
                <span className={styles.statNumber}>
                  {message.split('.').length - 1}
                </span>
                <span className={styles.statLabel}>Sentences</span>
              </div>
              <div className={styles.summaryStat}>
                <span className={styles.statNumber}>
                  {Math.ceil(message.length / 160)}
                </span>
                <span className={styles.statLabel}>SMS Parts</span>
              </div>
            </div>
          </div>
        </div>

        {/* Warning/Info Section */}
        <div className={styles.confirmationNotice}>
          <div className={styles.noticeIcon}>⚠️</div>
          <div className={styles.noticeContent}>
            <strong>Important:</strong> Once sent, messages cannot be recalled.
            Please double-check your recipients and message content.
            {isSubmitting && (
              <div className={styles.sendingNotice}>
                <div className={styles.sendingSpinner}></div>
                <span>Sending messages...</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default ConfirmationStep;