'use client'

import { useState, useEffect, useRef } from 'react'

// ============================================================================
// TYPES
// ============================================================================

interface SearchResult {
  id: string
  title: string
  bundesland: string
  bundesland_name: string
  doc_type: string
  snippet: string
  relevance_score: number
  url: string
  last_updated: string
}

interface Message {
  id: string
  role: 'user' | 'assistant' | 'system'
  content: string
  sources?: SearchResult[]
  timestamp: Date
}

interface UserPreferences {
  bundesland: string | null
  schulform: string | null
  hasSeenWizard: boolean
  favorites: string[]
  recentSearches: string[]
}

// ============================================================================
// CONSTANTS
// ============================================================================

const BUNDESLAENDER = [
  { code: 'bw', name: 'Baden-Württemberg', emoji: '🏰' },
  { code: 'by', name: 'Bayern', emoji: '🦁' },
  { code: 'be', name: 'Berlin', emoji: '🐻' },
  { code: 'bb', name: 'Brandenburg', emoji: '🦅' },
  { code: 'hb', name: 'Bremen', emoji: '🔑' },
  { code: 'hh', name: 'Hamburg', emoji: '⚓' },
  { code: 'he', name: 'Hessen', emoji: '🦁' },
  { code: 'mv', name: 'Mecklenburg-Vorpommern', emoji: '🐂' },
  { code: 'ni', name: 'Niedersachsen', emoji: '🐴' },
  { code: 'nw', name: 'Nordrhein-Westfalen', emoji: '🏛️' },
  { code: 'rp', name: 'Rheinland-Pfalz', emoji: '🍇' },
  { code: 'sl', name: 'Saarland', emoji: '⚒️' },
  { code: 'sn', name: 'Sachsen', emoji: '⚔️' },
  { code: 'st', name: 'Sachsen-Anhalt', emoji: '🏰' },
  { code: 'sh', name: 'Schleswig-Holstein', emoji: '🌊' },
  { code: 'th', name: 'Thüringen', emoji: '🌲' },
]

const SCHULFORMEN = [
  { id: 'grundschule', name: 'Grundschule', icon: '🎒' },
  { id: 'hauptschule', name: 'Hauptschule', icon: '📚' },
  { id: 'realschule', name: 'Realschule', icon: '📖' },
  { id: 'gymnasium', name: 'Gymnasium', icon: '🎓' },
  { id: 'gesamtschule', name: 'Gesamtschule', icon: '🏫' },
  { id: 'foerderschule', name: 'Förderschule', icon: '💚' },
  { id: 'berufsschule', name: 'Berufsschule', icon: '🔧' },
]

const COMMON_QUESTIONS = [
  'Wie formuliere ich eine Bemerkung zur Arbeits- und Sozialverhalten?',
  'Welche Noten dürfen im Zeugnis stehen?',
  'Wann sind Zeugniskonferenzen durchzuführen?',
  'Wie gehe ich mit Fehlzeiten um?',
  'Welche Unterschriften sind erforderlich?',
  'Wie werden Versetzungsentscheidungen dokumentiert?',
]

// ============================================================================
// ONBOARDING WIZARD COMPONENT
// ============================================================================

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 für alle Fragen rund um Zeugnisse',
    },
    {
      title: 'In welchem Bundesland unterrichten Sie?',
      subtitle: 'Wir zeigen Ihnen die passenden Verordnungen',
    },
    {
      title: 'An welcher Schulform?',
      subtitle: 'So können wir die Informationen noch besser anpassen',
    },
    {
      title: 'Alles eingerichtet!',
      subtitle: 'Sie können 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">
        {/* Progress */}
        <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>

        {/* Content */}
        <div className="p-8">
          {/* Step 0: Welcome */}
          {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-gestützte 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 Bundesländer
                  </p>
                </div>
              </div>
            </div>
          )}

          {/* Step 1: Bundesland */}
          {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: Schulform */}
          {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: Complete */}
          {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>

        {/* Navigation */}
        <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' : ''}`}
          >
            Zurück
          </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>
  )
}

// ============================================================================
// CHAT INTERFACE COMPONENT
// ============================================================================

