import { IoIosCheckmarkCircle, IoIosMail, IoIosCall, IoIosTime, IoIosRefresh } from 'react-icons/io';
import { useNavigate } from 'react-router-dom';
import sharedStyles from '../../core/PageManager/pages.module.css';
import styles from './SpeechConfirmation.module.css';
import { useLanguage } from '../../providers/language/LanguageContext';

interface MandateData {
  id: string;
  mandate_general: {
    company_name: string;
    industry: string;
    contact_info: {
      email: string;
      phone: string;
      street: string;
      postal_code: string;
      city: string;
      country: string;
    };
    business_hours: string;
    timezone: string;
  };
  setup_contacts: boolean;
}

interface SpeechConfirmationProps {
  onBackToInfo: () => void;
  submittedData?: MandateData | null;
  onReset?: () => void;
}

function SpeechConfirmation({ onBackToInfo, submittedData, onReset }: SpeechConfirmationProps) {
  const { t } = useLanguage();
  const navigate = useNavigate();
  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.iconContainer}>
          <IoIosCheckmarkCircle className={styles.successIcon} />
        </div>
        
        <h1 className={styles.title}>{t('speech.confirmation.title')}</h1>
        
        <p className={styles.message}>
          {t('speech.confirmation.message')}
        </p>

        {submittedData && (
          <div className={styles.submittedData}>
            <h3>{t('speech.confirmation.submitted_data')}</h3>
            <div className={styles.dataGrid}>
              <div className={styles.dataItem}>
                <strong>{t('speech.confirmation.company')}:</strong>
                <span>{submittedData.mandate_general.company_name}</span>
              </div>
              <div className={styles.dataItem}>
                <strong>{t('speech.confirmation.industry')}:</strong>
                <span>{submittedData.mandate_general.industry}</span>
              </div>
              <div className={styles.dataItem}>
                <strong>{t('speech.confirmation.email')}:</strong>
                <span>{submittedData.mandate_general.contact_info.email}</span>
              </div>
              <div className={styles.dataItem}>
                <strong>{t('speech.confirmation.phone')}:</strong>
                <span>{submittedData.mandate_general.contact_info.phone}</span>
              </div>
              <div className={styles.dataItem}>
                <strong>{t('speech.confirmation.address')}:</strong>
                <span>
                  {submittedData.mandate_general.contact_info.street}, {submittedData.mandate_general.contact_info.postal_code} {submittedData.mandate_general.contact_info.city}, {submittedData.mandate_general.contact_info.country}
                </span>
              </div>
              <div className={styles.dataItem}>
                <strong>{t('speech.confirmation.timezone')}:</strong>
                <span>{submittedData.mandate_general.timezone}</span>
              </div>
            </div>
          </div>
        )}

        <div className={styles.nextSteps}>
          <h2>{t('speech.confirmation.next_steps')}</h2>
          
          <div className={styles.step}>
            <div className={styles.stepIcon}>
              <IoIosMail className={styles.stepIconInner} />
            </div>
            <div className={styles.stepContent}>
              <h3>{t('speech.confirmation.email_confirmation')}</h3>
              <p>{t('speech.confirmation.email_confirmation_desc')}</p>
            </div>
          </div>

          <div className={styles.step}>
            <div className={styles.stepIcon}>
              <IoIosTime className={styles.stepIconInner} />
            </div>
            <div className={styles.stepContent}>
              <h3>{t('speech.confirmation.review_process')}</h3>
              <p>{t('speech.confirmation.review_process_desc')}</p>
            </div>
          </div>

          <div className={styles.step}>
            <div className={styles.stepIcon}>
              <IoIosCall className={styles.stepIconInner} />
            </div>
            <div className={styles.stepContent}>
              <h3>{t('speech.confirmation.setup_call')}</h3>
              <p>{t('speech.confirmation.setup_call_desc')}</p>
            </div>
          </div>
        </div>

        <div className={styles.contactInfo}>
          <h3>{t('speech.confirmation.questions')}</h3>
          <p>
            {t('speech.confirmation.questions_desc')}
          </p>
          <div className={styles.contactMethods}>
            <div className={styles.contactMethod}>
              <IoIosMail className={styles.contactIcon} />
              <span>support@spitch.ai</span>
            </div>
            <div className={styles.contactMethod}>
              <IoIosCall className={styles.contactIcon} />
              <span>+1 (555) 123-4567</span>
            </div>
          </div>
        </div>
      </div>

      <div className={styles.actions}>
        <button 
          className={`${sharedStyles.secondaryButton} ${styles.backButton}`}
          onClick={onBackToInfo}
        >
          {t('speech.confirmation.back')}
        </button>
        {onReset && (
          <button 
            className={`${sharedStyles.primaryButton} ${styles.resetButton}`}
            onClick={onReset}
          >
            <IoIosRefresh className={styles.resetIcon} />
            {t('speech.confirmation.reset')}
          </button>
        )}
      </div>

      <div className={styles.additionalActions}>
        <button 
          className={`${sharedStyles.primaryButton} ${styles.transcriptButton}`}
          onClick={() => navigate('/speech/transcripts')}
        >
          {t('speech.confirmation.transcript_management')}
        </button>
        <button 
          className={`${sharedStyles.secondaryButton} ${styles.settingsButton}`}
          onClick={() => navigate('/einstellungen#speech-settings')}
        >
          {t('speech.confirmation.speech_settings')}
        </button>
      </div>
    </div>
  );
}

export default SpeechConfirmation;
