'use client'

/**
 * Mail Wizard Page
 * Migrated from website/admin/mail/wizard to admin-v2/communication/mail/wizard
 *
 * Interaktives Lernen und Testen der E-Mail Integration
 */

import { useState } from 'react'
import Link from 'next/link'
import { PagePurpose } from '@/components/common/PagePurpose'
import {
  WizardStepper,
  WizardNavigation,
  EducationCard,
  ArchitectureContext,
  TestRunner,
  TestSummary,
  type WizardStep,
  type TestCategoryResult,
  type FullTestResults,
  type EducationContent,
  type ArchitectureContextType,
} from '@/components/wizard'

// ==============================================
// Constants
// ==============================================

const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://macmini:8000'

const STEPS: WizardStep[] = [
  { id: 'welcome', name: 'Willkommen', icon: '👋', status: 'pending' },
  { id: 'smtp', name: 'SMTP', icon: '📤', status: 'pending', category: 'smtp' },
  { id: 'imap', name: 'IMAP', icon: '📥', status: 'pending', category: 'imap' },
  { id: 'templates', name: 'Templates', icon: '📝', status: 'pending', category: 'templates' },
  { id: 'ai-analysis', name: 'KI-Analyse', icon: '🤖', status: 'pending', category: 'ai-analysis' },
  { id: 'summary', name: 'Zusammenfassung', icon: '📊', status: 'pending' },
]

const EDUCATION_CONTENT: Record<string, EducationContent> = {
  'welcome': {
    title: 'Willkommen zum Mail Wizard',
    content: [
      'E-Mail ist nach wie vor der wichtigste Kommunikationskanal mit Eltern.',
      '',
      'BreakPilot bietet:',
      '- SMTP: Versand von System-E-Mails (Benachrichtigungen, Newsletter)',
      '- IMAP: Empfang und Analyse eingehender E-Mails',
      '- Templates: Versionierte E-Mail-Vorlagen mit DSB-Freigabe',
      '- KI-Analyse: Automatische Kategorisierung und GFK-Pruefung',
      '',
      'In der Entwicklung nutzen wir Mailpit als Mail-Catcher.',
      'Alle E-Mails werden abgefangen und koennen inspiziert werden.',
    ],
  },
  'smtp': {
    title: 'SMTP - Ausgehende E-Mails',
    content: [
      'SMTP (Simple Mail Transfer Protocol) sendet E-Mails.',
      '',
      'Typische Verwendung:',
      '- Passwort-Reset E-Mails',
      '- Einwilligungs-Erinnerungen',
      '- DSR-Kommunikation (Betroffenenanfragen)',
      '- Elternbriefe und Newsletter',
      '',
      'Entwicklungsumgebung:',
      '- Mailpit faengt alle E-Mails ab',
      '- Keine echten E-Mails werden versendet',
      '- Web-UI unter http://macmini:8025',
      '',
      'Produktion: Echter SMTP-Server (z.B. Postfix, SES)',
    ],
  },
  'imap': {
    title: 'IMAP - Eingehende E-Mails',
    content: [
      'IMAP (Internet Message Access Protocol) empfaengt E-Mails.',
      '',
      'Anwendungsfaelle:',
      '- Eltern-Antworten auf Benachrichtigungen',
      '- Automatische Ticket-Erstellung aus E-Mails',
      '- Abwesenheitsmeldungen per E-Mail',
      '',
      'Verarbeitung:',
      '1. E-Mail wird empfangen',
      '2. KI analysiert Inhalt und Stimmung',
      '3. Automatische Kategorisierung',
      '4. Weiterleitung an zustaendige Stelle',
      '',
      'DSGVO: E-Mails werden nach Verarbeitung archiviert/geloescht',
    ],
  },
  'templates': {
    title: 'E-Mail Templates - Versionierte Vorlagen',
    content: [
      'Alle System-E-Mails nutzen versionierte Templates.',
      '',
      'Workflow (wie bei rechtlichen Dokumenten):',
      '- draft: Entwurf wird erstellt',
      '- review: DSB/Admin prueft Inhalt',
      '- approved: Freigabe erteilt',
      '- published: Aktiv im System',
      '',
      'Template-Typen:',
      '- welcome: Willkommens-E-Mail',
      '- password_reset: Passwort zuruecksetzen',
      '- consent_reminder: Einwilligungs-Erinnerung',
      '- dsr_receipt: DSR-Eingangsbestaetigung',
      '',
      'Personalisierung: {{user.name}}, {{deadline}}, etc.',
    ],
  },
  'ai-analysis': {
    title: 'KI-Analyse - LLM & GFK',
    content: [
      'KI-gestuetzte Analyse verbessert die Kommunikation.',
      '',
      'LLM-Funktionen:',
      '- Automatische Kategorisierung eingehender E-Mails',
      '- Sentiment-Analyse (positiv/neutral/negativ)',
      '- Zusammenfassung langer E-Mails',
      '- Antwort-Vorschlaege generieren',
      '',
      'GFK (Gewaltfreie Kommunikation):',
      '- Pruefung ausgehender Elternbriefe',
      '- Erkennung von "Du-Botschaften"',
      '- Vorschlaege fuer wertschaetzende Formulierung',
      '- Konfliktvermeidung durch bessere Sprache',
      '',
      'Optional: Nur aktiv wenn LLM_GATEWAY_ENABLED=true',
    ],
  },
  'summary': {
    title: 'Test-Zusammenfassung',
    content: [
      'Hier sehen Sie eine Uebersicht aller durchgefuehrten Tests:',
      '- SMTP Server Verfuegbarkeit',
      '- IMAP Server Status',
      '- Template-Verwaltung',
      '- KI-Analyse Bereitschaft',
    ],
  },
}

