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

'use client';

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

interface Email {
  key: string;
  subject: string;
  date: string;
  processed: string;
  processedAt: string | null; // Wird nicht mehr angezeigt, aber im Interface belassen
  processedBy: string | null;
  queuedTo: string | null;
  status: string | null;
}

export default function Emails() {
  const searchParams = useSearchParams();
  const bucket = searchParams.get('bucket');
  const mailbox = searchParams.get('mailbox');
  const [emails, setEmails] = useState<Email[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

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

    fetch(`/api/emails?bucket=${bucket}&mailbox=${encodeURIComponent(mailbox)}`, { 
      headers: { Authorization: `Basic ${auth}` } 
    })
      .then(res => {
        if (!res.ok) throw new Error('Failed to fetch emails');
        return res.json();
      })
      .then(data => {
        const sorted = data.sort((a: Email, b: Email) => new Date(b.date).getTime() - new Date(a.date).getTime());
        setEmails(sorted);
      })
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, [bucket, mailbox]);

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

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

  // DEFINITION DES GRID LAYOUTS
  // 1fr = Subject (nimmt den Rest)
  // auto = Passt sich exakt der Breite des Inhalts an (für Key, Date, etc.)
  const gridLayoutClass = "grid grid-cols-[1fr_auto_auto_auto_auto_auto_auto_auto] gap-x-4 items-center";

  return (
    <div className="min-h-screen bg-gray-50 p-4">
      <nav className="w-full mb-6 bg-white p-3 rounded shadow-sm border border-gray-100">
        <ol className="flex flex-wrap space-x-2 text-sm text-gray-500">
           {/* Breadcrumbs verkürzt für Übersichtlichkeit */}
          <li><Link href="/" className="hover:text-blue-600">Home</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 className="font-semibold text-gray-700">Emails</li>
        </ol>
      </nav>
      
      <h1 className="text-2xl font-bold mb-6 text-gray-800 break-all">
        {mailbox} <span className="text-gray-400 font-normal text-lg">in {bucket}</span>
      </h1>
      
      {/* Container - overflow-x-auto erlaubt Scrollen nur wenn der Key GIGANTISCH ist und den Bildschirm sprengt */}
      <div className="w-full bg-white rounded shadow-sm border border-gray-200 overflow-x-auto">
        <div className="min-w-fit">
          
          {/* HEADER */}
          <div className={`${gridLayoutClass} px-4 py-3 bg-gray-100 border-b border-gray-200 text-xs font-semibold text-gray-600 uppercase tracking-wider`}>
            <div>Subject</div>
            <div className="whitespace-nowrap">Date</div>
            <div>Key</div>
            <div className="text-center">Proc.</div>
            {/* Proc At entfernt */}
            <div>Proc. By</div>
            <div>Queued</div>
            <div>Status</div>
            <div className="text-right">Action</div>
          </div>

          {/* ROWS */}
          <div className="divide-y divide-gray-100">
            {emails.length === 0 ? (
              <div className="p-8 text-center text-gray-500">No emails found</div>
            ) : emails.map((e: Email) => (
              <div key={e.key} className={`${gridLayoutClass} px-4 py-2 hover:bg-blue-50 transition-colors text-sm`}>
                
                {/* 1. Subject: truncate sorgt für "..." am Ende, min-w-0 ist wichtig für Grid Truncation */}
                <div className="font-medium text-gray-900 truncate min-w-0 pr-4" title={e.subject}>
                  {e.subject}
                </div>

                {/* 2. Date: Fixed width content via whitespace-nowrap */}
                <div className="whitespace-nowrap text-gray-500 text-xs">
                  {formatDate(e.date)}
                </div>

                {/* 3. Key: Monospace Font, volle Sichtbarkeit, selektierbar */}
                <div className="font-mono text-xs text-gray-600 select-all">
                  {e.key}
                </div>

                {/* 4. Processed: Kurz */}
                <div className="text-center">
                   <span className={`inline-flex items-center justify-center px-2 py-0.5 rounded text-xs font-medium ${
                    e.processed === 'true' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'
                  }`}>
                    {e.processed === 'true' ? 'Y' : 'N'}
                  </span>
                </div>

                {/* Proc At entfernt */}

                {/* 5. Processed By: Auto width */}
                <div className="text-gray-500 text-xs truncate max-w-[150px]" title={e.processedBy || ''}>
                  {e.processedBy ? e.processedBy.split('@')[0] : '-'}
                </div>

                {/* 6. Queued: Auto width */}
                <div className="text-gray-500 text-xs truncate max-w-[150px]" title={e.queuedTo || ''}>
                   {e.queuedTo || '-'}
                </div>

                {/* 7. Status */}
                <div className="whitespace-nowrap">
                  {e.status ? (
                    <span className={`text-xs ${
                      e.status === 'delivered' ? 'text-green-600' : 
                      e.status === 'failed' ? 'text-red-600' : 
                      'text-gray-500'
                    }`}>
                      {e.status}
                    </span>
                  ) : <span className="text-gray-300">-</span>}
                </div>

                {/* 8. Action: Rechtsbündig aligned mit Header */}
                <div className="text-right font-medium">
                  <Link href={`/email?bucket=${bucket}&key=${e.key}&mailbox=${encodeURIComponent(mailbox || '')}`} className="text-blue-600 hover:text-blue-800 hover:underline">
                    View
                  </Link>
                </div>

              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}