'use client'

/**
 * Unified Inbox Mail Admin Page
 *
 * Admin interface for managing email accounts, viewing system status,
 * and configuring AI analysis settings.
 *
 * See: docs/klausur-modul/UNIFIED-INBOX-SPECIFICATION.md
 */

import { useState, useEffect, useCallback } from 'react'
import AdminLayout from '@/components/admin/AdminLayout'

// API Base URL for klausur-service
const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://localhost:8086'

// Types
interface EmailAccount {
  id: string
  email: string
  displayName: string
  imapHost: string
  imapPort: number
  smtpHost: string
  smtpPort: number
  status: 'active' | 'inactive' | 'error' | 'syncing'
  lastSync: string | null
  emailCount: number
  unreadCount: number
  createdAt: string
}

interface MailStats {
  totalAccounts: number
  activeAccounts: number
  totalEmails: number
  unreadEmails: number
  totalTasks: number
  pendingTasks: number
  overdueTasks: number
  aiAnalyzedCount: number
  lastSyncTime: string | null
}

interface SyncStatus {
  running: boolean
  accountsInProgress: string[]
  lastCompleted: string | null
  errors: string[]
}

// Tab definitions
type TabId = 'overview' | 'accounts' | 'ai-settings' | 'templates' | 'logs'

const tabs: { id: TabId; name: string; icon: JSX.Element }[] = [
  {
    id: 'overview',
    name: 'Übersicht',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
      </svg>
    ),
  },
  {
    id: 'accounts',
    name: 'Konten',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
      </svg>
    ),
  },
  {
    id: 'ai-settings',
    name: 'KI-Einstellungen',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
      </svg>
    ),
  },
  {
    id: 'templates',
    name: 'Vorlagen',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
      </svg>
    ),
  },
  {
    id: 'logs',
    name: 'Audit-Log',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
      </svg>
    ),
  },
]

// Main Component
export default function MailAdminPage() {
  const [activeTab, setActiveTab] = useState<TabId>('overview')
  const [stats, setStats] = useState<MailStats | null>(null)
  const [accounts, setAccounts] = useState<EmailAccount[]>([])
  const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  const fetchData = useCallback(async () => {
    try {
      setLoading(true)

      // Fetch stats and accounts in parallel
      const [statsRes, accountsRes, statusRes] = await Promise.all([
        fetch(`${API_BASE}/api/v1/mail/stats`),
        fetch(`${API_BASE}/api/v1/mail/accounts`),
        fetch(`${API_BASE}/api/v1/mail/sync/status`),
      ])

      if (statsRes.ok) {
        const statsData = await statsRes.json()
        setStats({
          totalAccounts: statsData.total_accounts || 0,
          activeAccounts: statsData.active_accounts || 0,
          totalEmails: statsData.total_emails || 0,
          unreadEmails: statsData.unread_emails || 0,
          totalTasks: statsData.total_tasks || 0,
          pendingTasks: statsData.pending_tasks || 0,
          overdueTasks: statsData.overdue_tasks || 0,
          aiAnalyzedCount: statsData.ai_analyzed_count || 0,
          lastSyncTime: statsData.last_sync_time,
        })
      }

      if (accountsRes.ok) {
        const accountsData = await accountsRes.json()
        setAccounts(accountsData.accounts || [])
      }

      if (statusRes.ok) {
        const statusData = await statusRes.json()
        setSyncStatus({
          running: statusData.running || false,
          accountsInProgress: statusData.accounts_in_progress || [],
          lastCompleted: statusData.last_completed,
          errors: statusData.errors || [],
        })
      }

      setError(null)
    } catch (err) {
      console.error('Failed to fetch mail data:', err)
      setError('Verbindung zum Mail-Service fehlgeschlagen')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    fetchData()

    // Refresh every 10 seconds if syncing
    const interval = setInterval(() => {
      if (syncStatus?.running) {
        fetchData()
      }
    }, 10000)

    return () => clearInterval(interval)
  }, [fetchData, syncStatus?.running])

  return (
    <AdminLayout
      title="Unified Inbox"
      description="E-Mail-Konten & KI-gestützte Analyse verwalten"
    >
      {/* Error Banner */}
      {error && (
        <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4 flex items-center gap-3">
          <svg className="w-5 h-5 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span className="text-red-700">{error}</span>
          <button onClick={fetchData} className="ml-auto text-red-600 hover:text-red-800 text-sm font-medium">
            Erneut versuchen
          </button>
        </div>
      )}

      {/* Tab Navigation */}
      <div className="border-b border-slate-200 mb-6">
        <nav className="-mb-px flex space-x-8">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`
                flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm transition-colors
                ${activeTab === tab.id
                  ? 'border-primary-500 text-primary-600'
                  : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
                }
              `}
            >
              {tab.icon}
              {tab.name}
            </button>
          ))}
        </nav>
      </div>

      {/* Tab Content */}
      {activeTab === 'overview' && (
        <OverviewTab
          stats={stats}
          syncStatus={syncStatus}
          loading={loading}
          onRefresh={fetchData}
        />
      )}
      {activeTab === 'accounts' && (
        <AccountsTab
          accounts={accounts}
          loading={loading}
          onRefresh={fetchData}
        />
      )}
      {activeTab === 'ai-settings' && (
        <AISettingsTab />
      )}
      {activeTab === 'templates' && (
        <TemplatesTab />
      )}
      {activeTab === 'logs' && (
        <AuditLogTab />
      )}
    </AdminLayout>
  )
}

