'use client'

/**
 * Unified Inbox Mail Admin Page
 * Migrated from website/admin/mail to admin-v2/communication/mail
 *
 * Admin interface for managing email accounts, viewing system status,
 * and configuring AI analysis settings.
 */

import { useState } from 'react'
import Link from 'next/link'
import { PagePurpose } from '@/components/common/PagePurpose'
import { useMailData } from './useMailData'
import { tabs, type TabId } from './types'
import { OverviewTab } from './_components/OverviewTab'
import { AccountsTab } from './_components/AccountsTab'
import { AISettingsTab } from './_components/AISettingsTab'
import { TemplatesTab } from './_components/TemplatesTab'
import { AuditLogTab } from './_components/AuditLogTab'

export default function MailAdminPage() {
  const [activeTab, setActiveTab] = useState<TabId>('overview')
  const { stats, accounts, syncStatus, loading, error, fetchData } = useMailData()

  return (
    <div>
      {/* Page Purpose */}
      <PagePurpose
        title="Unified Inbox"
        purpose="Verwalten Sie E-Mail-Konten, synchronisieren Sie Postfaecher und konfigurieren Sie die KI-gestuetzte E-Mail-Analyse fuer automatische Kategorisierung und Aufgabenerkennung."
        audience={['Admins', 'Schulleitung']}
        architecture={{
          services: ['Mailpit (Dev Mail Catcher)', 'IMAP/SMTP Server (Prod)'],
          databases: ['PostgreSQL', 'Vault (Credentials)'],
        }}
        relatedPages={[
          { name: 'Mail Wizard', href: '/communication/mail/wizard', description: 'Interaktives Setup und Testing' },
          { name: 'Voice Service', href: '/communication/matrix', description: 'Voice-First Interface' },
        ]}
        collapsible={true}
        defaultCollapsed={false}
      />

      {/* Quick Link to Wizard */}
      <div className="mb-6">
        <Link
          href="/communication/mail/wizard"
          className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        >
          <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>
          Mail Wizard starten
        </Link>
      </div>

      {/* 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-blue-500 text-blue-600'
                  : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
                }
              `}
            >
              {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 />}
    </div>
  )
}