'use client'

import { useRouter } from 'next/navigation'
import { useLanguage } from '@/lib/LanguageContext'
import { useTheme } from '@/lib/ThemeContext'
import { useAlerts } from '@/lib/AlertsContext'
import { useMessages, formatMessageTime, getContactInitials } from '@/lib/MessagesContext'
import { useActivity, formatDurationCompact } from '@/lib/ActivityContext'

interface StatsItem {
  labelKey: string
  value: string
  icon: string
  color: string
}

interface RecentKlausur {
  id: number
  title: string
  students: number
  completed: number
  statusKey: string
}

interface DashboardContentProps {
  documents: { id: string }[]
  setShowUploadModal: (show: boolean) => void
  setSelectedTab: (tab: string) => void
}

export function DashboardContent({ documents, setShowUploadModal, setSelectedTab }: DashboardContentProps) {
  const router = useRouter()
  const { t } = useLanguage()
  const { isDark } = useTheme()
  const { alerts, unreadCount: alertsUnreadCount, markAsRead } = useAlerts()
  const { conversations, unreadCount: messagesUnreadCount, contacts, markAsRead: markMessageAsRead } = useMessages()
  const { stats: activityStats } = useActivity()

  const timeSaved = formatDurationCompact(activityStats.weekSavedSeconds)
  const timeSavedDisplay = activityStats.weekSavedSeconds > 0
    ? `${timeSaved.value}${timeSaved.unit}`
    : '0min'

  const stats: StatsItem[] = [
    { labelKey: 'stat_open_corrections', value: '12', icon: '📋', color: 'from-blue-400 to-blue-600' },
    { labelKey: 'stat_completed_week', value: String(activityStats.activityCount), icon: '✅', color: 'from-green-400 to-green-600' },
    { labelKey: 'stat_average', value: '2.3', icon: '📈', color: 'from-purple-400 to-purple-600' },
    { labelKey: 'stat_time_saved', value: timeSavedDisplay, icon: '⏱', color: 'from-orange-400 to-orange-600' },
  ]

  const recentKlausuren: RecentKlausur[] = [
    { id: 1, title: 'Deutsch LK - Textanalyse', students: 24, completed: 18, statusKey: 'status_in_progress' },
    { id: 2, title: 'Deutsch GK - Erörterung', students: 28, completed: 28, statusKey: 'status_completed' },
    { id: 3, title: 'Vorabitur - Gedichtanalyse', students: 22, completed: 10, statusKey: 'status_in_progress' },
  ]

  return (
    <>
      {/* Stats Kacheln */}
      <div className="grid grid-cols-4 gap-6 mb-8">
        {stats.map((stat, index) => (
          <div
            key={index}
            className={`backdrop-blur-xl border rounded-3xl p-6 transition-all hover:scale-105 hover:shadow-xl cursor-pointer ${
              isDark
                ? 'bg-white/10 border-white/20 hover:bg-white/15'
                : 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
            }`}
          >
            <div className="flex items-center justify-between mb-4">
              <div className={`w-12 h-12 bg-gradient-to-br ${stat.color} rounded-2xl flex items-center justify-center text-2xl shadow-lg`}>
                {stat.icon}
              </div>
              <svg className={`w-5 h-5 ${isDark ? 'text-white/40' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </div>
            <p className={`text-sm mb-1 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>{t(stat.labelKey)}</p>
            <p className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{stat.value}</p>
          </div>
        ))}
      </div>

      {/* Dashboard Grid */}
      <div className="grid grid-cols-3 gap-6">
        {/* Aktuelle Klausuren Kachel */}
        <div className={`col-span-2 backdrop-blur-xl border rounded-3xl p-6 ${
          isDark
            ? 'bg-white/10 border-white/20'
            : 'bg-white/70 border-black/10 shadow-lg'
        }`}>
          <div className="flex items-center justify-between mb-6">
            <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>{t('recent_klausuren')}</h2>
            <button className={`text-sm transition-colors ${
              isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-900'
            }`}>
              {t('show_all')} →
            </button>
          </div>

          <div className="space-y-4">
            {recentKlausuren.map((klausur) => (
              <div
                key={klausur.id}
                className={`flex items-center gap-4 p-4 rounded-2xl transition-all cursor-pointer group ${
                  isDark
                    ? 'bg-white/5 hover:bg-white/10'
                    : 'bg-slate-50 hover:bg-slate-100'
                }`}
              >
                <div className="w-14 h-14 bg-gradient-to-br from-blue-400 to-purple-500 rounded-2xl flex items-center justify-center">
                  <span className="text-2xl">📝</span>
                </div>
                <div className="flex-1">
                  <h3 className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{klausur.title}</h3>
                  <p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{klausur.students} {t('students')}</p>
                </div>
                <div className="text-right">
                  <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                    klausur.statusKey === 'status_completed'
                      ? isDark ? 'bg-green-500/20 text-green-300' : 'bg-green-100 text-green-700'
                      : isDark ? 'bg-yellow-500/20 text-yellow-300' : 'bg-yellow-100 text-yellow-700'
                  }`}>
                    {t(klausur.statusKey)}
                  </span>
                  <div className="flex items-center gap-2 mt-2">
                    <div className={`w-24 h-1.5 rounded-full overflow-hidden ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
                      <div
                        className="h-full bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full"
                        style={{ width: `${(klausur.completed / klausur.students) * 100}%` }}
                      />
                    </div>
                    <span className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{klausur.completed}/{klausur.students}</span>
                  </div>
                </div>
                <svg className={`w-5 h-5 transition-colors ${
                  isDark ? 'text-white/30 group-hover:text-white/60' : 'text-slate-300 group-hover:text-slate-600'
                }`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            ))}
          </div>
        </div>

        {/* Schnellaktionen Kachel */}
        <div className={`backdrop-blur-xl border rounded-3xl p-6 ${
          isDark
            ? 'bg-white/10 border-white/20'
            : 'bg-white/70 border-black/10 shadow-lg'
        }`}>
          <h2 className={`text-xl font-semibold mb-6 ${isDark ? 'text-white' : 'text-slate-900'}`}>{t('quick_actions')}</h2>

          <div className="space-y-3">
            <button className="w-full flex items-center gap-4 p-4 bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl text-white hover:shadow-xl hover:shadow-purple-500/30 transition-all hover:scale-105">
              <span className="text-2xl">➕</span>
              <span className="font-medium">{t('create_klausur')}</span>
            </button>

            <button
              onClick={() => setShowUploadModal(true)}
              className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
              isDark
                ? 'bg-white/10 text-white hover:bg-white/20'
                : 'bg-slate-100 text-slate-800 hover:bg-slate-200'
            }`}>
              <span className="text-2xl">📤</span>
              <span className="font-medium">{t('upload_work')}</span>
            </button>

            <button
              onClick={() => setSelectedTab('dokumente')}
              className={`w-full flex items-center justify-between p-4 rounded-2xl transition-all ${
              isDark
                ? 'bg-white/10 text-white hover:bg-white/20'
                : 'bg-slate-100 text-slate-800 hover:bg-slate-200'
            }`}>
              <div className="flex items-center gap-4">
                <span className="text-2xl">📁</span>
                <span className="font-medium">{t('nav_dokumente')}</span>
              </div>
              {documents.length > 0 && (
                <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                  isDark ? 'bg-white/20' : 'bg-slate-200'
                }`}>
                  {documents.length}
                </span>
              )}
            </button>

            <button
              onClick={() => router.push('/worksheet-editor')}
              className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
              isDark
                ? 'bg-gradient-to-r from-purple-500/20 to-pink-500/20 text-white hover:from-purple-500/30 hover:to-pink-500/30 border border-purple-500/30'
                : 'bg-gradient-to-r from-purple-50 to-pink-50 text-slate-800 hover:from-purple-100 hover:to-pink-100 border border-purple-200'
            }`}>
              <span className="text-2xl">🎨</span>
              <span className="font-medium">{t('nav_worksheet_editor')}</span>
            </button>

            <button className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
              isDark
                ? 'bg-white/10 text-white hover:bg-white/20'
                : 'bg-slate-100 text-slate-800 hover:bg-slate-200'
            }`}>
              <span className="text-2xl">✨</span>
              <span className="font-medium">{t('magic_help')}</span>
            </button>

            <button className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
              isDark
                ? 'bg-white/10 text-white hover:bg-white/20'
                : 'bg-slate-100 text-slate-800 hover:bg-slate-200'
            }`}>
              <span className="text-2xl">📊</span>
              <span className="font-medium">{t('fairness_check')}</span>
            </button>
          </div>

          {/* AI Insight mini */}
          <div className={`mt-6 p-4 rounded-2xl border ${
            isDark
              ? 'bg-gradient-to-r from-pink-500/20 to-purple-500/20 border-pink-500/30'
              : 'bg-gradient-to-r from-pink-50 to-purple-50 border-pink-200'
          }`}>
            <div className="flex items-center gap-3 mb-2">
              <span className="text-lg">🤖</span>
              <span className={`text-sm font-medium ${isDark ? 'text-white/80' : 'text-slate-700'}`}>{t('ai_tip')}</span>
            </div>
            <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
              {t('ai_tip_text')}
            </p>
          </div>

          {/* Alerts Kachel */}
          <div className={`mt-6 backdrop-blur-xl border rounded-2xl p-4 ${
            isDark
              ? 'bg-gradient-to-r from-amber-500/10 to-orange-500/10 border-amber-500/30'
              : 'bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200'
          }`}>
            <div className="flex items-center justify-between mb-3">
              <h3 className={`font-semibold flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                <span>🔔</span> Aktuelle Alerts
              </h3>
              {alertsUnreadCount > 0 && (
                <span className="text-xs px-2 py-1 rounded-full bg-amber-500/20 text-amber-500 font-medium">
                  {alertsUnreadCount} neu
                </span>
              )}
            </div>

            <div className="space-y-2">
              {alerts.slice(0, 3).map(alert => (
                <button
                  key={alert.id}
                  onClick={() => {
                    markAsRead(alert.id)
                    router.push('/alerts')
                  }}
                  className={`w-full text-left p-2 rounded-lg transition-all text-sm ${
                    isDark
                      ? `hover:bg-white/10 ${!alert.isRead ? 'bg-white/5' : ''}`
                      : `hover:bg-white ${!alert.isRead ? 'bg-white/50' : ''}`
                  }`}
                >
                  <div className="flex items-start gap-2">
                    {!alert.isRead && (
                      <span className="w-1.5 h-1.5 rounded-full bg-amber-500 mt-1.5 flex-shrink-0" />
                    )}
                    <p className={`truncate ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
                      {alert.title}
                    </p>
                  </div>
                </button>
              ))}
              {alerts.length === 0 && (
                <p className={`text-sm ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
                  Keine Alerts vorhanden
                </p>
              )}
            </div>

            <button
              onClick={() => router.push('/alerts')}
              className={`w-full mt-3 text-sm font-medium ${
                isDark ? 'text-amber-400 hover:text-amber-300' : 'text-amber-600 hover:text-amber-700'
              }`}
            >
              Alle Alerts anzeigen →
            </button>
          </div>

          {/* Nachrichten Kachel */}
          <div className={`mt-6 backdrop-blur-xl border rounded-2xl p-4 ${
            isDark
              ? 'bg-gradient-to-r from-green-500/10 to-emerald-500/10 border-green-500/30'
              : 'bg-gradient-to-r from-green-50 to-emerald-50 border-green-200'
          }`}>
            <div className="flex items-center justify-between mb-3">
              <h3 className={`font-semibold flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                <span>💬</span> {t('nav_messages')}
              </h3>
              {messagesUnreadCount > 0 && (
                <span className="text-xs px-2 py-1 rounded-full bg-green-500/20 text-green-500 font-medium">
                  {messagesUnreadCount} neu
                </span>
              )}
            </div>

            <div className="space-y-2">
              {conversations.slice(0, 3).map(conv => {
                const contact = contacts.find(c => conv.participant_ids.includes(c.id))
                return (
                  <button
                    key={conv.id}
                    onClick={() => {
                      if (conv.unread_count > 0) {
                        markMessageAsRead(conv.id)
                      }
                      router.push('/messages')
                    }}
                    className={`w-full text-left p-2 rounded-lg transition-all text-sm ${
                      isDark
                        ? `hover:bg-white/10 ${conv.unread_count > 0 ? 'bg-white/5' : ''}`
                        : `hover:bg-white ${conv.unread_count > 0 ? 'bg-white/50' : ''}`
                    }`}
                  >
                    <div className="flex items-center gap-2">
                      <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium flex-shrink-0 ${
                        contact?.online
                          ? isDark
                            ? 'bg-green-500/30 text-green-300'
                            : 'bg-green-200 text-green-700'
                          : isDark
                            ? 'bg-slate-600 text-slate-300'
                            : 'bg-slate-200 text-slate-600'
                      }`}>
                        {conv.title ? getContactInitials(conv.title) : '?'}
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2">
                          {conv.unread_count > 0 && (
                            <span className="w-1.5 h-1.5 rounded-full bg-green-500 flex-shrink-0" />
                          )}
                          <span className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>
                            {conv.title || 'Unbenannt'}
                          </span>
                        </div>
                        {conv.last_message && (
                          <p className={`text-xs truncate ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
                            {conv.last_message}
                          </p>
                        )}
                      </div>
                      {conv.last_message_time && (
                        <span className={`text-xs flex-shrink-0 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
                          {formatMessageTime(conv.last_message_time)}
                        </span>
                      )}
                    </div>
                  </button>
                )
              })}
              {conversations.length === 0 && (
                <p className={`text-sm ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
                  Keine Nachrichten vorhanden
                </p>
              )}
            </div>

            <button
              onClick={() => router.push('/messages')}
              className={`w-full mt-3 text-sm font-medium ${
                isDark ? 'text-green-400 hover:text-green-300' : 'text-green-600 hover:text-green-700'
              }`}
            >
              Alle Nachrichten anzeigen →
            </button>
          </div>
        </div>
      </div>
    </>
  )
}