'use client'

import React, { useState, useEffect, useCallback } from 'react'
import { useSDK } from '@/lib/sdk'
import { StepHeader } from '@/components/sdk/StepHeader'

// =============================================================================
// TYPES
// =============================================================================

interface EmailTemplate {
  id: string
  template_type: string
  name: string
  description: string | null
  category: string
  is_active: boolean
  sort_order: number
  variables: string[]
  latest_version?: TemplateVersion | null
  created_at: string | null
  updated_at: string | null
}

interface TemplateVersion {
  id: string
  template_id: string
  version: string
  language: string
  subject: string
  body_html: string
  body_text: string | null
  status: string
  submitted_at: string | null
  published_at: string | null
  created_at: string | null
}

interface TemplateType {
  type: string
  name: string
  category: string
  variables: string[]
}

interface SendLog {
  id: string
  template_type: string
  recipient: string
  subject: string
  status: string
  sent_at: string | null
}

interface Settings {
  sender_name: string
  sender_email: string
  reply_to: string | null
  logo_url: string | null
  primary_color: string
  secondary_color: string
  footer_text: string
  company_name: string | null
  company_address: string | null
}

type TabId = 'templates' | 'editor' | 'settings' | 'logs'

const API_BASE = '/api/sdk/v1/compliance/email-templates'

