'use client'

/**
 * Lehrer Dashboard
 * Main page for teacher section with quick links and overview
 */

import Link from 'next/link'

const quickLinks = [
  {
    title: 'Abitur-Archiv',
    description: 'Durchsuchen Sie Zentralabitur-Materialien (2021-2025) nach Themen, Fach und Jahr.',
    href: '/lehrer/abitur-archiv',
    icon: (
      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
      </svg>
    ),
    color: 'from-purple-500 to-purple-700',
    stats: '328 Dokumente',
  },
  {
    title: 'Klausur-Korrektur',
    description: 'KI-gestuetzte Korrektur von Abitur- und Vorabitur-Klausuren mit automatischen Gutachten.',
    href: '/lehrer/klausur-korrektur',
    icon: (
      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
    color: 'from-blue-500 to-blue-700',
    stats: 'Bis zu 80% Zeit sparen',
  },
]

const recentActivity = [
  { type: 'korrektur', title: 'Deutsch LK Abitur 2025', status: '5/24 korrigiert', date: 'vor 2 Stunden' },
  { type: 'archiv', title: 'Gedichtanalyse 2024 eA', status: 'Heruntergeladen', date: 'Gestern' },
  { type: 'korrektur', title: 'Englisch GK Vorabitur', status: 'Abgeschlossen', date: 'vor 3 Tagen' },
]

export default function LehrerDashboard() {
  return (
    <div className="space-y-8">
      {/* Hero Section */}
      <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 text-white">
        <h1 className="text-3xl font-bold mb-2">Willkommen im Lehrer-Portal</h1>
        <p className="text-blue-100 text-lg max-w-2xl">
          Nutzen Sie KI-gestuetzte Werkzeuge fuer die Abitur-Korrektur und durchsuchen Sie
          das zentrale Archiv mit Aufgaben und Erwartungshorizonten.
        </p>
      </div>

      {/* Quick Links */}
      <div className="grid md:grid-cols-2 gap-6">
        {quickLinks.map((link) => (
          <Link
            key={link.href}
            href={link.href}
            className="group bg-white rounded-xl border border-slate-200 p-6 hover:shadow-lg transition-all"
          >
            <div className="flex items-start gap-4">
              <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${link.color} flex items-center justify-center text-white`}>
                {link.icon}
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-slate-800 group-hover:text-blue-600 transition-colors">
                  {link.title}
                </h3>
                <p className="text-sm text-slate-500 mt-1 mb-3">
                  {link.description}
                </p>
                <span className="inline-flex items-center text-sm text-blue-600 font-medium">
                  {link.stats}
                  <svg className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                </span>
              </div>
            </div>
          </Link>
        ))}
      </div>

      {/* Recent Activity */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h2 className="text-lg font-semibold text-slate-800 mb-4">Letzte Aktivitaeten</h2>
        {recentActivity.length > 0 ? (
          <div className="space-y-3">
            {recentActivity.map((activity, idx) => (
              <div key={idx} className="flex items-center gap-4 p-3 bg-slate-50 rounded-lg">
                <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                  activity.type === 'korrektur' ? 'bg-blue-100 text-blue-600' : 'bg-purple-100 text-purple-600'
                }`}>
                  {activity.type === 'korrektur' ? (
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  ) : (
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
                    </svg>
                  )}
                </div>
                <div className="flex-1">
                  <div className="font-medium text-slate-800">{activity.title}</div>
                  <div className="text-sm text-slate-500">{activity.status}</div>
                </div>
                <div className="text-sm text-slate-400">{activity.date}</div>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-slate-500 text-center py-8">Noch keine Aktivitaeten</p>
        )}
      </div>

      {/* Help Section */}
      <div className="bg-slate-100 rounded-xl p-6 text-center">
        <h3 className="font-medium text-slate-800 mb-2">Brauchen Sie Hilfe?</h3>
        <p className="text-sm text-slate-500 mb-4">
          Lesen Sie unsere Dokumentation oder kontaktieren Sie den Support.
        </p>
        <div className="flex justify-center gap-4">
          <button className="px-4 py-2 bg-white text-slate-700 rounded-lg hover:bg-slate-50 border border-slate-200">
            Dokumentation
          </button>
          <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
            Support kontaktieren
          </button>
        </div>
      </div>
    </div>
  )
}