import React, { useEffect, useState } from 'react';
import { EmailData } from '../types';

interface Props {
  onEmailExtracted: (data: EmailData) => void;
}

const EmailExtractor: React.FC<Props> = ({ onEmailExtracted }) => {
  const [extractedData, setExtractedData] = useState<EmailData | null>(null);
  const [loading, setLoading] = useState(false);

  const extractEmailData = async () => {
    setLoading(true);
    
    try {
      // Check if mailbox item exists
      if (!Office.context.mailbox.item) {
        throw new Error('No email item available');
      }

      const mailboxItem = Office.context.mailbox.item;
      
      // Get the current item (email)
      mailboxItem.body.getAsync(Office.CoercionType.Text, (result) => {
        if (result.status === Office.AsyncResultStatus.Succeeded) {
          const emailText = result.value;
          
          // Extract sender email from Office.js API
          const sender = mailboxItem.from;
          const email = sender?.emailAddress || '';
          
          // Extract domain from email
          const domain = email.split('@')[1] || '';
          
          // Create website URL from domain
          const website = domain ? `https://${domain}` : '';
          
          // Get subject
          const subject = mailboxItem.subject || '';
          
          const emailData: EmailData = {
            email,
            domain,
            website,
            subject,
            body: emailText,
          };
          
          setExtractedData(emailData);
          onEmailExtracted(emailData);
        } else {
          console.error('Failed to get email data:', result.error);
        }
        setLoading(false);
      });
    } catch (error) {
      console.error('Error extracting email data:', error);
      setLoading(false);
    }
  };

  useEffect(() => {
    extractEmailData();
  }, []);

  if (loading) {
    return <div className="extractor-loading">Extracting email data...</div>;
  }

  if (!extractedData) {
    return <div className="extractor-error">No email data found</div>;
  }

  return (
    <div className="email-extractor">
      <h3>Extracted Email Data</h3>
      <div className="extracted-data">
        <div className="data-item">
          <label>Email:</label>
          <span>{extractedData.email}</span>
        </div>
        <div className="data-item">
          <label>Company (Domain):</label>
          <span>{extractedData.domain}</span>
        </div>
        <div className="data-item">
          <label>Website:</label>
          <span>{extractedData.website}</span>
        </div>
      </div>
    </div>
  );
};

export default EmailExtractor;