const ARCHITECTURE_CONTEXTS: Record<string, ArchitectureContextType> = {
  'smtp': {
    layer: 'service',
    services: ['backend', 'mailserver'],
    dependencies: ['Mailpit (Dev)', 'Postfix (Prod)', 'DNS/SPF/DKIM'],
    dataFlow: ['FastAPI', 'SMTP Client', 'Mailpit/Postfix', 'Recipient'],
  },
  'imap': {
    layer: 'service',
    services: ['backend', 'mailserver'],
    dependencies: ['IMAP Server', 'PostgreSQL', 'LLM Gateway'],
    dataFlow: ['Mailserver', 'IMAP Fetch', 'KI-Analyse', 'PostgreSQL'],
  },
  'templates': {
    layer: 'api',
    services: ['backend', 'consent-service'],
    dependencies: ['PostgreSQL', 'Template Engine', 'DSB Workflow'],
    dataFlow: ['Admin UI', 'FastAPI', 'email_templates', 'PostgreSQL'],
  },
  'ai-analysis': {
    layer: 'service',
    services: ['backend'],
    dependencies: ['LLM Gateway', 'OpenAI/Anthropic/Local', 'GFK Rules'],
    dataFlow: ['E-Mail Text', 'LLM Gateway', 'Analyse Result', 'PostgreSQL'],
  },
}

// ==============================================
// Main Component
// ==============================================

