'use client'

import { SendLog } from '../_types'

interface LogsTabProps {
  logs: SendLog[]
  total: number
}

export function LogsTab({ logs, total }: LogsTabProps) {
  return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold">E-Mail-Verlauf ({total})</h2>

      {logs.length === 0 ? (
        <p className="text-gray-500 text-sm">Noch keine E-Mails gesendet.</p>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-gray-200">
                <th className="text-left py-2 px-3 text-gray-500 font-medium">Typ</th>
                <th className="text-left py-2 px-3 text-gray-500 font-medium">Empfaenger</th>
                <th className="text-left py-2 px-3 text-gray-500 font-medium">Betreff</th>
                <th className="text-left py-2 px-3 text-gray-500 font-medium">Status</th>
                <th className="text-left py-2 px-3 text-gray-500 font-medium">Datum</th>
              </tr>
            </thead>
            <tbody>
              {logs.map(log => (
                <tr key={log.id} className="border-b border-gray-100 hover:bg-gray-50">
                  <td className="py-2 px-3 font-mono text-xs">{log.template_type}</td>
                  <td className="py-2 px-3">{log.recipient}</td>
                  <td className="py-2 px-3">{log.subject}</td>
                  <td className="py-2 px-3">
                    <span className={`px-2 py-0.5 rounded text-xs ${
                      log.status === 'sent' || log.status === 'test_sent'
                        ? 'bg-green-100 text-green-700'
                        : 'bg-red-100 text-red-700'
                    }`}>
                      {log.status}
                    </span>
                  </td>
                  <td className="py-2 px-3 text-gray-500">
                    {log.sent_at ? new Date(log.sent_at).toLocaleString('de-DE') : '-'}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}