'use client'

import type { ModuleStatusData } from './types'
import { MODULE_ICONS } from './types'

interface ModulesTabProps {
  moduleStatus: ModuleStatusData | null
}

export function ModulesTab({ moduleStatus }: ModulesTabProps) {
  if (!moduleStatus) {
    return (
      <div className="flex items-center justify-center h-48">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
      </div>
    )
  }

  return (
    <>
      {/* Summary */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div className="bg-white rounded-xl shadow-sm border p-6 text-center">
          <p className="text-sm text-slate-500">Gesamt-Fortschritt</p>
          <p className="text-3xl font-bold text-purple-600">{moduleStatus.overall_progress.toFixed(0)}%</p>
        </div>
        <div className="bg-white rounded-xl shadow-sm border p-6 text-center">
          <p className="text-sm text-slate-500">Module gestartet</p>
          <p className="text-3xl font-bold text-blue-600">{moduleStatus.started}/{moduleStatus.total}</p>
        </div>
        <div className="bg-white rounded-xl shadow-sm border p-6 text-center">
          <p className="text-sm text-slate-500">Module abgeschlossen</p>
          <p className="text-3xl font-bold text-green-600">{moduleStatus.complete}/{moduleStatus.total}</p>
        </div>
      </div>

      {/* Module Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {moduleStatus.modules.map(mod => (
          <div key={mod.key} className="bg-white rounded-xl shadow-sm border p-5">
            <div className="flex items-center gap-3 mb-3">
              <span className="text-2xl">{MODULE_ICONS[mod.key] || '📦'}</span>
              <div>
                <h4 className="font-medium text-slate-900">{mod.label}</h4>
                <p className="text-xs text-slate-500">{mod.count} Eintraege</p>
              </div>
              <span className={`ml-auto px-2 py-0.5 text-xs rounded-full font-medium ${
                mod.status === 'complete' ? 'bg-green-100 text-green-700' :
                mod.status === 'in_progress' ? 'bg-yellow-100 text-yellow-700' :
                'bg-slate-100 text-slate-500'
              }`}>
                {mod.status === 'complete' ? 'Fertig' :
                 mod.status === 'in_progress' ? 'In Arbeit' : 'Offen'}
              </span>
            </div>
            <div className="h-2 bg-slate-200 rounded-full overflow-hidden">
              <div
                className={`h-full transition-all duration-500 ${
                  mod.status === 'complete' ? 'bg-green-500' :
                  mod.status === 'in_progress' ? 'bg-yellow-500' : 'bg-slate-300'
                }`}
                style={{ width: `${mod.progress}%` }}
              />
            </div>
          </div>
        ))}
      </div>
    </>
  )
}