'use client'

import { useState } from 'react'

const actionLabels: Record<string, string> = {
  account_created: 'Konto erstellt',
  email_analyzed: 'E-Mail analysiert',
  task_created: 'Aufgabe erstellt',
  sync_completed: 'Sync abgeschlossen',
}

export function AuditLogTab() {
  const [logs] = useState([
    { id: '1', action: 'account_created', user: 'admin@breakpilot.de', timestamp: new Date().toISOString(), details: 'Konto schulleitung@example.de hinzugefuegt' },
    { id: '2', action: 'email_analyzed', user: 'system', timestamp: new Date(Date.now() - 3600000).toISOString(), details: '5 E-Mails analysiert' },
    { id: '3', action: 'task_created', user: 'system', timestamp: new Date(Date.now() - 7200000).toISOString(), details: 'Aufgabe aus Fristenerkennung erstellt' },
  ])

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-lg font-semibold text-slate-900">Audit-Log</h2>
        <p className="text-sm text-slate-500">Alle Aktionen im Mail-System</p>
      </div>

      <div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
        <table className="min-w-full divide-y divide-slate-200">
          <thead className="bg-slate-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Zeit</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Aktion</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Benutzer</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Details</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-200">
            {logs.map((log) => (
              <tr key={log.id} className="hover:bg-slate-50">
                <td className="px-6 py-4 text-sm text-slate-500">
                  {new Date(log.timestamp).toLocaleString('de-DE')}
                </td>
                <td className="px-6 py-4">
                  <span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded font-medium">
                    {actionLabels[log.action] || log.action}
                  </span>
                </td>
                <td className="px-6 py-4 text-sm text-slate-700">{log.user}</td>
                <td className="px-6 py-4 text-sm text-slate-500">{log.details}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}