function getHeaders(): HeadersInit {
  if (typeof window === 'undefined') return { 'Content-Type': 'application/json' }
  return {
    'Content-Type': 'application/json',
    'X-Tenant-ID': localStorage.getItem('bp_tenant_id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e',
    'X-User-ID': localStorage.getItem('bp_user_id') || '',
  }
}

// =============================================================================
// CATEGORY CONFIG
// =============================================================================

const CATEGORIES: Record<string, { label: string; color: string; bgColor: string }> = {
  general: { label: 'Allgemein', color: 'text-gray-700', bgColor: 'bg-gray-100' },
  dsr: { label: 'Betroffenenrechte', color: 'text-blue-700', bgColor: 'bg-blue-100' },
  consent: { label: 'Einwilligung', color: 'text-green-700', bgColor: 'bg-green-100' },
  breach: { label: 'Datenpanne', color: 'text-red-700', bgColor: 'bg-red-100' },
  vendor: { label: 'Dienstleister', color: 'text-purple-700', bgColor: 'bg-purple-100' },
  training: { label: 'Schulung', color: 'text-orange-700', bgColor: 'bg-orange-100' },
}

const STATUS_BADGE: Record<string, { label: string; color: string }> = {
  draft: { label: 'Entwurf', color: 'bg-gray-100 text-gray-700' },
  review: { label: 'Pruefung', color: 'bg-yellow-100 text-yellow-700' },
  approved: { label: 'Genehmigt', color: 'bg-blue-100 text-blue-700' },
  published: { label: 'Publiziert', color: 'bg-green-100 text-green-700' },
}

// =============================================================================
// PAGE
// =============================================================================

export default function EmailTemplatesPage() {
  const sdk = useSDK()
  const [activeTab, setActiveTab] = useState<TabId>('templates')
  const [templates, setTemplates] = useState<EmailTemplate[]>([])
  const [templateTypes, setTemplateTypes] = useState<TemplateType[]>([])
  const [settings, setSettings] = useState<Settings | null>(null)
  const [logs, setLogs] = useState<SendLog[]>([])
  const [logsTotal, setLogsTotal] = useState(0)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)

  // Editor state
  const [selectedTemplate, setSelectedTemplate] = useState<EmailTemplate | null>(null)
  const [editorSubject, setEditorSubject] = useState('')
  const [editorHtml, setEditorHtml] = useState('')
  const [editorVersion, setEditorVersion] = useState<TemplateVersion | null>(null)
  const [saving, setSaving] = useState(false)
  const [previewHtml, setPreviewHtml] = useState<string | null>(null)

  // Settings form
  const [settingsForm, setSettingsForm] = useState<Settings | null>(null)
  const [savingSettings, setSavingSettings] = useState(false)

  // =============================================================================
  // DATA LOADING
  // =============================================================================

  const loadTemplates = useCallback(async () => {
    try {
      const url = selectedCategory ? `${API_BASE}?category=${selectedCategory}` : API_BASE
      const res = await fetch(url, { headers: getHeaders() })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      const data = await res.json()
      setTemplates(Array.isArray(data) ? data : [])
    } catch (e: any) {
      setError(e.message)
    }
  }, [selectedCategory])

  const loadTypes = useCallback(async () => {
    try {
      const res = await fetch(`${API_BASE}/types`, { headers: getHeaders() })
      if (res.ok) {
        const data = await res.json()
        setTemplateTypes(Array.isArray(data) ? data : [])
      }
    } catch { /* ignore */ }
  }, [])

  const loadSettings = useCallback(async () => {
    try {
      const res = await fetch(`${API_BASE}/settings`, { headers: getHeaders() })
      if (res.ok) {
        const data = await res.json()
        setSettings(data)
        setSettingsForm(data)
      }
    } catch { /* ignore */ }
  }, [])

  const loadLogs = useCallback(async () => {
    try {
      const res = await fetch(`${API_BASE}/logs?limit=50`, { headers: getHeaders() })
      if (res.ok) {
        const data = await res.json()
        setLogs(data.logs || [])
        setLogsTotal(data.total || 0)
      }
    } catch { /* ignore */ }
  }, [])

  useEffect(() => {
    setLoading(true)
    Promise.all([loadTemplates(), loadTypes(), loadSettings()])
      .finally(() => setLoading(false))
  }, [loadTemplates, loadTypes, loadSettings])

  useEffect(() => {
    if (activeTab === 'logs') loadLogs()
  }, [activeTab, loadLogs])

  useEffect(() => {
    loadTemplates()
  }, [selectedCategory, loadTemplates])

  // =============================================================================
  // EDITOR ACTIONS
  // =============================================================================

  const openEditor = useCallback(async (template: EmailTemplate) => {
    setSelectedTemplate(template)
    setActiveTab('editor')
    setPreviewHtml(null)

    if (template.latest_version) {
      setEditorSubject(template.latest_version.subject)
      setEditorHtml(template.latest_version.body_html)
      setEditorVersion(template.latest_version)
    } else {
      // Load default content
      try {
        const res = await fetch(`${API_BASE}/default/${template.template_type}`, { headers: getHeaders() })
        if (res.ok) {
          const data = await res.json()
          setEditorSubject(data.default_subject || '')
          setEditorHtml(data.default_body_html || '')
        }
      } catch { /* ignore */ }
      setEditorVersion(null)
    }
  }, [])

  const saveVersion = useCallback(async () => {
    if (!selectedTemplate) return
    setSaving(true)
    try {
      const res = await fetch(`${API_BASE}/${selectedTemplate.id}/versions`, {
        method: 'POST',
        headers: getHeaders(),
        body: JSON.stringify({
          version: editorVersion ? `${parseFloat(editorVersion.version) + 0.1}` : '1.0',
          language: 'de',
          subject: editorSubject,
          body_html: editorHtml,
        }),
      })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      const version = await res.json()
      setEditorVersion(version)
      await loadTemplates()
    } catch (e: any) {
      setError(e.message)
    } finally {
      setSaving(false)
    }
  }, [selectedTemplate, editorSubject, editorHtml, editorVersion, loadTemplates])

  const publishVersion = useCallback(async () => {
    if (!editorVersion) return
    setSaving(true)
    try {
      const res = await fetch(`${API_BASE}/versions/${editorVersion.id}/publish`, {
        method: 'POST',
        headers: getHeaders(),
      })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      const updated = await res.json()
      setEditorVersion(updated)
      await loadTemplates()
    } catch (e: any) {
      setError(e.message)
    } finally {
      setSaving(false)
    }
  }, [editorVersion, loadTemplates])

  const loadPreview = useCallback(async () => {
    if (!editorVersion) return
    try {
      const res = await fetch(`${API_BASE}/versions/${editorVersion.id}/preview`, {
        method: 'POST',
        headers: getHeaders(),
        body: JSON.stringify({ variables: {} }),
      })
      if (res.ok) {
        const data = await res.json()
        setPreviewHtml(data.body_html)
      }
    } catch { /* ignore */ }
  }, [editorVersion])

  const saveSettings2 = useCallback(async () => {
    if (!settingsForm) return
    setSavingSettings(true)
    try {
      const res = await fetch(`${API_BASE}/settings`, {
        method: 'PUT',
        headers: getHeaders(),
        body: JSON.stringify(settingsForm),
      })
      if (res.ok) {
        const data = await res.json()
        setSettings(data)
        setSettingsForm(data)
      }
    } catch (e: any) {
      setError(e.message)
    } finally {
      setSavingSettings(false)
    }
  }, [settingsForm])

  const initializeDefaults = useCallback(async () => {
    try {
      const res = await fetch(`${API_BASE}/initialize`, {
        method: 'POST',
        headers: getHeaders(),
      })
      if (res.ok) {
        await loadTemplates()
      }
    } catch (e: any) {
      setError(e.message)
    }
  }, [loadTemplates])

  // =============================================================================
  // RENDER
  // =============================================================================

  const tabs: { id: TabId; label: string }[] = [
    { id: 'templates', label: 'Templates' },
    { id: 'editor', label: 'Editor' },
    { id: 'settings', label: 'Einstellungen' },
    { id: 'logs', label: 'Logs' },
  ]

  return (
    <div className="space-y-6">
      <StepHeader stepId="email-templates" />

      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-700">
          {error}
          <button onClick={() => setError(null)} className="ml-2 underline">Schliessen</button>
        </div>
      )}

      {/* Tab Navigation */}
      <div className="border-b border-gray-200">
        <nav className="flex gap-1 -mb-px">
          {tabs.map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab.id
                  ? 'border-purple-600 text-purple-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              {tab.label}
              {tab.id === 'logs' && logsTotal > 0 && (
                <span className="ml-1.5 px-1.5 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600">
                  {logsTotal}
                </span>
              )}
            </button>
          ))}
        </nav>
      </div>

      {/* Tab Content */}
      {activeTab === 'templates' && (
        <TemplatesTab
          templates={templates}
          loading={loading}
          selectedCategory={selectedCategory}
          onCategoryChange={setSelectedCategory}
          onEdit={openEditor}
          onInitialize={initializeDefaults}
        />
      )}

      {activeTab === 'editor' && (
        <EditorTab
          template={selectedTemplate}
          version={editorVersion}
          subject={editorSubject}
          html={editorHtml}
          previewHtml={previewHtml}
          saving={saving}
          onSubjectChange={setEditorSubject}
          onHtmlChange={setEditorHtml}
          onSave={saveVersion}
          onPublish={publishVersion}
          onPreview={loadPreview}
          onBack={() => setActiveTab('templates')}
        />
      )}

      {activeTab === 'settings' && settingsForm && (
        <SettingsTab
          settings={settingsForm}
          saving={savingSettings}
          onChange={setSettingsForm}
          onSave={saveSettings2}
        />
      )}

      {activeTab === 'logs' && (
        <LogsTab logs={logs} total={logsTotal} />
      )}
    </div>
  )
}