function ChatInterface({ messages, onSendMessage, isLoading, bundesland }: {
  messages: Message[]
  onSendMessage: (message: string) => void
  isLoading: boolean
  bundesland: string | null
}) {
  const [input, setInput] = useState('')
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLTextAreaElement>(null)

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [messages])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (input.trim() && !isLoading) {
      onSendMessage(input.trim())
      setInput('')
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSubmit(e)
    }
  }

  return (
    <div className="flex flex-col h-full">
      {/* Messages */}
      <div className="flex-1 overflow-y-auto p-6 space-y-6">
        {messages.length === 0 ? (
          <div className="text-center py-12">
            <div className="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/30 dark:to-purple-900/30 rounded-full flex items-center justify-center">
              <span className="text-4xl">💬</span>
            </div>
            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
              Stellen Sie eine Frage
            </h3>
            <p className="text-gray-500 dark:text-gray-400 mb-6 max-w-md mx-auto">
              Der Zeugnis-Assistent beantwortet Ihre Fragen basierend auf den
              offiziellen Verordnungen {bundesland ? `für ${BUNDESLAENDER.find(b => b.code === bundesland)?.name}` : ''}.
            </p>
            <div className="flex flex-wrap justify-center gap-2">
              {COMMON_QUESTIONS.slice(0, 3).map((q, i) => (
                <button
                  key={i}
                  onClick={() => onSendMessage(q)}
                  className="px-4 py-2 text-sm bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition"
                >
                  {q}
                </button>
              ))}
            </div>
          </div>
        ) : (
          messages.map((message) => (
            <div
              key={message.id}
              className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
            >
              <div
                className={`max-w-[80%] rounded-2xl p-4 ${
                  message.role === 'user'
                    ? 'bg-blue-600 text-white'
                    : 'bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700'
                }`}
              >
                <p className={`${message.role === 'user' ? 'text-white' : 'text-gray-900 dark:text-white'}`}>
                  {message.content}
                </p>
                {message.sources && message.sources.length > 0 && (
                  <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <p className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
                      Quellen:
                    </p>
                    <div className="space-y-2">
                      {message.sources.map((source) => (
                        <a
                          key={source.id}
                          href={source.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="block p-2 bg-gray-50 dark:bg-gray-900 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition"
                        >
                          <p className="text-sm font-medium text-blue-600 dark:text-blue-400">
                            {source.title}
                          </p>
                          <p className="text-xs text-gray-500">
                            {source.bundesland_name} • {source.doc_type}
                          </p>
                        </a>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>
          ))
        )}
        {isLoading && (
          <div className="flex justify-start">
            <div className="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow-lg border border-gray-200 dark:border-gray-700">
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" />
                <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }} />
                <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }} />
              </div>
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>

      {/* Input */}
      <div className="p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
        <form onSubmit={handleSubmit} className="flex gap-3">
          <textarea
            ref={inputRef}
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder="Stellen Sie Ihre Frage..."
            rows={1}
            className="flex-1 px-4 py-3 bg-gray-100 dark:bg-gray-900 border-0 rounded-xl resize-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:text-white placeholder-gray-500"
          />
          <button
            type="submit"
            disabled={!input.trim() || isLoading}
            className="px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
            </svg>
          </button>
        </form>
      </div>
    </div>
  )
}

// ============================================================================
// SEARCH RESULTS COMPONENT
// ============================================================================

function SearchResults({ results, onSelect }: {
  results: SearchResult[]
  onSelect: (result: SearchResult) => void
}) {
  if (results.length === 0) {
    return (
      <div className="text-center py-12">
        <span className="text-4xl">🔍</span>
        <p className="mt-4 text-gray-500 dark:text-gray-400">
          Keine Ergebnisse gefunden
        </p>
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {results.map((result) => (
        <button
          key={result.id}
          onClick={() => onSelect(result)}
          className="w-full text-left p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md hover:border-blue-300 transition"
        >
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <h4 className="font-medium text-gray-900 dark:text-white mb-1">
                {result.title}
              </h4>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                {result.bundesland_name} • {result.doc_type}
              </p>
              <p className="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">
                {result.snippet}
              </p>
            </div>
            <div className="ml-4 flex items-center gap-2">
              <span className={`px-2 py-1 text-xs rounded-full ${
                result.relevance_score > 0.8
                  ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                  : result.relevance_score > 0.5
                    ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
                    : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
              }`}>
                {Math.round(result.relevance_score * 100)}%
              </span>
            </div>
          </div>
        </button>
      ))}
    </div>
  )
}

// ============================================================================
// MAIN PAGE
// ============================================================================

export default function ZeugnissePage() {
  const [preferences, setPreferences] = useState<UserPreferences>({
    bundesland: null,
    schulform: null,
    hasSeenWizard: false,
    favorites: [],
    recentSearches: [],
  })
  const [showWizard, setShowWizard] = useState(true)
  const [activeTab, setActiveTab] = useState<'chat' | 'search' | 'documents'>('chat')
  const [searchQuery, setSearchQuery] = useState('')
  const [searchResults, setSearchResults] = useState<SearchResult[]>([])
  const [messages, setMessages] = useState<Message[]>([])
  const [isLoading, setIsLoading] = useState(false)

  // Load preferences from localStorage
  useEffect(() => {
    const saved = localStorage.getItem('zeugnis-preferences')
    if (saved) {
      const parsed = JSON.parse(saved)
      setPreferences(parsed)
      setShowWizard(!parsed.hasSeenWizard)
    }
  }, [])

  // Save preferences
  const savePreferences = (newPrefs: Partial<UserPreferences>) => {
    const updated = { ...preferences, ...newPrefs }
    setPreferences(updated)
    localStorage.setItem('zeugnis-preferences', JSON.stringify(updated))
  }

  // Handle wizard completion
  const handleWizardComplete = (prefs: Partial<UserPreferences>) => {
    savePreferences(prefs)
    setShowWizard(false)
  }

  // Handle chat message
  const handleSendMessage = async (content: string) => {
    const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content,
      timestamp: new Date(),
    }
    setMessages(prev => [...prev, userMessage])
    setIsLoading(true)

    // Simulate API call
    setTimeout(() => {
      const assistantMessage: Message = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: `Basierend auf der Zeugnisverordnung ${preferences.bundesland ? `für ${BUNDESLAENDER.find(b => b.code === preferences.bundesland)?.name}` : ''} kann ich Ihnen folgende Auskunft geben:\n\n${content.includes('Bemerkung') ? 'Bemerkungen zum Arbeits- und Sozialverhalten sollten wertschätzend formuliert werden und konkrete Beobachtungen enthalten. Sie müssen den Vorgaben der jeweiligen Schulordnung entsprechen.' : content.includes('Noten') ? 'Im Zeugnis werden die Noten gemäß der geltenden Notenverordnung eingetragen. Die Notenskala reicht von 1 (sehr gut) bis 6 (ungenügend).' : 'Ich habe in den Verordnungen relevante Informationen zu Ihrer Frage gefunden. Bitte beachten Sie die verlinkten Quellen für weitere Details.'}`,
        sources: [
          {
            id: '1',
            title: 'Zeugnisverordnung',
            bundesland: preferences.bundesland || 'ni',
            bundesland_name: BUNDESLAENDER.find(b => b.code === (preferences.bundesland || 'ni'))?.name || 'Niedersachsen',
            doc_type: 'Verordnung',
            snippet: 'Relevanter Auszug aus der Verordnung...',
            relevance_score: 0.92,
            url: '#',
            last_updated: '2024-01-15',
          },
        ],
        timestamp: new Date(),
      }
      setMessages(prev => [...prev, assistantMessage])
      setIsLoading(false)
    }, 1500)
  }

  // Handle search
  const handleSearch = (query: string) => {
    setSearchQuery(query)
    if (!query.trim()) {
      setSearchResults([])
      return
    }

    // Simulate search results
    setSearchResults([
      {
        id: '1',
        title: 'Zeugnisverordnung - Bemerkungen',
        bundesland: preferences.bundesland || 'ni',
        bundesland_name: BUNDESLAENDER.find(b => b.code === (preferences.bundesland || 'ni'))?.name || 'Niedersachsen',
        doc_type: 'Verordnung',
        snippet: 'Die Bemerkungen im Zeugnis sollen das Arbeits- und Sozialverhalten beschreiben...',
        relevance_score: 0.95,
        url: '#',
        last_updated: '2024-01-15',
      },
      {
        id: '2',
        title: 'Ergänzende Bestimmungen für Zeugnisse',
        bundesland: preferences.bundesland || 'ni',
        bundesland_name: BUNDESLAENDER.find(b => b.code === (preferences.bundesland || 'ni'))?.name || 'Niedersachsen',
        doc_type: 'Erlass',
        snippet: 'Für die Erstellung von Zeugnissen gelten folgende ergänzende Bestimmungen...',
        relevance_score: 0.87,
        url: '#',
        last_updated: '2024-02-20',
      },
    ])

    // Save to recent searches
    savePreferences({
      recentSearches: [query, ...preferences.recentSearches.filter(s => s !== query).slice(0, 9)],
    })
  }

  if (showWizard) {
    return <OnboardingWizard onComplete={handleWizardComplete} />
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
      {/* Header */}
      <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                <span className="text-xl">📋</span>
              </div>
              <div>
                <h1 className="text-xl font-bold text-gray-900 dark:text-white">
                  Zeugnis-Assistent
                </h1>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {BUNDESLAENDER.find(b => b.code === preferences.bundesland)?.name || 'Alle Bundesländer'}
                  {preferences.schulform && ` • ${SCHULFORMEN.find(s => s.id === preferences.schulform)?.name}`}
                </p>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <button
                onClick={() => setShowWizard(true)}
                className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition"
                title="Einstellungen"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
              </button>
            </div>
          </div>

          {/* Tabs */}
          <div className="flex gap-1 mt-4 -mb-px">
            {[
              { id: 'chat' as const, label: 'Assistent', icon: '💬' },
              { id: 'search' as const, label: 'Suche', icon: '🔍' },
              { id: 'documents' as const, label: 'Dokumente', icon: '📄' },
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`px-6 py-3 text-sm font-medium rounded-t-lg transition ${
                  activeTab === tab.id
                    ? 'bg-gray-100 dark:bg-gray-700 text-blue-600 dark:text-blue-400 border-b-2 border-blue-600'
                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
                }`}
              >
                <span className="mr-2">{tab.icon}</span>
                {tab.label}
              </button>
            ))}
          </div>
        </div>
      </header>

      {/* Content */}
      <main className="max-w-7xl mx-auto p-6">
        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden min-h-[600px]">
          {activeTab === 'chat' && (
            <ChatInterface
              messages={messages}
              onSendMessage={handleSendMessage}
              isLoading={isLoading}
              bundesland={preferences.bundesland}
            />
          )}

          {activeTab === 'search' && (
            <div className="p-6">
              {/* Search Input */}
              <div className="relative mb-6">
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => handleSearch(e.target.value)}
                  placeholder="Suchen Sie in den Verordnungen..."
                  className="w-full px-12 py-4 bg-gray-100 dark:bg-gray-900 border-0 rounded-xl text-lg focus:ring-2 focus:ring-blue-500"
                />
                <svg
                  className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </div>

              {/* Recent Searches */}
              {!searchQuery && preferences.recentSearches.length > 0 && (
                <div className="mb-6">
                  <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">
                    Letzte Suchen
                  </h3>
                  <div className="flex flex-wrap gap-2">
                    {preferences.recentSearches.map((search, i) => (
                      <button
                        key={i}
                        onClick={() => handleSearch(search)}
                        className="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition"
                      >
                        {search}
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {/* Common Questions */}
              {!searchQuery && (
                <div className="mb-6">
                  <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">
                    Häufige Fragen
                  </h3>
                  <div className="grid grid-cols-2 gap-3">
                    {COMMON_QUESTIONS.map((q, i) => (
                      <button
                        key={i}
                        onClick={() => handleSearch(q)}
                        className="p-4 text-left bg-gray-50 dark:bg-gray-900 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition"
                      >
                        <p className="text-sm text-gray-700 dark:text-gray-300">{q}</p>
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {/* Results */}
              {searchQuery && (
                <SearchResults
                  results={searchResults}
                  onSelect={(result) => {
                    handleSendMessage(`Erkläre mir: ${result.title}`)
                    setActiveTab('chat')
                  }}
                />
              )}
            </div>
          )}

          {activeTab === 'documents' && (
            <div className="p-6">
              <div className="text-center py-12">
                <span className="text-6xl">📚</span>
                <h3 className="mt-4 text-xl font-semibold text-gray-900 dark:text-white">
                  Dokumente-Browser
                </h3>
                <p className="mt-2 text-gray-500 dark:text-gray-400 max-w-md mx-auto">
                  Durchsuchen Sie alle verfügbaren Verordnungen und Handreichungen für Ihr Bundesland.
                </p>
                <button className="mt-6 px-6 py-3 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition">
                  Dokumente durchsuchen
                </button>
              </div>
            </div>
          )}
        </div>
      </main>
    </div>
  )
}