mail-s3-admin/app/email/page.tsx

'use client';

import { useState, useEffect } from 'react';
import { useSearchParams } from 'next/navigation';
import Link from 'next/link';

export default function EmailDetail() {
  const searchParams = useSearchParams();
  const bucket = searchParams.get('bucket');
  const key = searchParams.get('key');
  const mailbox = searchParams.get('mailbox');
  const [email, setEmail] = useState({ 
    subject: '', 
    from: '', 
    to: '', 
    html: '', 
    raw: '', 
    processed: '',
    processedAt: null as string | null,
    processedBy: null as string | null,
    queuedTo: null as string | null,
    status: null as string | null,
  });
  const [viewMode, setViewMode] = useState('html');
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!bucket || !key) {
      setError('Missing parameters');
      setLoading(false);
      return;
    }
    const auth = localStorage.getItem('auth');
    if (!auth) {
      setError('Not authenticated');
      setLoading(false);
      return;
    }

    fetch(`/api/email?bucket=${bucket}&key=${key}`, { 
      headers: { Authorization: `Basic ${auth}` } 
    })
      .then(res => {
        if (!res.ok) throw new Error('Failed to fetch email');
        return res.json();
      })
      .then(setEmail)
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, [bucket, key]);

  if (loading) return <div className="min-h-screen flex items-center justify-center bg-gray-100">Loading...</div>;
  if (error) return <div className="min-h-screen flex items-center justify-center bg-gray-100 text-red-500">{error}</div>;

  const formatDate = (dateStr: string | null) => {
    if (!dateStr) return 'N/A';
    const date = new Date(dateStr);
    return date.toLocaleString('en-US', { 
      year: 'numeric', 
      month: '2-digit', 
      day: '2-digit', 
      hour: '2-digit', 
      minute: '2-digit',
      second: '2-digit',
      hour12: false 
    });
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-gray-100 p-8">
      <nav className="max-w-4xl mx-auto mb-6 bg-white p-4 rounded-lg shadow-sm">
        <ol className="flex flex-wrap space-x-2 text-sm text-gray-500">
          <li><Link href="/" className="hover:text-blue-600">Home</Link></li>
          <li className="mx-1">/</li>
          <li><Link href="/domains" className="hover:text-blue-600">Domains</Link></li>
          <li className="mx-1">/</li>
          <li><Link href={`/mailboxes?bucket=${bucket}`} className="hover:text-blue-600">Mailboxes</Link></li>
          <li className="mx-1">/</li>
          <li><Link href={`/emails?bucket=${bucket}&mailbox=${encodeURIComponent(mailbox || '')}`} className="hover:text-blue-600">Emails</Link></li>
          <li className="mx-1">/</li>
          <li className="font-semibold text-gray-700">Detail</li>
        </ol>
      </nav>
      <div className="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-8">
        <h1 className="text-4xl font-bold mb-6 text-gray-800">{email.subject}</h1>
        
        <div className="grid grid-cols-2 gap-4 mb-6 bg-gray-50 p-6 rounded-lg">
          <div>
            <p className="text-gray-700 mb-2"><strong>From:</strong> {email.from}</p>
            <p className="text-gray-700 mb-2"><strong>To:</strong> {email.to}</p>
            <p className="text-gray-700 mb-2"><strong>S3 Key:</strong> <span className="text-sm break-all">{key}</span></p>
          </div>
          <div>
            <p className="text-gray-700 mb-2">
              <strong>Processed:</strong> 
              <span className={`ml-2 px-2 py-1 rounded-full text-xs font-medium ${email.processed === 'true' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
                {email.processed === 'true' ? 'Yes' : 'No'}
              </span>
            </p>
            <p className="text-gray-700 mb-2"><strong>Processed At:</strong> {formatDate(email.processedAt)}</p>
            <p className="text-gray-700 mb-2"><strong>Processed By:</strong> {email.processedBy || 'N/A'}</p>
            <p className="text-gray-700 mb-2"><strong>Queued To:</strong> {email.queuedTo || 'N/A'}</p>
            <p className="text-gray-700 mb-2">
              <strong>Status:</strong> 
              {email.status ? (
                <span className={`ml-2 px-2 py-1 rounded-full text-xs font-medium ${
                  email.status === 'delivered' ? 'bg-green-100 text-green-800' : 
                  email.status === 'failed' ? 'bg-red-100 text-red-800' : 
                  'bg-gray-100 text-gray-800'
                }`}>
                  {email.status}
                </span>
              ) : 'N/A'}
            </p>
          </div>
        </div>
        
        <div className="flex mb-6 space-x-2">
          <button 
            onClick={() => setViewMode('html')} 
            className={`px-6 py-3 rounded-md font-medium ${viewMode === 'html' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'} hover:bg-blue-700 transition`}
          >
            HTML
          </button>
          <button 
            onClick={() => setViewMode('raw')} 
            className={`px-6 py-3 rounded-md font-medium ${viewMode === 'raw' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'} hover:bg-blue-700 transition`}
          >
            RAW
          </button>
        </div>
        <div className="border border-gray-300 p-6 rounded-lg bg-white overflow-auto max-h-[600px] shadow-inner">
          {viewMode === 'html' ? (
            <div dangerouslySetInnerHTML={{ __html: email.html }} className="prose prose-lg max-w-none" />
          ) : (
            <pre className="whitespace-pre-wrap text-sm font-mono bg-gray-50 p-4 rounded">{email.raw}</pre>
          )}
        </div>
      </div>
    </div>
  );
}