// =============================================================================
// TAB COMPONENTS
// =============================================================================

function TemplatesTab({
  templates, loading, selectedCategory, onCategoryChange, onEdit, onInitialize,
}: {
  templates: EmailTemplate[]
  loading: boolean
  selectedCategory: string | null
  onCategoryChange: (cat: string | null) => void
  onEdit: (t: EmailTemplate) => void
  onInitialize: () => void
}) {
  return (
    <div className="space-y-4">
      {/* Category Pills */}
      <div className="flex flex-wrap gap-2">
        <button
          onClick={() => onCategoryChange(null)}
          className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
            !selectedCategory ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
          }`}
        >
          Alle
        </button>
        {Object.entries(CATEGORIES).map(([key, cat]) => (
          <button
            key={key}
            onClick={() => onCategoryChange(key)}
            className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
              selectedCategory === key ? 'bg-purple-600 text-white' : `${cat.bgColor} ${cat.color} hover:opacity-80`
            }`}
          >
            {cat.label}
          </button>
        ))}
      </div>

      {loading ? (
        <div className="text-center py-12 text-gray-500">Lade Templates...</div>
      ) : templates.length === 0 ? (
        <div className="text-center py-12">
          <p className="text-gray-500 mb-4">Keine Templates vorhanden.</p>
          <button
            onClick={onInitialize}
            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
          >
            Standard-Templates erstellen
          </button>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {templates.map(t => (
            <TemplateCard key={t.id} template={t} onEdit={() => onEdit(t)} />
          ))}
        </div>
      )}
    </div>
  )
}

