'use client'

import { useState } from 'react'
import { UserPreferences, BUNDESLAENDER, SCHULFORMEN } from './types'

export default function OnboardingWizard({ onComplete }: { onComplete: (prefs: Partial<UserPreferences>) => void }) {
  const [step, setStep] = useState(0)
  const [bundesland, setBundesland] = useState<string | null>(null)
  const [schulform, setSchulform] = useState<string | null>(null)

  const steps = [
    { title: 'Willkommen beim Zeugnis-Assistenten', subtitle: 'Ihr intelligenter Helfer fuer alle Fragen rund um Zeugnisse' },
    { title: 'In welchem Bundesland unterrichten Sie?', subtitle: 'Wir zeigen Ihnen die passenden Verordnungen' },
    { title: 'An welcher Schulform?', subtitle: 'So koennen wir die Informationen noch besser anpassen' },
    { title: 'Alles eingerichtet!', subtitle: 'Sie koennen jetzt loslegen' },
  ]

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gradient-to-br from-blue-600 to-purple-700">
      <div className="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl w-full max-w-2xl overflow-hidden">
        <div className="h-2 bg-gray-100 dark:bg-gray-700">
          <div className="h-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-500" style={{ width: `${((step + 1) / steps.length) * 100}%` }} />
        </div>
        <div className="p-8">
          {step === 0 && (
            <div className="text-center py-8">
              <div className="w-24 h-24 mx-auto mb-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center"><span className="text-5xl">📋</span></div>
              <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">{steps[0].title}</h2>
              <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">{steps[0].subtitle}</p>
              <div className="grid grid-cols-3 gap-4 text-center mb-8">
                <div className="p-4"><span className="text-3xl">🔍</span><p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Schnelle Suche in Verordnungen</p></div>
                <div className="p-4"><span className="text-3xl">💬</span><p className="mt-2 text-sm text-gray-600 dark:text-gray-400">KI-gestuetzte Antworten</p></div>
                <div className="p-4"><span className="text-3xl">📚</span><p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Alle 16 Bundeslaender</p></div>
              </div>
            </div>
          )}
          {step === 1 && (
            <div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 text-center">{steps[1].title}</h2>
              <p className="text-gray-600 dark:text-gray-400 mb-6 text-center">{steps[1].subtitle}</p>
              <div className="grid grid-cols-4 gap-3 max-h-80 overflow-y-auto">
                {BUNDESLAENDER.map((bl) => (
                  <button key={bl.code} onClick={() => setBundesland(bl.code)} className={`p-4 rounded-xl border-2 transition-all text-center hover:scale-105 ${bundesland === bl.code ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 shadow-lg' : 'border-gray-200 dark:border-gray-700 hover:border-blue-300'}`}>
                    <span className="text-2xl">{bl.emoji}</span><p className="mt-2 text-sm font-medium text-gray-900 dark:text-white">{bl.name}</p>
                  </button>
                ))}
              </div>
            </div>
          )}
          {step === 2 && (
            <div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 text-center">{steps[2].title}</h2>
              <p className="text-gray-600 dark:text-gray-400 mb-6 text-center">{steps[2].subtitle}</p>
              <div className="grid grid-cols-2 gap-4">
                {SCHULFORMEN.map((sf) => (
                  <button key={sf.id} onClick={() => setSchulform(sf.id)} className={`p-6 rounded-xl border-2 transition-all hover:scale-105 ${schulform === sf.id ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 shadow-lg' : 'border-gray-200 dark:border-gray-700 hover:border-blue-300'}`}>
                    <span className="text-3xl">{sf.icon}</span><p className="mt-3 text-lg font-medium text-gray-900 dark:text-white">{sf.name}</p>
                  </button>
                ))}
              </div>
            </div>
          )}
          {step === 3 && (
            <div className="text-center py-8">
              <div className="w-24 h-24 mx-auto mb-6 bg-gradient-to-br from-green-400 to-emerald-600 rounded-full flex items-center justify-center"><span className="text-5xl">✓</span></div>
              <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">{steps[3].title}</h2>
              <p className="text-lg text-gray-600 dark:text-gray-400 mb-6">{steps[3].subtitle}</p>
              <div className="bg-gray-50 dark:bg-gray-900 rounded-xl p-6 text-left max-w-md mx-auto">
                <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">Ihre Einstellungen:</p>
                <div className="space-y-2">
                  <div className="flex items-center gap-3"><span className="text-xl">{BUNDESLAENDER.find(b => b.code === bundesland)?.emoji}</span><span className="font-medium text-gray-900 dark:text-white">{BUNDESLAENDER.find(b => b.code === bundesland)?.name}</span></div>
                  <div className="flex items-center gap-3"><span className="text-xl">{SCHULFORMEN.find(s => s.id === schulform)?.icon}</span><span className="font-medium text-gray-900 dark:text-white">{SCHULFORMEN.find(s => s.id === schulform)?.name}</span></div>
                </div>
              </div>
            </div>
          )}
        </div>
        <div className="px-8 py-6 bg-gray-50 dark:bg-gray-900 flex justify-between">
          <button onClick={() => step > 0 && setStep(step - 1)} className={`px-6 py-2 text-gray-600 dark:text-gray-400 ${step === 0 ? 'invisible' : ''}`}>Zurueck</button>
          <button onClick={() => { if (step < 3) { setStep(step + 1) } else { onComplete({ bundesland, schulform, hasSeenWizard: true }) } }} disabled={step === 1 && !bundesland || step === 2 && !schulform} className="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-xl shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed">
            {step === 3 ? 'Loslegen' : 'Weiter'}
          </button>
        </div>
      </div>
    </div>
  )
}