'use client'

import { useState } from 'react'
import { useTheme } from '@/lib/ThemeContext'
import { calendarApi } from '@/lib/schulkalender/api'
import type { SchoolYearRolloverResult } from '@/app/schulkalender/types'

interface RolloverWizardProps {
  onClose: () => void
  onDone: () => void
}

function nextSchoolYearISO(): { start: string; end: string } {
  const now = new Date()
  let y = now.getFullYear()
  if (now.getMonth() + 1 >= 8) y++ // Aug → bumped to next year
  return { start: `${y}-08-01`, end: `${y + 1}-07-31` }
}

export function RolloverWizard({ onClose, onDone }: RolloverWizardProps) {
  const { isDark } = useTheme()
  const defaults = nextSchoolYearISO()
  const [start, setStart] = useState(defaults.start)
  const [end, setEnd] = useState(defaults.end)
  const [confirm, setConfirm] = useState('')
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [result, setResult] = useState<SchoolYearRolloverResult | null>(null)

  const expected = 'SCHULJAHR WECHSELN'

  const handleSubmit = async () => {
    setSaving(true)
    setError(null)
    try {
      const r = await calendarApi.rolloverSchoolYear(start, end)
      setResult(r)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Rollover fehlgeschlagen')
    } finally {
      setSaving(false)
    }
  }

  const cardClass = isDark ? 'bg-slate-900/95 border-white/20 text-white' : 'bg-white border-black/10 text-slate-900'
  const inputClass = isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white border-slate-300 text-slate-900'

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur" data-testid="rollover-wizard">
      <div className={`w-full max-w-xl rounded-2xl border p-6 space-y-4 max-h-[90vh] overflow-y-auto ${cardClass}`}>
        <div className="flex items-center justify-between">
          <h2 className="text-xl font-semibold">Schuljahres-Wechsel</h2>
          <button onClick={onClose} className="opacity-60 hover:opacity-100">✕</button>
        </div>

        {result ? (
          <div className="space-y-3" data-testid="rollover-result">
            <div className={`p-4 rounded-xl ${isDark ? 'bg-emerald-500/20 border border-emerald-500/40' : 'bg-emerald-50 border border-emerald-200'}`}>
              <div className="font-medium mb-2">Rollover erfolgreich</div>
              <ul className="text-sm space-y-1 opacity-90">
                <li>{result.classes_promoted} Klassen um eine Stufe aufgerueckt</li>
                <li>{result.classes_graduated} Abschlussklassen entfernt</li>
                <li>Neues Schuljahr: {result.new_year_start} – {result.new_year_end}</li>
              </ul>
            </div>
            <button onClick={onDone} className="w-full px-4 py-2 rounded-lg bg-indigo-500 hover:bg-indigo-600 text-white font-medium">
              Schliessen
            </button>
          </div>
        ) : (
          <>
            <div className={`p-3 rounded-lg text-sm ${isDark ? 'bg-amber-500/10 border border-amber-500/30 text-amber-100' : 'bg-amber-50 border border-amber-200 text-amber-900'}`}>
              <p className="font-medium mb-1">Was passiert?</p>
              <ul className="list-disc list-inside space-y-1 opacity-90">
                <li>Alle Klassen ruecken eine Stufe hoeher (5a → 6, 6a → 7, …)</li>
                <li>Abschlussklassen (Stufe 13) werden entfernt</li>
                <li>Lehrer, Faecher, Raeume, Zeitraster bleiben unveraendert</li>
                <li>Vorhandene Stundenplaene bleiben als Historie erhalten</li>
              </ul>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-sm mb-1 opacity-70">Schuljahr-Beginn</label>
                <input type="date" value={start} onChange={e => setStart(e.target.value)} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
              </div>
              <div>
                <label className="block text-sm mb-1 opacity-70">Schuljahr-Ende</label>
                <input type="date" value={end} onChange={e => setEnd(e.target.value)} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
              </div>
            </div>

            <div>
              <label className="block text-sm mb-1 opacity-70">
                Bestaetigung — tippe <code className={`px-1 rounded ${isDark ? 'bg-white/10' : 'bg-slate-100'}`}>{expected}</code> zur Bestaetigung
              </label>
              <input
                value={confirm}
                onChange={e => setConfirm(e.target.value)}
                data-testid="rollover-confirm"
                className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
              />
            </div>

            {error && (
              <div className="p-2 rounded-lg bg-red-500/20 border border-red-500/40 text-red-300 text-sm">{error}</div>
            )}

            <div className="flex gap-2">
              <button
                onClick={handleSubmit}
                disabled={saving || confirm !== expected}
                data-testid="rollover-submit"
                className="flex-1 px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600 text-white font-medium disabled:opacity-30"
              >
                {saving ? 'Wechselt…' : 'Schuljahr wechseln'}
              </button>
              <button onClick={onClose} className={`px-4 py-2 rounded-lg ${isDark ? 'bg-white/10 hover:bg-white/20' : 'bg-slate-100 hover:bg-slate-200'}`}>
                Abbrechen
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  )
}