function TemplateCard({ template, onEdit }: { template: EmailTemplate; onEdit: () => void }) {
  const cat = CATEGORIES[template.category] || CATEGORIES.general
  const version = template.latest_version
  const status = version ? (STATUS_BADGE[version.status] || STATUS_BADGE.draft) : STATUS_BADGE.draft

  return (
    <div
      className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
      onClick={onEdit}
    >
      <div className="flex items-start justify-between mb-2">
        <div>
          <h3 className="font-medium text-gray-900 text-sm">{template.name}</h3>
          <span className={`inline-block mt-1 px-2 py-0.5 rounded text-xs ${cat.bgColor} ${cat.color}`}>
            {cat.label}
          </span>
        </div>
        <span className={`px-2 py-0.5 rounded text-xs ${status.color}`}>{status.label}</span>
      </div>
      {template.description && (
        <p className="text-xs text-gray-500 mt-2 line-clamp-2">{template.description}</p>
      )}
      <div className="mt-3 flex flex-wrap gap-1">
        {(template.variables || []).slice(0, 4).map(v => (
          <span key={v} className="px-1.5 py-0.5 bg-gray-50 text-gray-500 rounded text-xs font-mono">
            {`{{${v}}}`}
          </span>
        ))}
        {(template.variables || []).length > 4 && (
          <span className="text-xs text-gray-400">+{template.variables.length - 4}</span>
        )}
      </div>
      {version && (
        <div className="mt-3 text-xs text-gray-400">
          v{version.version} &middot; {version.created_at ? new Date(version.created_at).toLocaleDateString('de-DE') : ''}
        </div>
      )}
    </div>
  )
}

