'use client';

import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Mail, Inbox, Send, Star, Trash, Settings, Plus, Menu, Search, User, X } from 'lucide-react';

interface Account {
  id: number;
  name: string;
  email: string;
  color: string;
}

interface Email {
  id: number;
  accountId: number;
  from: string;
  fromName: string;
  to: string;
  subject: string;
  body: string;
  date: string;
  read: boolean;
  starred: boolean;
  category: string;
}

export default function MailPage() {
  // Mock data for email accounts
  const [accounts, setAccounts] = useState<Account[]>([
    { id: 1, name: 'Work', email: 'john.doe@company.com', color: 'bg-blue-500' },
    { id: 2, name: 'Personal', email: 'johndoe@gmail.com', color: 'bg-green-500' },
    { id: 3, name: 'Side Project', email: 'john@sideproject.io', color: 'bg-purple-500' }
  ]);

  // Mock data for emails
  const [emails, setEmails] = useState<Email[]>([
    {
      id: 1,
      accountId: 1,
      from: 'sarah@company.com',
      fromName: 'Sarah Johnson',
      to: 'john.doe@company.com',
      subject: 'Project Status Update',
      body: 'Hi John, here is the latest update on the project. We have completed the first phase and are moving to the second phase.',
      date: '2025-04-15T10:30:00',
      read: false,
      starred: true,
      category: 'inbox'
    },
    {
      id: 2,
      accountId: 1,
      from: 'mike@company.com',
      fromName: 'Mike Chen',
      to: 'john.doe@company.com',
      subject: 'Meeting Tomorrow',
      body: 'Don\'t forget we have a team meeting tomorrow at 10am in Conference Room A.',
      date: '2025-04-14T16:45:00',
      read: true,
      starred: false,
      category: 'inbox'
    },
    {
      id: 3,
      accountId: 2,
      from: 'lisa@gmail.com',
      fromName: 'Lisa Smith',
      to: 'johndoe@gmail.com',
      subject: 'Weekend Plans',
      body: 'Hey, are you free this weekend? I was thinking we could go hiking at the national park.',
      date: '2025-04-13T09:15:00',
      read: false,
      starred: false,
      category: 'inbox'
    }
  ]);

  const [selectedAccount, setSelectedAccount] = useState(1);
  const [currentView, setCurrentView] = useState('inbox');
  const [selectedEmail, setSelectedEmail] = useState<number | null>(null);
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
  const [composeOpen, setComposeOpen] = useState(false);

  // Filter emails based on selected account and view
  const filteredEmails = emails.filter(email => 
    email.accountId === selectedAccount && 
    (currentView === 'starred' ? email.starred : email.category === currentView)
  );

  // Handle email selection
  const handleEmailClick = (emailId: number) => {
    const updatedEmails = emails.map(email => 
      email.id === emailId ? { ...email, read: true } : email
    );
    setEmails(updatedEmails);
    setSelectedEmail(emailId);
  };

  // Toggle starred status
  const toggleStarred = (emailId: number, e: React.MouseEvent) => {
    e.stopPropagation();
    const updatedEmails = emails.map(email => 
      email.id === emailId ? { ...email, starred: !email.starred } : email
    );
    setEmails(updatedEmails);
  };

  // Format date for display
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    const now = new Date();
    
    if (date.toDateString() === now.toDateString()) {
      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    } else {
      return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
    }
  };

  // Get selected email
  const getSelectedEmail = () => {
    return emails.find(email => email.id === selectedEmail);
  };

  // Get account color
  const getAccountColor = (accountId: number) => {
    const account = accounts.find(acc => acc.id === accountId);
    return account ? account.color : 'bg-gray-500';
  };

  return (
    <div className="flex h-screen bg-gray-50 text-gray-900 overflow-hidden">
      {/* Sidebar */}
      <div className={`${sidebarOpen ? 'w-64' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
                    ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
        {/* Logo and toggle */}
        <div className="p-3 flex items-center justify-between border-b border-gray-100">
          {sidebarOpen && <h1 className="text-lg font-semibold text-gray-800">Mail</h1>}
          <Button 
            variant="ghost"
            size="icon"
            className="hidden md:flex text-gray-600"
            onClick={() => setSidebarOpen(!sidebarOpen)}
          >
            {sidebarOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
          </Button>
        </div>

        {/* Compose button */}
        <Button 
          className={`mx-3 mt-3 mb-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all ${sidebarOpen ? 'py-2 px-4' : 'p-2'}`}
          onClick={() => setComposeOpen(true)}
        >
          {sidebarOpen ? (
            <div className="flex items-center">
              <Plus className="h-4 w-4" />
              <span className="ml-2">Compose</span>
            </div>
          ) : (
            <Plus className="h-4 w-4" />
          )}
        </Button>

        {/* Navigation */}
        <nav className="flex-1 overflow-y-auto py-2">
          <ul className="space-y-0.5 px-2">
            <li>
              <Button 
                variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
                className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
                onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
              >
                <Inbox className="h-4 w-4 mr-2" />
                {sidebarOpen && <span>Inbox</span>}
              </Button>
            </li>
            <li>
              <Button 
                variant={currentView === 'starred' ? 'secondary' : 'ghost'}
                className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
                onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
              >
                <Star className="h-4 w-4 mr-2" />
                {sidebarOpen && <span>Starred</span>}
              </Button>
            </li>
            <li>
              <Button 
                variant={currentView === 'sent' ? 'secondary' : 'ghost'}
                className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
                onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
              >
                <Send className="h-4 w-4 mr-2" />
                {sidebarOpen && <span>Sent</span>}
              </Button>
            </li>
            <li>
              <Button 
                variant={currentView === 'trash' ? 'secondary' : 'ghost'}
                className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
                onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
              >
                <Trash className="h-4 w-4 mr-2" />
                {sidebarOpen && <span>Trash</span>}
              </Button>
            </li>
          </ul>

          {/* Account selection */}
          {sidebarOpen && (
            <div className="mt-6 px-4">
              <h2 className="text-xs uppercase text-gray-500 font-semibold mb-2 px-2">Accounts</h2>
              <ul className="space-y-1">
                {accounts.map(account => (
                  <li key={account.id}>
                    <Button 
                      variant="ghost"
                      className={`w-full justify-start px-3 py-2 ${selectedAccount === account.id ? 'bg-gray-100' : ''} hover:bg-gray-50`}
                      onClick={() => {setSelectedAccount(account.id); setSelectedEmail(null);}}
                    >
                      <div className={`w-2.5 h-2.5 rounded-full ${account.color} mr-3`}></div>
                      <div className="text-left">
                        <div className="font-medium text-sm">{account.name}</div>
                        <div className="text-xs text-gray-500">{account.email}</div>
                      </div>
                    </Button>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </nav>

        {/* Settings */}
        <div className="p-3 border-t border-gray-100">
          <Button variant="ghost" className={`${sidebarOpen ? 'w-full' : 'justify-center'} text-gray-600 hover:text-gray-900`}>
            <Settings className="h-4 w-4" />
            {sidebarOpen && <span className="ml-3">Settings</span>}
          </Button>
        </div>
      </div>

      {/* Main content */}
      <div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
        {/* Header */}
        <header className="bg-white/95 backdrop-blur-sm border-b border-gray-100 py-3 px-4">
          <div className="flex items-center justify-between">
            <div className="flex-1 max-w-xl">
              <div className="relative">
                <Input 
                  type="text" 
                  placeholder="Search emails..." 
                  className="pl-9 bg-gray-50 border-0"
                />
                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
              </div>
            </div>
            <Button variant="ghost" size="icon" className="ml-4 text-gray-600">
              <User className="h-4 w-4" />
            </Button>
          </div>
        </header>

        {/* Email list and detail view */}
        <div className="flex-1 flex overflow-hidden">
          {/* Email list */}
          <div className={`${selectedEmail ? 'hidden md:block md:w-1/3 xl:w-2/5' : 'w-full'} bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto`}>
            <div className="p-4 border-b border-gray-100 flex justify-between items-center">
              <h2 className="text-lg font-semibold text-gray-800 capitalize">
                {currentView === 'starred' ? 'Starred' : currentView}
              </h2>
              <div className="text-sm text-gray-500">
                {filteredEmails.length} emails
              </div>
            </div>

            {filteredEmails.length > 0 ? (
              <ul>
                {filteredEmails.map(email => (
                  <li 
                    key={email.id}
                    className={`border-b border-gray-100 cursor-pointer ${email.read ? 'bg-white/95' : 'bg-blue-50/95'} hover:bg-gray-50/95`}
                    onClick={() => handleEmailClick(email.id)}
                  >
                    <div className="p-4">
                      <div className="flex justify-between items-start mb-1">
                        <div className="flex items-center">
                          <div className={`w-2 h-2 rounded-full ${!email.read ? 'bg-blue-600' : 'bg-transparent'} mr-2`}></div>
                          <span className={`font-medium ${!email.read ? 'font-semibold' : ''} text-gray-900`}>{email.fromName}</span>
                        </div>
                        <div className="text-xs text-gray-500">{formatDate(email.date)}</div>
                      </div>
                      <div className="flex justify-between items-center mb-1">
                        <h3 className={`${!email.read ? 'font-semibold' : ''} text-gray-800`}>{email.subject}</h3>
                        <Button 
                          variant="ghost"
                          size="sm"
                          className="text-gray-400 hover:text-yellow-500"
                          onClick={(e) => toggleStarred(email.id, e)}
                        >
                          <Star className="h-4 w-4" fill={email.starred ? 'currentColor' : 'none'} color={email.starred ? '#F59E0B' : 'currentColor'} />
                        </Button>
                      </div>
                      <p className="text-sm text-gray-600 truncate">
                        {email.body}
                      </p>
                    </div>
                  </li>
                ))}
              </ul>
            ) : (
              <div className="flex flex-col items-center justify-center h-64 text-gray-500">
                <Mail className="h-12 w-12 mb-4 opacity-30" />
                <p>No emails in this folder</p>
              </div>
            )}
          </div>

          {/* Email detail view */}
          {selectedEmail ? (
            <div className="flex-1 overflow-y-auto bg-white p-6">
              <div className="max-w-3xl mx-auto">
                {getSelectedEmail() && (
                  <>
                    <div className="mb-6">
                      <div className="flex justify-between items-center mb-4">
                        <h1 className="text-xl font-bold">{getSelectedEmail()?.subject}</h1>
                        <Button 
                          variant="ghost"
                          size="sm"
                          className="text-gray-400 hover:text-yellow-400"
                          onClick={(e) => getSelectedEmail() && toggleStarred(getSelectedEmail()!.id, e)}
                        >
                          <Star className="h-5 w-5" fill={getSelectedEmail()?.starred ? 'currentColor' : 'none'} />
                        </Button>
                      </div>
                      
                      <div className="flex items-center">
                        <Avatar>
                          <AvatarFallback className={`${getAccountColor(getSelectedEmail()!.accountId)}`}>
                            {getSelectedEmail()?.fromName.charAt(0)}
                          </AvatarFallback>
                        </Avatar>
                        <div className="ml-3">
                          <div className="font-medium">{getSelectedEmail()?.fromName}</div>
                          <div className="text-sm text-gray-500 flex items-center">
                            <span>{getSelectedEmail()?.from}</span>
                            <span className="mx-2">•</span>
                            <span>{new Date(getSelectedEmail()!.date).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    <div className="border-t border-gray-200 pt-6 prose max-w-none">
                      <p>{getSelectedEmail()?.body}</p>
                    </div>
                    
                    <div className="mt-8 pt-6 border-t border-gray-200">
                      <div className="flex space-x-4">
                        <Button variant="outline" className="flex items-center gap-2">
                          <Send className="h-4 w-4" />
                          Reply
                        </Button>
                        <Button variant="outline" className="flex items-center gap-2">
                          <Send className="h-4 w-4" />
                          Forward
                        </Button>
                      </div>
                    </div>
                  </>
                )}
              </div>
            </div>
          ) : (
            <div className="hidden md:flex flex-1 items-center justify-center bg-gray-50 text-gray-500">
              <div className="text-center">
                <Mail className="h-16 w-16 mx-auto mb-4 opacity-30" />
                <p>Select an email to read</p>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Compose email modal */}
      {composeOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center p-4 z-50">
          <Card className="w-full max-w-2xl">
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>New Message</CardTitle>
              <Button 
                variant="ghost"
                size="icon"
                onClick={() => setComposeOpen(false)}
              >
                <X className="h-4 w-4" />
              </Button>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">From</label>
                  <select className="w-full border border-gray-300 rounded-lg px-3 py-2">
                    {accounts.map(account => (
                      <option key={account.id} value={account.id}>
                        {account.name} ({account.email})
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">To</label>
                  <Input type="email" placeholder="email@example.com" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                  <Input type="text" placeholder="Subject" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Message</label>
                  <Textarea 
                    className="h-48"
                    placeholder="Write your message here..."
                  />
                </div>
              </div>
              <div className="mt-6 flex justify-end space-x-3">
                <Button 
                  variant="outline"
                  onClick={() => setComposeOpen(false)}
                >
                  Cancel
                </Button>
                <Button 
                  onClick={() => setComposeOpen(false)}
                >
                  Send
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}