// ============================================================================
// Overview Tab
// ============================================================================

function OverviewTab({
  stats,
  syncStatus,
  loading,
  onRefresh
}: {
  stats: MailStats | null
  syncStatus: SyncStatus | null
  loading: boolean
  onRefresh: () => void
}) {
  const triggerSync = async () => {
    try {
      await fetch(`${API_BASE}/api/v1/mail/sync/all`, {
        method: 'POST',
      })
      onRefresh()
    } catch (err) {
      console.error('Failed to trigger sync:', err)
    }
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold text-slate-900">System-Übersicht</h2>
          <p className="text-sm text-slate-500">Status aller E-Mail-Konten und Aufgaben</p>
        </div>
        <div className="flex gap-3">
          <button
            onClick={onRefresh}
            className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50"
          >
            Aktualisieren
          </button>
          <button
            onClick={triggerSync}
            disabled={syncStatus?.running}
            className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 disabled:opacity-50"
          >
            {syncStatus?.running ? 'Synchronisiert...' : 'Alle synchronisieren'}
          </button>
        </div>
      </div>

      {/* Loading State */}
      {loading && (
        <div className="flex items-center justify-center py-12">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
        </div>
      )}

      {/* Stats Grid */}
      {!loading && stats && (
        <>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <StatCard
              title="E-Mail-Konten"
              value={stats.totalAccounts}
              subtitle={`${stats.activeAccounts} aktiv`}
              color="blue"
            />
            <StatCard
              title="E-Mails gesamt"
              value={stats.totalEmails}
              subtitle={`${stats.unreadEmails} ungelesen`}
              color="green"
            />
            <StatCard
              title="Aufgaben"
              value={stats.totalTasks}
              subtitle={`${stats.pendingTasks} offen`}
              color="yellow"
            />
            <StatCard
              title="Überfällig"
              value={stats.overdueTasks}
              color={stats.overdueTasks > 0 ? 'red' : 'green'}
            />
          </div>

          {/* Sync Status */}
          <div className="bg-white rounded-lg border border-slate-200 p-6">
            <h3 className="text-sm font-medium text-slate-700 mb-4">Synchronisierung</h3>
            <div className="flex items-center gap-4">
              {syncStatus?.running ? (
                <>
                  <div className="w-3 h-3 bg-yellow-500 rounded-full animate-pulse"></div>
                  <span className="text-slate-600">
                    Synchronisiere {syncStatus.accountsInProgress.length} Konto(en)...
                  </span>
                </>
              ) : (
                <>
                  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                  <span className="text-slate-600">Bereit</span>
                </>
              )}
              {stats.lastSyncTime && (
                <span className="text-sm text-slate-500 ml-auto">
                  Letzte Sync: {new Date(stats.lastSyncTime).toLocaleString('de-DE')}
                </span>
              )}
            </div>

            {syncStatus?.errors && syncStatus.errors.length > 0 && (
              <div className="mt-4 p-4 bg-red-50 rounded-lg">
                <h4 className="text-sm font-medium text-red-800 mb-2">Fehler</h4>
                <ul className="text-sm text-red-700 space-y-1">
                  {syncStatus.errors.slice(0, 3).map((error, i) => (
                    <li key={i}>{error}</li>
                  ))}
                </ul>
              </div>
            )}
          </div>

          {/* AI Stats */}
          <div className="bg-white rounded-lg border border-slate-200 p-6">
            <h3 className="text-sm font-medium text-slate-700 mb-4">KI-Analyse</h3>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
              <div>
                <p className="text-xs text-slate-500 uppercase tracking-wider">Analysiert</p>
                <p className="text-2xl font-bold text-slate-900">{stats.aiAnalyzedCount}</p>
              </div>
              <div>
                <p className="text-xs text-slate-500 uppercase tracking-wider">Analyse-Rate</p>
                <p className="text-2xl font-bold text-slate-900">
                  {stats.totalEmails > 0
                    ? `${Math.round((stats.aiAnalyzedCount / stats.totalEmails) * 100)}%`
                    : '0%'}
                </p>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  )
}

function StatCard({
  title,
  value,
  subtitle,
  color = 'blue'
}: {
  title: string
  value: number
  subtitle?: string
  color?: 'blue' | 'green' | 'yellow' | 'red'
}) {
  const colorClasses = {
    blue: 'text-blue-600',
    green: 'text-green-600',
    yellow: 'text-yellow-600',
    red: 'text-red-600',
  }

  return (
    <div className="bg-white rounded-lg border border-slate-200 p-6">
      <p className="text-xs text-slate-500 uppercase tracking-wider mb-1">{title}</p>
      <p className={`text-3xl font-bold ${colorClasses[color]}`}>{value.toLocaleString()}</p>
      {subtitle && <p className="text-sm text-slate-500 mt-1">{subtitle}</p>}
    </div>
  )
}

// ============================================================================
// Accounts Tab
// ============================================================================

function AccountsTab({
  accounts,
  loading,
  onRefresh
}: {
  accounts: EmailAccount[]
  loading: boolean
  onRefresh: () => void
}) {
  const [showAddModal, setShowAddModal] = useState(false)

  const testConnection = async (accountId: string) => {
    try {
      const res = await fetch(`${API_BASE}/api/v1/mail/accounts/${accountId}/test`, {
        method: 'POST',
      })
      if (res.ok) {
        alert('Verbindung erfolgreich!')
      } else {
        alert('Verbindungsfehler')
      }
    } catch (err) {
      alert('Verbindungsfehler')
    }
  }

  const statusColors = {
    active: 'bg-green-100 text-green-800',
    inactive: 'bg-gray-100 text-gray-800',
    error: 'bg-red-100 text-red-800',
    syncing: 'bg-yellow-100 text-yellow-800',
  }

  const statusLabels = {
    active: 'Aktiv',
    inactive: 'Inaktiv',
    error: 'Fehler',
    syncing: 'Synchronisiert...',
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold text-slate-900">E-Mail-Konten</h2>
          <p className="text-sm text-slate-500">Verwalten Sie die verbundenen E-Mail-Konten</p>
        </div>
        <button
          onClick={() => setShowAddModal(true)}
          className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 flex items-center gap-2"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          Konto hinzufügen
        </button>
      </div>

      {/* Loading State */}
      {loading && (
        <div className="flex items-center justify-center py-12">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
        </div>
      )}

      {/* Accounts Grid */}
      {!loading && (
        <div className="grid gap-4">
          {accounts.length === 0 ? (
            <div className="bg-slate-50 rounded-lg p-8 text-center">
              <svg className="w-12 h-12 text-slate-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
              <h3 className="text-lg font-medium text-slate-900 mb-2">Keine E-Mail-Konten</h3>
              <p className="text-slate-500 mb-4">Fügen Sie Ihr erstes E-Mail-Konto hinzu.</p>
            </div>
          ) : (
            accounts.map((account) => (
              <div
                key={account.id}
                className="bg-white rounded-lg border border-slate-200 p-6 hover:shadow-md transition-shadow"
              >
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center">
                      <svg className="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                      </svg>
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-slate-900">
                        {account.displayName || account.email}
                      </h3>
                      <p className="text-sm text-slate-500">{account.email}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <span className={`px-3 py-1 rounded-full text-xs font-medium ${statusColors[account.status]}`}>
                      {statusLabels[account.status]}
                    </span>
                    <button
                      onClick={() => testConnection(account.id)}
                      className="p-2 text-slate-400 hover:text-slate-600"
                      title="Verbindung testen"
                    >
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                      </svg>
                    </button>
                  </div>
                </div>

                <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div>
                    <p className="text-xs text-slate-500 uppercase tracking-wider">E-Mails</p>
                    <p className="text-lg font-semibold text-slate-900">{account.emailCount}</p>
                  </div>
                  <div>
                    <p className="text-xs text-slate-500 uppercase tracking-wider">Ungelesen</p>
                    <p className="text-lg font-semibold text-slate-900">{account.unreadCount}</p>
                  </div>
                  <div>
                    <p className="text-xs text-slate-500 uppercase tracking-wider">IMAP</p>
                    <p className="text-sm font-mono text-slate-700">{account.imapHost}:{account.imapPort}</p>
                  </div>
                  <div>
                    <p className="text-xs text-slate-500 uppercase tracking-wider">Letzte Sync</p>
                    <p className="text-sm text-slate-700">
                      {account.lastSync
                        ? new Date(account.lastSync).toLocaleString('de-DE')
                        : 'Nie'}
                    </p>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
      )}

      {/* Add Account Modal */}
      {showAddModal && (
        <AddAccountModal onClose={() => setShowAddModal(false)} onSuccess={() => { setShowAddModal(false); onRefresh(); }} />
      )}
    </div>
  )
}

function AddAccountModal({
  onClose,
  onSuccess
}: {
  onClose: () => void
  onSuccess: () => void
}) {
  const [formData, setFormData] = useState({
    email: '',
    displayName: '',
    imapHost: '',
    imapPort: 993,
    smtpHost: '',
    smtpPort: 587,
    username: '',
    password: '',
  })
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitting(true)
    setError(null)

    try {
      const res = await fetch(`${API_BASE}/api/v1/mail/accounts`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: formData.email,
          display_name: formData.displayName,
          imap_host: formData.imapHost,
          imap_port: formData.imapPort,
          smtp_host: formData.smtpHost,
          smtp_port: formData.smtpPort,
          username: formData.username,
          password: formData.password,
        }),
      })

      if (res.ok) {
        onSuccess()
      } else {
        const data = await res.json()
        setError(data.detail || 'Fehler beim Hinzufügen des Kontos')
      }
    } catch (err) {
      setError('Netzwerkfehler')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div className="p-6 border-b border-slate-200">
          <h2 className="text-lg font-semibold text-slate-900">E-Mail-Konto hinzufügen</h2>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-4">
          {error && (
            <div className="p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>
          )}

          <div className="grid grid-cols-2 gap-4">
            <div className="col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">E-Mail-Adresse</label>
              <input
                type="email"
                required
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
                placeholder="schulleitung@grundschule-xy.de"
              />
            </div>
            <div className="col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Anzeigename</label>
              <input
                type="text"
                value={formData.displayName}
                onChange={(e) => setFormData({ ...formData, displayName: e.target.value })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
                placeholder="Schulleitung"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">IMAP Server</label>
              <input
                type="text"
                required
                value={formData.imapHost}
                onChange={(e) => setFormData({ ...formData, imapHost: e.target.value })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
                placeholder="imap.example.com"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">IMAP Port</label>
              <input
                type="number"
                required
                value={formData.imapPort}
                onChange={(e) => setFormData({ ...formData, imapPort: parseInt(e.target.value) })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">SMTP Server</label>
              <input
                type="text"
                required
                value={formData.smtpHost}
                onChange={(e) => setFormData({ ...formData, smtpHost: e.target.value })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
                placeholder="smtp.example.com"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">SMTP Port</label>
              <input
                type="number"
                required
                value={formData.smtpPort}
                onChange={(e) => setFormData({ ...formData, smtpPort: parseInt(e.target.value) })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>

            <div className="col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Benutzername</label>
              <input
                type="text"
                required
                value={formData.username}
                onChange={(e) => setFormData({ ...formData, username: e.target.value })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>

            <div className="col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Passwort</label>
              <input
                type="password"
                required
                value={formData.password}
                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              />
              <p className="text-xs text-slate-500 mt-1">
                Das Passwort wird verschlüsselt in Vault gespeichert.
              </p>
            </div>
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t border-slate-200">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg"
            >
              Abbrechen
            </button>
            <button
              type="submit"
              disabled={submitting}
              className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {submitting ? 'Speichern...' : 'Konto hinzufügen'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

// ============================================================================
// AI Settings Tab
// ============================================================================

function AISettingsTab() {
  const [settings, setSettings] = useState({
    autoAnalyze: true,
    autoCreateTasks: true,
    analysisModel: 'breakpilot-teacher-8b',
    confidenceThreshold: 0.7,
  })

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-lg font-semibold text-slate-900">KI-Einstellungen</h2>
        <p className="text-sm text-slate-500">Konfigurieren Sie die automatische E-Mail-Analyse</p>
      </div>

      <div className="bg-white rounded-lg border border-slate-200 p-6 space-y-6">
        {/* Auto-Analyze */}
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-sm font-medium text-slate-900">Automatische Analyse</h3>
            <p className="text-sm text-slate-500">E-Mails automatisch beim Empfang analysieren</p>
          </div>
          <button
            onClick={() => setSettings({ ...settings, autoAnalyze: !settings.autoAnalyze })}
            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
              settings.autoAnalyze ? 'bg-primary-600' : 'bg-slate-200'
            }`}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                settings.autoAnalyze ? 'translate-x-6' : 'translate-x-1'
              }`}
            />
          </button>
        </div>

        {/* Auto-Create Tasks */}
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-sm font-medium text-slate-900">Aufgaben automatisch erstellen</h3>
            <p className="text-sm text-slate-500">Erkannte Fristen als Aufgaben anlegen</p>
          </div>
          <button
            onClick={() => setSettings({ ...settings, autoCreateTasks: !settings.autoCreateTasks })}
            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
              settings.autoCreateTasks ? 'bg-primary-600' : 'bg-slate-200'
            }`}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                settings.autoCreateTasks ? 'translate-x-6' : 'translate-x-1'
              }`}
            />
          </button>
        </div>

        {/* Model Selection */}
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-2">Analyse-Modell</label>
          <select
            value={settings.analysisModel}
            onChange={(e) => setSettings({ ...settings, analysisModel: e.target.value })}
            className="w-full md:w-64 px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
          >
            <option value="breakpilot-teacher-8b">BreakPilot Teacher 8B (schnell)</option>
            <option value="breakpilot-teacher-70b">BreakPilot Teacher 70B (genau)</option>
            <option value="llama-3.1-8b-instruct">Llama 3.1 8B Instruct</option>
          </select>
        </div>

        {/* Confidence Threshold */}
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-2">
            Konfidenz-Schwelle: {Math.round(settings.confidenceThreshold * 100)}%
          </label>
          <input
            type="range"
            min="0.5"
            max="0.95"
            step="0.05"
            value={settings.confidenceThreshold}
            onChange={(e) => setSettings({ ...settings, confidenceThreshold: parseFloat(e.target.value) })}
            className="w-full md:w-64"
          />
          <p className="text-xs text-slate-500 mt-1">
            Mindest-Konfidenz für automatische Aufgabenerstellung
          </p>
        </div>
      </div>

      {/* Sender Classification */}
      <div className="bg-white rounded-lg border border-slate-200 p-6">
        <h3 className="text-sm font-medium text-slate-700 mb-4">Bekannte Absender (Niedersachsen)</h3>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
          {[
            { domain: '@mk.niedersachsen.de', type: 'Kultusministerium', priority: 'Hoch' },
            { domain: '@rlsb.de', type: 'RLSB', priority: 'Hoch' },
            { domain: '@landesschulbehoerde-nds.de', type: 'Landesschulbehörde', priority: 'Hoch' },
            { domain: '@nibis.de', type: 'NiBiS', priority: 'Mittel' },
            { domain: '@schultraeger.de', type: 'Schulträger', priority: 'Mittel' },
          ].map((sender) => (
            <div key={sender.domain} className="p-3 bg-slate-50 rounded-lg">
              <p className="text-sm font-mono text-slate-700">{sender.domain}</p>
              <p className="text-xs text-slate-500">{sender.type}</p>
              <span className={`text-xs px-2 py-0.5 rounded ${
                sender.priority === 'Hoch' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700'
              }`}>
                {sender.priority}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

// ============================================================================
// Templates Tab
// ============================================================================

function TemplatesTab() {
  const [templates] = useState([
    { id: '1', name: 'Eingangsbestätigung', category: 'Standard', usageCount: 45 },
    { id: '2', name: 'Terminbestätigung', category: 'Termine', usageCount: 23 },
    { id: '3', name: 'Elternbrief-Vorlage', category: 'Eltern', usageCount: 67 },
  ])

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold text-slate-900">E-Mail-Vorlagen</h2>
          <p className="text-sm text-slate-500">Verwalten Sie Antwort-Templates</p>
        </div>
        <button className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 flex items-center gap-2">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          Vorlage erstellen
        </button>
      </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">Name</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Kategorie</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Verwendet</th>
              <th className="px-6 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-200">
            {templates.map((template) => (
              <tr key={template.id} className="hover:bg-slate-50">
                <td className="px-6 py-4 text-sm font-medium text-slate-900">{template.name}</td>
                <td className="px-6 py-4">
                  <span className="px-2 py-1 bg-slate-100 text-slate-700 text-xs rounded">{template.category}</span>
                </td>
                <td className="px-6 py-4 text-sm text-slate-500">{template.usageCount}x</td>
                <td className="px-6 py-4 text-right">
                  <button className="text-primary-600 hover:text-primary-800 text-sm font-medium">Bearbeiten</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}

// ============================================================================
// Audit Log Tab
// ============================================================================

function AuditLogTab() {
  const [logs] = useState([
    { id: '1', action: 'account_created', user: 'admin@breakpilot.de', timestamp: new Date().toISOString(), details: 'Konto schulleitung@example.de hinzugefügt' },
    { 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' },
  ])

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

  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>
  )
}