'use client'

import { useTheme } from '@/lib/ThemeContext'
import { lehrerThemen, AlertImportance } from '@/lib/AlertsContext'
import { InfoBox, TipBox, StepBox } from '../InfoBox'

// =============================================================================
// Step 1: Topic Selection
// =============================================================================

interface Step1Props {
  selectedTopics: string[]
  onToggleTopic: (name: string) => void
  customTopic: { name: string; keywords: string }
  onCustomTopicChange: (topic: { name: string; keywords: string }) => void
  isDark: boolean
}

export function Step1TopicSelection({ selectedTopics, onToggleTopic, customTopic, onCustomTopicChange, isDark }: Step1Props) {
  return (
    <div>
      <h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>Welche Themen interessieren Sie?</h2>
      <p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Waehlen Sie Themen, ueber die Sie informiert werden moechten</p>

      <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-6">
        {lehrerThemen.map((topic) => {
          const isSelected = selectedTopics.includes(topic.name)
          return (
            <button key={topic.name} onClick={() => onToggleTopic(topic.name)}
              className={`p-4 rounded-xl border-2 transition-all hover:scale-105 text-left ${isSelected ? 'border-amber-500 bg-amber-500/20 shadow-lg' : isDark ? 'border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20' : 'border-slate-200 bg-white hover:bg-slate-50 hover:border-slate-300'}`}>
              <div className="flex items-center gap-3">
                <span className="text-2xl">{topic.icon}</span>
                <div className="flex-1 min-w-0">
                  <p className={`font-medium truncate ${isSelected ? (isDark ? 'text-amber-300' : 'text-amber-700') : (isDark ? 'text-white' : 'text-slate-900')}`}>{topic.name}</p>
                  <p className={`text-xs truncate ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{topic.keywords.slice(0, 2).join(', ')}</p>
                </div>
                {isSelected && (<div className="w-6 h-6 rounded-full bg-amber-500 flex items-center justify-center"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg></div>)}
              </div>
            </button>
          )
        })}
      </div>

      <div className={`p-4 rounded-xl border ${isDark ? 'bg-white/5 border-white/10' : 'bg-slate-50 border-slate-200'}`}>
        <h4 className={`font-medium mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}><span>📌</span> Eigenes Thema hinzufuegen</h4>
        <div className="space-y-3">
          <input type="text" placeholder="Themenname (z.B. 'Mathematik Didaktik')" value={customTopic.name} onChange={(e) => onCustomTopicChange({ ...customTopic, name: e.target.value })} className={`w-full px-4 py-2 rounded-lg border ${isDark ? 'bg-white/10 border-white/20 text-white placeholder-white/40' : 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'}`} />
          <input type="text" placeholder="Stichwoerter (kommagetrennt)" value={customTopic.keywords} onChange={(e) => onCustomTopicChange({ ...customTopic, keywords: e.target.value })} className={`w-full px-4 py-2 rounded-lg border ${isDark ? 'bg-white/10 border-white/20 text-white placeholder-white/40' : 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'}`} />
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// Step 2: Google Alerts Instructions
// =============================================================================

export function Step2Instructions({ selectedTopics, isDark }: { selectedTopics: string[]; isDark: boolean }) {
  return (
    <div>
      <h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>Google Alerts einrichten</h2>
      <p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Google sendet Alerts per E-Mail - wir verarbeiten sie fuer Sie</p>

      <InfoBox variant="info" title="So funktioniert es" icon="💡" className="mb-6">
        <p>Google Alerts versendet Benachrichtigungen per E-Mail an Ihr Konto. Sie richten einfach eine Weiterleitung ein - wir uebernehmen die Auswertung, Filterung und Zusammenfassung.</p>
      </InfoBox>

      <div className="space-y-4">
        <StepBox step={1} title="Google Alerts oeffnen" isActive><p className="mb-2">Besuchen Sie <a href="https://www.google.de/alerts" target="_blank" rel="noopener noreferrer" className="text-amber-500 hover:underline font-medium">google.de/alerts</a> und melden Sie sich mit Ihrem Google-Konto an.</p></StepBox>
        <StepBox step={2} title="Alerts erstellen"><p>Geben Sie Suchbegriffe ein (z.B. &quot;{selectedTopics[0] || 'Bildungspolitik'}&quot;) und erstellen Sie Alerts.</p></StepBox>
        <StepBox step={3} title="E-Mail-Weiterleitung einrichten"><p>Im naechsten Schritt richten Sie eine automatische Weiterleitung der Google Alert E-Mails an uns ein.</p></StepBox>
      </div>

      <TipBox title="Tipp: Mehrere Alerts kombinieren" icon="💡" className="mt-6"><p>Sie koennen beliebig viele Google Alerts erstellen. Alle werden per E-Mail an Sie gesendet und durch die Weiterleitung automatisch verarbeitet.</p></TipBox>
    </div>
  )
}

// =============================================================================
// Step 3: Email Forwarding
// =============================================================================

export function Step3Forwarding({ rssFeedUrl, onRssFeedUrlChange, isDark }: { rssFeedUrl: string; onRssFeedUrlChange: (url: string) => void; isDark: boolean }) {
  return (
    <div>
      <h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>E-Mail Weiterleitung einrichten</h2>
      <p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Leiten Sie Ihre Google Alert E-Mails automatisch an uns weiter</p>

      <div className="space-y-4">
        <div className={`p-5 rounded-xl border-2 ${isDark ? 'border-green-500/50 bg-green-500/10' : 'border-green-500 bg-green-50'}`}>
          <div className="flex items-start gap-3 mb-4">
            <span className="text-2xl">📧</span>
            <div className="flex-1">
              <div className="flex items-center gap-2 mb-1">
                <h4 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>E-Mail Weiterleitung</h4>
                <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/20 text-green-600">Empfohlen</span>
              </div>
              <p className={`text-sm ${isDark ? 'text-white/70' : 'text-slate-600'}`}>Richten Sie in Gmail einen Filter ein, der Google Alert E-Mails automatisch weiterleitet.</p>
            </div>
          </div>
          <div className={`p-3 rounded-lg ${isDark ? 'bg-white/10' : 'bg-white'}`}>
            <p className={`text-sm font-medium mb-2 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>Ihre Weiterleitungsadresse:</p>
            <div className="flex gap-2">
              <code className={`flex-1 px-3 py-2 rounded-lg text-sm font-mono ${isDark ? 'bg-white/10 text-amber-300' : 'bg-slate-100 text-amber-600'}`}>alerts@breakpilot.de</code>
              <button onClick={() => navigator.clipboard.writeText('alerts@breakpilot.de')} className="px-3 py-2 rounded-lg bg-amber-500 text-white text-sm hover:bg-amber-600 transition-all">Kopieren</button>
            </div>
          </div>
          <div className="mt-4 space-y-2">
            <p className={`text-sm font-medium ${isDark ? 'text-white/80' : 'text-slate-700'}`}>So richten Sie die Weiterleitung in Gmail ein:</p>
            <ol className={`text-sm space-y-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
              <li>1. Oeffnen Sie Gmail → Einstellungen → Filter</li>
              <li>2. Neuer Filter: Von &quot;googlealerts-noreply@google.com&quot;</li>
              <li>3. Aktion: Weiterleiten an &quot;alerts@breakpilot.de&quot;</li>
            </ol>
          </div>
        </div>

        <div className={`p-4 rounded-xl border ${isDark ? 'border-white/10 bg-white/5' : 'border-slate-200 bg-slate-50'}`}>
          <div className="flex items-start gap-3">
            <span className="text-xl">📡</span>
            <div className="flex-1">
              <h4 className={`font-medium mb-1 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>Alternativ: RSS-Feed (eingeschraenkt verfuegbar)</h4>
              <p className={`text-sm mb-3 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Google hat die RSS-Option fuer viele Konten entfernt. Falls verfuegbar:</p>
              <input type="url" placeholder="https://www.google.de/alerts/feeds/... (falls verfuegbar)" value={rssFeedUrl} onChange={(e) => onRssFeedUrlChange(e.target.value)} className={`w-full px-4 py-2 rounded-lg border text-sm ${isDark ? 'bg-white/10 border-white/20 text-white placeholder-white/30' : 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'}`} />
            </div>
          </div>
        </div>

        <div className={`p-4 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
          <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Sie koennen diesen Schritt auch ueberspringen und die Weiterleitung spaeter einrichten.</p>
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// Step 4: Notification Settings
// =============================================================================

interface Step4Props {
  notificationFrequency: 'realtime' | 'hourly' | 'daily'
  onFrequencyChange: (freq: 'realtime' | 'hourly' | 'daily') => void
  minImportance: AlertImportance
  onMinImportanceChange: (imp: AlertImportance) => void
  selectedTopics: string[]
  customTopic: { name: string; keywords: string }
  rssFeedUrl: string
  isDark: boolean
}

export function Step4Settings({ notificationFrequency, onFrequencyChange, minImportance, onMinImportanceChange, selectedTopics, customTopic, rssFeedUrl, isDark }: Step4Props) {
  return (
    <div>
      <h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>Benachrichtigungen einstellen</h2>
      <p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Wie moechten Sie informiert werden?</p>

      <div className="space-y-6">
        <div>
          <label className={`block text-sm font-medium mb-3 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>Wie oft moechten Sie Alerts erhalten?</label>
          <div className="grid grid-cols-3 gap-3">
            {([{ id: 'realtime', label: 'Sofort', icon: '⚡', desc: 'Bei jedem neuen Alert' }, { id: 'hourly', label: 'Stuendlich', icon: '🕐', desc: 'Zusammenfassung pro Stunde' }, { id: 'daily', label: 'Taeglich', icon: '📅', desc: 'Einmal am Tag' }] as const).map((freq) => (
              <button key={freq.id} onClick={() => onFrequencyChange(freq.id)}
                className={`p-4 rounded-xl border-2 transition-all text-center ${notificationFrequency === freq.id ? 'border-amber-500 bg-amber-500/20' : isDark ? 'border-white/10 bg-white/5 hover:bg-white/10' : 'border-slate-200 bg-white hover:bg-slate-50'}`}>
                <span className="text-2xl block mb-1">{freq.icon}</span>
                <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{freq.label}</p>
                <p className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{freq.desc}</p>
              </button>
            ))}
          </div>
        </div>

        <div>
          <label className={`block text-sm font-medium mb-3 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>Mindest-Wichtigkeit fuer Benachrichtigungen</label>
          <div className="grid grid-cols-5 gap-2">
            {([{ id: 'KRITISCH', label: 'Kritisch' }, { id: 'DRINGEND', label: 'Dringend' }, { id: 'WICHTIG', label: 'Wichtig' }, { id: 'PRUEFEN', label: 'Pruefen' }, { id: 'INFO', label: 'Info' }] as const).map((imp) => (
              <button key={imp.id} onClick={() => onMinImportanceChange(imp.id as AlertImportance)}
                className={`p-2 rounded-lg border-2 transition-all text-center text-xs ${minImportance === imp.id ? 'border-amber-500 bg-amber-500/20' : isDark ? 'border-white/10 bg-white/5 hover:bg-white/10' : 'border-slate-200 bg-white hover:bg-slate-50'}`}>
                <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{imp.label}</p>
              </button>
            ))}
          </div>
          <p className={`text-xs mt-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Sie erhalten nur Benachrichtigungen fuer Alerts mit dieser Wichtigkeit oder hoeher.</p>
        </div>

        <div className={`p-4 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
          <h4 className={`font-medium mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>Ihre Einstellungen</h4>
          <ul className={`text-sm space-y-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
            <li>- {selectedTopics.length + (customTopic.name ? 1 : 0)} Themen ausgewaehlt</li>
            <li>- Benachrichtigungen: {notificationFrequency === 'realtime' ? 'Sofort' : notificationFrequency === 'hourly' ? 'Stuendlich' : 'Taeglich'}</li>
            <li>- Mindest-Wichtigkeit: {minImportance}</li>
            {rssFeedUrl && <li>- RSS-Feed verbunden</li>}
          </ul>
        </div>
      </div>
    </div>
  )
}