'use client'

import { useState } from 'react'
import { startAssignment, completeAssignment, updateAssignment } from '@/lib/sdk/training/api'
import type { TrainingAssignment } from '@/lib/sdk/training/types'

export function AssignmentDetailDrawer({ assignment, onClose, onSaved }: {
  assignment: TrainingAssignment
  onClose: () => void
  onSaved: () => void
}) {
  const [deadline, setDeadline] = useState(assignment.deadline ? assignment.deadline.split('T')[0] : '')
  const [savingDeadline, setSavingDeadline] = useState(false)
  const [actionLoading, setActionLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleAction = async (action: () => Promise<unknown>) => {
    setActionLoading(true)
    setError(null)
    try {
      await action()
      onSaved()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler')
      setActionLoading(false)
    }
  }

  const handleSaveDeadline = async () => {
    setSavingDeadline(true)
    setError(null)
    try {
      await updateAssignment(assignment.id, { deadline: new Date(deadline).toISOString() })
      onSaved()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Speichern')
      setSavingDeadline(false)
    }
  }

  const statusActions: Record<string, { label: string; action: () => Promise<unknown> } | null> = {
    pending: { label: 'Starten', action: () => startAssignment(assignment.id) },
    in_progress: { label: 'Als abgeschlossen markieren', action: () => completeAssignment(assignment.id) },
    overdue: { label: 'Als erledigt markieren', action: () => completeAssignment(assignment.id) },
    completed: null,
    expired: null,
  }
  const currentAction = statusActions[assignment.status] || null

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-start justify-end">
      <div className="h-full w-full max-w-lg bg-white shadow-xl flex flex-col">
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <div>
            <h2 className="text-lg font-semibold text-gray-900">{assignment.module_title || assignment.module_code}</h2>
            <p className="text-sm text-gray-500 mt-0.5">{assignment.module_code}</p>
          </div>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div className="flex-1 overflow-y-auto p-6 space-y-5">
          {/* Employee */}
          <div className="bg-gray-50 rounded-lg p-4">
            <div className="font-medium text-gray-900">{assignment.user_name}</div>
            <div className="text-sm text-gray-500">{assignment.user_email}</div>
            {assignment.role_code && <div className="text-xs text-gray-400 mt-1">Rolle: {assignment.role_code}</div>}
          </div>

          {/* Timestamps */}
          <div className="space-y-1 text-sm">
            <div className="flex justify-between"><span className="text-gray-500">Erstellt:</span><span>{new Date(assignment.created_at).toLocaleString('de-DE')}</span></div>
            {assignment.started_at && <div className="flex justify-between"><span className="text-gray-500">Gestartet:</span><span>{new Date(assignment.started_at).toLocaleString('de-DE')}</span></div>}
            {assignment.completed_at && <div className="flex justify-between"><span className="text-gray-500">Abgeschlossen:</span><span className="text-green-600">{new Date(assignment.completed_at).toLocaleString('de-DE')}</span></div>}
          </div>

          {/* Progress */}
          <div>
            <div className="flex justify-between text-sm mb-1">
              <span className="text-gray-500">Fortschritt</span>
              <span className="font-medium">{assignment.progress_percent}%</span>
            </div>
            <div className="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
              <div className="bg-blue-500 h-full rounded-full transition-all" style={{ width: `${assignment.progress_percent}%` }} />
            </div>
          </div>

          {/* Quiz Score */}
          <div className="flex items-center justify-between">
            <span className="text-sm text-gray-500">Quiz-Score</span>
            {assignment.quiz_score != null ? (
              <span className={`px-2 py-1 rounded text-sm font-medium ${assignment.quiz_passed ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
                {assignment.quiz_score.toFixed(0)}% {assignment.quiz_passed ? '(Bestanden)' : '(Nicht bestanden)'}
              </span>
            ) : (
              <span className="px-2 py-1 rounded text-sm bg-gray-100 text-gray-500">Noch kein Quiz</span>
            )}
          </div>

          {/* Escalation */}
          {assignment.escalation_level > 0 && (
            <div className="flex items-center justify-between">
              <span className="text-sm text-gray-500">Eskalationslevel</span>
              <span className="px-2 py-1 rounded text-sm font-medium bg-orange-100 text-orange-700">
                Level {assignment.escalation_level}
              </span>
            </div>
          )}

          {/* Certificate */}
          {assignment.certificate_id && (
            <div className="flex items-center justify-between">
              <span className="text-sm text-gray-500">Zertifikat</span>
              <span className="text-sm text-blue-600">Zertifikat vorhanden</span>
            </div>
          )}

          {/* Status Action */}
          {currentAction && (
            <button
              onClick={() => handleAction(currentAction.action)}
              disabled={actionLoading}
              className="w-full px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
            >
              {actionLoading ? 'Bitte warten...' : currentAction.label}
            </button>
          )}

          {/* Deadline Edit */}
          <div className="border-t border-gray-200 pt-4">
            <label className="block text-sm font-medium text-gray-700 mb-1">Deadline bearbeiten</label>
            <div className="flex gap-2">
              <input
                type="date"
                value={deadline}
                onChange={e => setDeadline(e.target.value)}
                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              />
              <button
                onClick={handleSaveDeadline}
                disabled={savingDeadline || !deadline}
                className="px-4 py-2 text-sm bg-gray-800 text-white rounded-lg hover:bg-gray-900 disabled:opacity-50 transition-colors"
              >
                {savingDeadline ? 'Speichern...' : 'Deadline speichern'}
              </button>
            </div>
          </div>

          {error && <p className="text-sm text-red-600">{error}</p>}
        </div>
      </div>
    </div>
  )
}