NeahFront9/app/mail/page.tsx

'use client';

import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Mail, Search, Star, Inbox, Send, Archive, Trash, AlertCircle } from "lucide-react"
import { useState, useEffect } from "react"

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() {
  const [emails, setEmails] = useState<Email[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    async function fetchEmails() {
      try {
        setError(null)
        const res = await fetch('/api/mail')
        if (!res.ok) {
          const errorData = await res.json().catch(() => ({}))
          throw new Error(errorData.error || 'Failed to fetch emails')
        }
        const data = await res.json()
        setEmails(data.messages || [])
      } catch (error) {
        console.error('Error fetching emails:', error)
        setError('Unable to connect to mail server. Please try again later.')
        setEmails([])
      } finally {
        setLoading(false)
      }
    }

    fetchEmails()
  }, [])

  return (
    <div className="flex h-screen bg-gray-100">
      {/* Sidebar */}
      <div className="w-64 bg-white shadow-sm border-r border-gray-200 p-4">
        <Button className="w-full mb-4 gap-2">
          <Mail className="h-4 w-4" />
          Compose
        </Button>
        
        <nav className="space-y-1">
          <Button variant="ghost" className="w-full justify-start gap-2">
            <Inbox className="h-4 w-4" />
            Inbox
          </Button>
          <Button variant="ghost" className="w-full justify-start gap-2">
            <Star className="h-4 w-4" />
            Starred
          </Button>
          <Button variant="ghost" className="w-full justify-start gap-2">
            <Send className="h-4 w-4" />
            Sent
          </Button>
          <Button variant="ghost" className="w-full justify-start gap-2">
            <Archive className="h-4 w-4" />
            Archive
          </Button>
          <Button variant="ghost" className="w-full justify-start gap-2">
            <Trash className="h-4 w-4" />
            Trash
          </Button>
        </nav>
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col">
        <header className="bg-white shadow-sm border-b border-gray-200 p-4">
          <div className="flex items-center">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                <Input
                  type="search"
                  placeholder="Search mail..."
                  className="w-full pl-10"
                />
              </div>
            </div>
          </div>
        </header>

        <main className="flex-1 overflow-auto p-4">
          {loading ? (
            <div className="flex items-center justify-center h-full">
              <p className="text-gray-500">Loading emails...</p>
            </div>
          ) : error ? (
            <div className="flex flex-col items-center justify-center h-full text-center">
              <AlertCircle className="h-12 w-12 text-yellow-500 mb-4" />
              <p className="text-gray-600 mb-2">{error}</p>
              <Button 
                variant="outline" 
                onClick={() => {
                  setLoading(true)
                  setError(null)
                  fetchEmails()
                }}
              >
                Try Again
              </Button>
            </div>
          ) : (
            <div className="space-y-2">
              {emails.length === 0 ? (
                <div className="flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center">
                  <Mail className="h-12 w-12 text-gray-400 mb-4" />
                  <p className="text-gray-600">No emails found</p>
                </div>
              ) : (
                emails.map((email) => (
                  <Card key={email.id} className={`p-4 hover:bg-gray-50 cursor-pointer ${!email.read ? 'bg-blue-50' : ''}`}>
                    <div className="flex items-center gap-4">
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-4 w-4 p-0"
                        onClick={(e) => {
                          e.stopPropagation()
                          // TODO: Implement star functionality
                        }}
                      >
                        <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : 'text-gray-400'}`} />
                      </Button>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2">
                          <p className="font-medium truncate">{email.fromName}</p>
                          <span className="text-sm text-gray-500">
                            {new Date(email.date).toLocaleDateString()}
                          </span>
                        </div>
                        <p className="text-sm font-medium truncate">{email.subject}</p>
                        <p className="text-sm text-gray-500 truncate">{email.body}</p>
                      </div>
                    </div>
                  </Card>
                ))
              )}
            </div>
          )}
        </main>
      </div>
    </div>
  )
}