'use client'

import type { MailStats, SyncStatus } from '../types'
import { API_BASE } from '../types'

interface OverviewTabProps {
  stats: MailStats | null
  syncStatus: SyncStatus | null
  loading: boolean
  onRefresh: () => void
}

export function OverviewTab({ stats, syncStatus, loading, onRefresh }: OverviewTabProps) {
  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-Uebersicht</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-blue-600 rounded-lg hover:bg-blue-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-blue-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="Ueberfaellig"
              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>
  )
}