import React, { useState, useEffect } from 'react';
import EmailExtractor from './components/EmailExtractor';
import ClientList from './components/ClientList';
import ActionButtons from './components/ActionButtons';
import { EmailData, Client, Interaction } from './types';
import './App.css';

const App: React.FC = () => {
  const [emailData, setEmailData] = useState<EmailData | null>(null);
  const [clients, setClients] = useState<Client[]>([]);
  const [interactions, setInteractions] = useState<Interaction[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Load previously stored data
    const storedClients = localStorage.getItem('lawyer-crm-clients');
    const storedInteractions = localStorage.getItem('lawyer-crm-interactions');
    
    if (storedClients) {
      setClients(JSON.parse(storedClients));
    }
    if (storedInteractions) {
      setInteractions(JSON.parse(storedInteractions));
    }
    
    setLoading(false);
  }, []);

  const handleEmailExtracted = (data: EmailData) => {
    setEmailData(data);
  };

  const handleCreateClient = () => {
    if (!emailData) return;

    const newClient: Client = {
      id: Date.now().toString(),
      email: emailData.email,
      company: emailData.domain,
      website: emailData.website,
      createdAt: new Date().toISOString(),
    };

    const updatedClients = [...clients, newClient];
    setClients(updatedClients);
    localStorage.setItem('lawyer-crm-clients', JSON.stringify(updatedClients));
    
    alert(`Client created: ${newClient.company} (${newClient.email})`);
  };

  const handleLogInteraction = () => {
    if (!emailData) return;

    const newInteraction: Interaction = {
      id: Date.now().toString(),
      email: emailData.email,
      domain: emailData.domain,
      type: 'email',
      description: `Email interaction with ${emailData.email}`,
      createdAt: new Date().toISOString(),
    };

    const updatedInteractions = [...interactions, newInteraction];
    setInteractions(updatedInteractions);
    localStorage.setItem('lawyer-crm-interactions', JSON.stringify(updatedInteractions));
    
    alert(`Interaction logged for: ${newInteraction.domain}`);
  };

  if (loading) {
    return <div className="loading">Loading...</div>;
  }

  return (
    <div className="app">
      <h1>Lawyer CRM</h1>
      
      <EmailExtractor onEmailExtracted={handleEmailExtracted} />
      
      {emailData && (
        <ActionButtons 
          onCreateClient={handleCreateClient}
          onLogInteraction={handleLogInteraction}
        />
      )}
      
      <ClientList clients={clients} />
      
      <div className="interactions-section">
        <h3>Recent Interactions</h3>
        <div className="interactions-list">
          {interactions.slice(-5).reverse().map(interaction => (
            <div key={interaction.id} className="interaction-item">
              <div className="interaction-domain">{interaction.domain}</div>
              <div className="interaction-email">{interaction.email}</div>
              <div className="interaction-date">
                {new Date(interaction.createdAt).toLocaleDateString()}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default App;