export default function MailWizardPage() {
  const [currentStep, setCurrentStep] = useState(0)
  const [steps, setSteps] = useState<WizardStep[]>(STEPS)
  const [categoryResults, setCategoryResults] = useState<Record<string, TestCategoryResult>>({})
  const [fullResults, setFullResults] = useState<FullTestResults | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const currentStepData = steps[currentStep]
  const isTestStep = currentStepData?.category !== undefined
  const isWelcome = currentStepData?.id === 'welcome'
  const isSummary = currentStepData?.id === 'summary'

  const runCategoryTest = async (category: string) => {
    setIsLoading(true)
    setError(null)

    try {
      const response = await fetch(`${BACKEND_URL}/api/admin/mail-tests/${category}`, {
        method: 'POST',
      })

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
      }

      const result: TestCategoryResult = await response.json()
      setCategoryResults((prev) => ({ ...prev, [category]: result }))

      setSteps((prev) =>
        prev.map((step) =>
          step.category === category
            ? { ...step, status: result.failed === 0 ? 'completed' : 'failed' }
            : step
        )
      )
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    } finally {
      setIsLoading(false)
    }
  }

  const runAllTests = async () => {
    setIsLoading(true)
    setError(null)

    try {
      const response = await fetch(`${BACKEND_URL}/api/admin/mail-tests/run-all`, {
        method: 'POST',
      })

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
      }

      const results: FullTestResults = await response.json()
      setFullResults(results)

      setSteps((prev) =>
        prev.map((step) => {
          if (step.category) {
            const catResult = results.categories.find((c) => c.category === step.category)
            if (catResult) {
              return { ...step, status: catResult.failed === 0 ? 'completed' : 'failed' }
            }
          }
          return step
        })
      )

      const newCategoryResults: Record<string, TestCategoryResult> = {}
      results.categories.forEach((cat) => {
        newCategoryResults[cat.category] = cat
      })
      setCategoryResults(newCategoryResults)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    } finally {
      setIsLoading(false)
    }
  }

  const goToNext = () => {
    if (currentStep < steps.length - 1) {
      setSteps((prev) =>
        prev.map((step, idx) =>
          idx === currentStep && step.status === 'pending'
            ? { ...step, status: 'completed' }
            : step
        )
      )
      setCurrentStep((prev) => prev + 1)
    }
  }

  const goToPrev = () => {
    if (currentStep > 0) {
      setCurrentStep((prev) => prev - 1)
    }
  }

  const handleStepClick = (index: number) => {
    if (index <= currentStep || steps[index - 1]?.status !== 'pending') {
      setCurrentStep(index)
    }
  }

  return (
    <div>
      {/* Page Purpose */}
      <PagePurpose
        title="Mail Wizard"
        purpose="Interaktives Lernen und Testen der E-Mail Integration. Pruefen Sie SMTP, IMAP, Templates und KI-Analyse Schritt fuer Schritt."
        audience={['Admins', 'Entwickler']}
        architecture={{
          services: ['backend (Python)', 'mailpit (Dev)', 'LLM Gateway'],
          databases: ['PostgreSQL'],
        }}
        relatedPages={[
          { name: 'Unified Inbox', href: '/communication/mail', description: 'E-Mail Verwaltung' },
        ]}
        collapsible={true}
        defaultCollapsed={true}
      />

      {/* Back Link */}
      <div className="mb-6">
        <Link href="/communication/mail" className="text-blue-600 hover:text-blue-800 text-sm flex items-center gap-1">
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          Zurueck zu E-Mail Management
        </Link>
      </div>

      {/* Header */}
      <div className="bg-white rounded-lg shadow p-4 mb-6 flex items-center justify-between">
        <div className="flex items-center">
          <span className="text-3xl mr-3">📧</span>
          <div>
            <h2 className="text-lg font-bold text-gray-800">E-Mail Test Wizard</h2>
            <p className="text-sm text-gray-600">SMTP, IMAP, Templates & KI-Analyse</p>
          </div>
        </div>
      </div>

      {/* Stepper */}
      <div className="bg-white rounded-lg shadow p-6 mb-6">
        <WizardStepper steps={steps} currentStep={currentStep} onStepClick={handleStepClick} />
      </div>

      {/* Content */}
      <div className="bg-white rounded-lg shadow p-6">
        <div className="flex items-center mb-6">
          <span className="text-3xl mr-3">{currentStepData?.icon}</span>
          <div>
            <h2 className="text-xl font-bold text-gray-800">
              Schritt {currentStep + 1}: {currentStepData?.name}
            </h2>
            <p className="text-gray-500 text-sm">
              {currentStep + 1} von {steps.length}
            </p>
          </div>
        </div>

        <EducationCard content={EDUCATION_CONTENT[currentStepData?.id || '']} />

        {isTestStep && currentStepData?.category && ARCHITECTURE_CONTEXTS[currentStepData.category] && (
          <ArchitectureContext
            context={ARCHITECTURE_CONTEXTS[currentStepData.category]}
            currentStep={currentStepData.name}
          />
        )}

        {error && (
          <div className="bg-red-50 border border-red-200 text-red-700 rounded-lg p-4 mb-6">
            <strong>Fehler:</strong> {error}
          </div>
        )}

        {isWelcome && (
          <div className="text-center py-8">
            <button
              onClick={goToNext}
              className="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
            >
              Wizard starten
            </button>
          </div>
        )}

        {isTestStep && currentStepData?.category && (
          <TestRunner
            category={currentStepData.category}
            categoryResult={categoryResults[currentStepData.category]}
            isLoading={isLoading}
            onRunTests={() => runCategoryTest(currentStepData.category!)}
          />
        )}

        {isSummary && (
          <div>
            {!fullResults ? (
              <div className="text-center py-8">
                <p className="text-gray-600 mb-4">
                  Fuehren Sie alle Tests aus um eine Zusammenfassung zu sehen.
                </p>
                <button
                  onClick={runAllTests}
                  disabled={isLoading}
                  className={`px-6 py-3 rounded-lg font-medium transition-colors ${
                    isLoading
                      ? 'bg-gray-400 cursor-not-allowed'
                      : 'bg-blue-600 text-white hover:bg-blue-700'
                  }`}
                >
                  {isLoading ? 'Alle Tests laufen...' : 'Alle Tests ausfuehren'}
                </button>
              </div>
            ) : (
              <TestSummary results={fullResults} />
            )}
          </div>
        )}

        <WizardNavigation
          currentStep={currentStep}
          totalSteps={steps.length}
          onPrev={goToPrev}
          onNext={goToNext}
          showNext={!isSummary}
          isLoading={isLoading}
        />
      </div>

      <div className="text-center text-gray-500 text-sm mt-6">
        Diese Tests pruefen die E-Mail-Integration.
        Bei Fragen wenden Sie sich an das IT-Team.
      </div>
    </div>
  )
}