function EditorTab({
  template, version, subject, html, previewHtml, saving,
  onSubjectChange, onHtmlChange, onSave, onPublish, onPreview, onBack,
}: {
  template: EmailTemplate | null
  version: TemplateVersion | null
  subject: string
  html: string
  previewHtml: string | null
  saving: boolean
  onSubjectChange: (v: string) => void
  onHtmlChange: (v: string) => void
  onSave: () => void
  onPublish: () => void
  onPreview: () => void
  onBack: () => void
}) {
  if (!template) {
    return (
      <div className="text-center py-12 text-gray-500">
        Waehlen Sie ein Template aus der Liste.
        <br />
        <button onClick={onBack} className="mt-2 text-purple-600 underline">Zurueck zur Liste</button>
      </div>
    )
  }

  const cat = CATEGORIES[template.category] || CATEGORIES.general

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <button onClick={onBack} className="text-gray-500 hover:text-gray-700">&larr; Zurueck</button>
          <h2 className="text-lg font-semibold">{template.name}</h2>
          <span className={`px-2 py-0.5 rounded text-xs ${cat.bgColor} ${cat.color}`}>{cat.label}</span>
          {version && (
            <span className={`px-2 py-0.5 rounded text-xs ${(STATUS_BADGE[version.status] || STATUS_BADGE.draft).color}`}>
              {(STATUS_BADGE[version.status] || STATUS_BADGE.draft).label}
            </span>
          )}
        </div>
        <div className="flex gap-2">
          <button
            onClick={onSave}
            disabled={saving}
            className="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 disabled:opacity-50"
          >
            {saving ? 'Speichern...' : 'Version speichern'}
          </button>
          {version && version.status !== 'published' && (
            <button
              onClick={onPublish}
              disabled={saving}
              className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 disabled:opacity-50"
            >
              Publizieren
            </button>
          )}
          {version && (
            <button
              onClick={onPreview}
              className="px-3 py-1.5 border border-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-50"
            >
              Vorschau
            </button>
          )}
        </div>
      </div>

      {/* Variables */}
      <div className="flex flex-wrap gap-1.5">
        <span className="text-xs text-gray-500 mr-1">Variablen:</span>
        {(template.variables || []).map(v => (
          <button
            key={v}
            onClick={() => onHtmlChange(html + `{{${v}}}`)}
            className="px-2 py-0.5 bg-purple-50 text-purple-700 rounded text-xs font-mono hover:bg-purple-100 transition-colors"
          >
            {`{{${v}}}`}
          </button>
        ))}
      </div>

      {/* Split View */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {/* Editor */}
        <div className="space-y-3">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Betreff</label>
            <input
              type="text"
              value={subject}
              onChange={e => onSubjectChange(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              placeholder="E-Mail Betreff..."
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">HTML-Inhalt</label>
            <textarea
              value={html}
              onChange={e => onHtmlChange(e.target.value)}
              rows={20}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-y"
              placeholder="<p>Sehr geehrte(r) {{user_name}},</p>"
            />
          </div>
        </div>

        {/* Preview */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Vorschau</label>
          <div className="border border-gray-200 rounded-lg bg-white p-4 min-h-[400px]">
            {previewHtml ? (
              <div dangerouslySetInnerHTML={{ __html: previewHtml }} />
            ) : (
              <div dangerouslySetInnerHTML={{ __html: html }} />
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

function SettingsTab({
  settings, saving, onChange, onSave,
}: {
  settings: Settings
  saving: boolean
  onChange: (s: Settings) => void
  onSave: () => void
}) {
  const update = (field: keyof Settings, value: string) => {
    onChange({ ...settings, [field]: value })
  }

  return (
    <div className="max-w-2xl space-y-6">
      <h2 className="text-lg font-semibold">E-Mail-Einstellungen</h2>

      <div className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Absender-Name</label>
            <input
              type="text"
              value={settings.sender_name || ''}
              onChange={e => update('sender_name', e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Absender-E-Mail</label>
            <input
              type="email"
              value={settings.sender_email || ''}
              onChange={e => update('sender_email', e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
            />
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Antwort-Adresse</label>
          <input
            type="email"
            value={settings.reply_to || ''}
            onChange={e => update('reply_to', e.target.value)}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
            placeholder="optional"
          />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Firmenname</label>
            <input
              type="text"
              value={settings.company_name || ''}
              onChange={e => update('company_name', e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Logo URL</label>
            <input
              type="url"
              value={settings.logo_url || ''}
              onChange={e => update('logo_url', e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
              placeholder="https://..."
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Primaerfarbe</label>
            <div className="flex gap-2">
              <input
                type="color"
                value={settings.primary_color || '#4F46E5'}
                onChange={e => update('primary_color', e.target.value)}
                className="h-10 w-10 rounded cursor-pointer"
              />
              <input
                type="text"
                value={settings.primary_color || ''}
                onChange={e => update('primary_color', e.target.value)}
                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono"
              />
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Sekundaerfarbe</label>
            <div className="flex gap-2">
              <input
                type="color"
                value={settings.secondary_color || '#7C3AED'}
                onChange={e => update('secondary_color', e.target.value)}
                className="h-10 w-10 rounded cursor-pointer"
              />
              <input
                type="text"
                value={settings.secondary_color || ''}
                onChange={e => update('secondary_color', e.target.value)}
                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono"
              />
            </div>
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Firmenadresse</label>
          <textarea
            value={settings.company_address || ''}
            onChange={e => update('company_address', e.target.value)}
            rows={2}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Footer-Text</label>
          <textarea
            value={settings.footer_text || ''}
            onChange={e => update('footer_text', e.target.value)}
            rows={3}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
          />
        </div>
      </div>

      <button
        onClick={onSave}
        disabled={saving}
        className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
      >
        {saving ? 'Speichern...' : 'Einstellungen speichern'}
      </button>
    </div>
  )
}

function LogsTab({ logs, total }: { logs: SendLog[]; total: number }) {
  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>
  )
}