'use client'

import { useState } from 'react'
import type { CreateKlausurData } from '../types'
import { GlassCard } from './GlassCard'

interface CreateKlausurModalProps {
  isOpen: boolean
  onClose: () => void
  onSubmit: (data: CreateKlausurData) => void
  isLoading: boolean
  isDark?: boolean
}

export function CreateKlausurModal({ isOpen, onClose, onSubmit, isLoading, isDark = true }: CreateKlausurModalProps) {
  const [title, setTitle] = useState('')
  const [subject, setSubject] = useState('Deutsch')
  const [year, setYear] = useState(new Date().getFullYear())
  const [semester, setSemester] = useState('Abitur')
  const [modus, setModus] = useState<'landes_abitur' | 'vorabitur'>('landes_abitur')

  if (!isOpen) return null

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit({ title, subject, year, semester, modus })
  }

  const inputClasses = isDark
    ? 'bg-white/10 border-white/20 text-white placeholder-white/40'
    : 'bg-slate-100 border-slate-300 text-slate-900 placeholder-slate-400'

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
      <GlassCard className="relative w-full max-w-md" size="lg" delay={0} isDark={isDark}>
        <h2 className={`text-xl font-bold mb-6 ${isDark ? 'text-white' : 'text-slate-900'}`}>Neue Klausur erstellen</h2>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="klausur-titel" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Titel</label>
            <input
              id="klausur-titel"
              type="text"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="z.B. Deutsch LK Q4"
              className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 focus:border-transparent ${inputClasses}`}
              required
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label htmlFor="klausur-fach" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Fach</label>
              <select id="klausur-fach" value={subject} onChange={(e) => setSubject(e.target.value)}
                className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 ${inputClasses}`}>
                <option value="Deutsch">Deutsch</option>
                <option value="Englisch">Englisch</option>
                <option value="Mathematik">Mathematik</option>
              </select>
            </div>
            <div>
              <label htmlFor="klausur-jahr" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Jahr</label>
              <input id="klausur-jahr" type="number" value={year} onChange={(e) => setYear(Number(e.target.value))}
                className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 ${inputClasses}`} />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label htmlFor="klausur-semester" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Semester</label>
              <select id="klausur-semester" value={semester} onChange={(e) => setSemester(e.target.value)}
                className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 ${inputClasses}`}>
                <option value="Abitur">Abitur</option>
                <option value="Q1">Q1</option>
                <option value="Q2">Q2</option>
                <option value="Q3">Q3</option>
                <option value="Q4">Q4</option>
              </select>
            </div>
            <div>
              <label htmlFor="klausur-modus" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Modus</label>
              <select id="klausur-modus" value={modus} onChange={(e) => setModus(e.target.value as 'landes_abitur' | 'vorabitur')}
                className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 ${inputClasses}`}>
                <option value="landes_abitur">Landes-Abitur (NiBiS EH)</option>
                <option value="vorabitur">Vorabitur (Eigener EH)</option>
              </select>
            </div>
          </div>

          <div className="flex gap-3 pt-4">
            <button type="button" onClick={onClose}
              className={`flex-1 px-4 py-3 rounded-xl transition-colors ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}>
              Abbrechen
            </button>
            <button type="submit" disabled={isLoading || !title.trim()}
              className="flex-1 px-4 py-3 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all disabled:opacity-50">
              {isLoading ? 'Erstelle...' : 'Erstellen'}
            </button>
          </div>
        </form>
      </GlassCard>
    </div>
  )
}