import React, { useState } from 'react';
import { AccountSwitcher } from './account-switcher';
import { MailList } from './mail-list';
import { MailDisplay } from './mail-display';
import { mails, accounts } from '../data';

export function Mail() {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [activeTab, setActiveTab] = useState('all');
  const [selectedMailId, setSelectedMailId] = useState<string | null>(null);

  const toggleCollapse = () => setIsCollapsed(!isCollapsed);

  const filteredMails = activeTab === 'all' 
    ? mails 
    : mails.filter(mail => !mail.read);

  return (
    <div className="flex h-screen">
      <div className={`${isCollapsed ? 'w-16' : 'w-64'} border-r flex flex-col`}>
        <div className="p-4 border-b">
          <AccountSwitcher isCollapsed={isCollapsed} accounts={accounts} />
        </div>
        <div className="p-4">
          <button onClick={toggleCollapse} className="w-full text-left">
            {isCollapsed ? '»' : '« Collapse'}
          </button>
        </div>
      </div>

      <div className="flex-1 flex flex-col border-r">
        <div className="p-4 border-b">
          <div className="flex justify-between items-center">
            <h2 className="text-xl font-bold">Inbox</h2>
            <div className="flex space-x-2">
              <button
                onClick={() => setActiveTab('all')}
                className={`px-3 py-1 rounded ${activeTab === 'all' ? 'bg-blue-500 text-white' : ''}`}
              >
                All mail
              </button>
              <button
                onClick={() => setActiveTab('unread')}
                className={`px-3 py-1 rounded ${activeTab === 'unread' ? 'bg-blue-500 text-white' : ''}`}
              >
                Unread
              </button>
            </div>
          </div>
          <div className="mt-4">
            <input
              type="text"
              placeholder="Search"
              className="w-full p-2 border rounded"
            />
          </div>
        </div>
        <div className="flex-1 overflow-auto">
          <MailList 
            items={filteredMails} 
            selectedId={selectedMailId}
            onSelect={setSelectedMailId}
          />
        </div>
      </div>

      <div className="flex-1">
        <MailDisplay mail={mails.find(mail => mail.id === selectedMailId) || null} />
      </div>
    </div>
  );
}