pages/index.js

import { useState, useEffect } from 'react';
import Header from '../components/Header';
import Sidebar from '../components/Sidebar';
import EmailList from '../components/EmailList';
import EmailDetail from '../components/EmailDetail';
import { Search, Plus, Filter, CheckCircle2, AlertCircle } from 'lucide-react';

const MOCK_EMAILS = [
  { id: '1', sender: 'Google Cloud', subject: 'Your monthly billing statement', body: 'Hello, your Google Cloud statement for October is now available for review...', date: '10:45 AM', read: false, label: 'Finance', priority: 'high' },
  { id: '2', sender: 'LinkedIn', subject: 'New connection request from Sarah', body: 'Sarah Jenkins wants to connect with you. She is a Senior Engineer at TechCorp...', date: 'Yesterday', read: true, label: 'Social', priority: 'low' },
  { id: '3', sender: 'GitHub', subject: '[Security] Dependabot alert for your repo', body: 'Dependabot has found a vulnerability in one of your dependencies. Please update...', date: 'Oct 24', read: false, label: 'Work', priority: 'high' },
  { id: '4', sender: 'Netflix', subject: 'New arrival: Stranger Things Season 5', body: 'The wait is finally over. Dive back into the Upside Down now on Netflix...', date: 'Oct 23', read: true, label: 'Promotions', priority: 'low' },
  { id: '5', sender: 'Amazon', subject: 'Your package has been delivered', body: 'Good news! Your order #123-456 has been delivered to your front porch...', date: 'Oct 22', read: true, label: 'Finance', priority: 'medium' },
];

export default function Home() {
  const [emails, setEmails] = useState(MOCK_EMAILS);
  const [selectedId, setSelectedId] = useState(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [activeFilter, setActiveFilter] = useState('All');
  const [notification, setNotification] = useState(null);

  const filteredEmails = emails.filter(email => {
    const matchesSearch = email.sender.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          email.subject.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesFilter = activeFilter === 'All' || email.label === activeFilter;
    return matchesSearch && matchesFilter;
  });

  const markAsRead = (id) => {
    setEmails(prev => prev.map(e => e.id === id ? { ...e, read: true } : e));
  };

  const deleteEmail = (id) => {
    setEmails(prev => prev.filter(e => e.id !== id));
    if (selectedId === id) setSelectedId(null);
    setNotification({ type: 'success', message: 'Email moved to trash' });
    setTimeout(() => setNotification(null), 3000);
  };

  const selectedEmail = emails.find(e => e.id === selectedId);

  return (
    <div className="flex h-screen overflow-hidden bg-slate-50">
      <Sidebar 
        activeFilter={activeFilter} 
        setActiveFilter={setActiveFilter} 
      />
      
      <div className="flex-1 flex flex-col min-w-0">
        <Header 
          searchQuery={searchQuery} 
          setSearchQuery={setSearchQuery} 
        />
        
        <main className="flex-1 flex overflow-hidden">
          <EmailList 
            emails={filteredEmails} 
            selectedId={selectedId} 
            setSelectedId={(id) => {
              setSelectedId(id);
              markAsRead(id);

          />
          
          <div className="flex-1 bg-white border-l border-slate-200 overflow-y-auto">
            {selectedEmail ? (
              <EmailDetail 
                email={selectedEmail} 
                onDelete={() => deleteEmail(selectedEmail.id)} 
              />
            ) : (
              <div className="h-full flex flex-col items-center justify-center text-slate-400 p-8 text-center">
                <div className="bg-slate-100 p-6 rounded-full mb-4">
                  <Search size={48} className="text-slate-300" />
                </div>
                <h3 className="text-lg font-medium text-slate-600">No email selected</h3>
                <p className="max-w-xs">Select an email from the list to read its contents or manage the conversation.</p>
              </div>
            )}
          </div>
        </main>
      </div>

      {notification && (
        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 px-4 py-3 rounded-lg shadow-2xl animate-bounce bg-slate-900 text-white border border-slate-700">
          {notification.type === 'success' ? <CheckCircle2 size={18} className="text-green-400" /> : <AlertCircle size={18} className="text-red-400" />}
          <span className="text-sm font-medium">{notification.message}</span>
        </div>
      )}
    </div>
  );
}