'use client'

import { motion } from 'framer-motion'
import { useState } from 'react'
import Link from 'next/link'
import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer'

export default function ITCheckliste() {
  const [answers, setAnswers] = useState<Record<string, string>>({})
  const [showResults, setShowResults] = useState(false)

  const questions = [
    {
      id: 'backup',
      question: 'Wie häufig werden Backups Ihrer IT-Systeme durchgeführt?',
      options: ['Täglich automatisch', 'Wöchentlich', 'Manuell bei Bedarf', 'Keine regelmäßigen Backups'],
      risks: {
        'Keine regelmäßigen Backups': 'hoch',
        'Manuell bei Bedarf': 'mittel',
        'Wöchentlich': 'niedrig',
        'Täglich automatisch': 'sehr niedrig',
      },
    },
    {
      id: 'updates',
      question: 'Wie werden Software-Updates und Sicherheitspatches verwaltet?',
      options: ['Automatisch installiert', 'Regelmäßig manuell', 'Nur bei Problemen', 'Keine systematische Verwaltung'],
      risks: {
        'Keine systematische Verwaltung': 'hoch',
        'Nur bei Problemen': 'hoch',
        'Regelmäßig manuell': 'mittel',
        'Automatisch installiert': 'niedrig',
      },
    },
    {
      id: 'security',
      question: 'Welche IT-Sicherheitsmaßnahmen sind implementiert?',
      options: ['Firewall, Antivirus, regelmäßige Audits', 'Firewall und Antivirus', 'Nur Antivirus', 'Keine speziellen Maßnahmen'],
      risks: {
        'Keine speziellen Maßnahmen': 'hoch',
        'Nur Antivirus': 'hoch',
        'Firewall und Antivirus': 'mittel',
        'Firewall, Antivirus, regelmäßige Audits': 'niedrig',
      },
    },
    {
      id: 'training',
      question: 'Wie häufig werden Mitarbeiter in IT-Sicherheit geschult?',
      options: ['Regelmäßig (mind. jährlich)', 'Bei Bedarf', 'Nur bei Einstellung', 'Keine Schulungen'],
      risks: {
        'Keine Schulungen': 'hoch',
        'Nur bei Einstellung': 'mittel',
        'Bei Bedarf': 'mittel',
        'Regelmäßig (mind. jährlich)': 'niedrig',
      },
    },
    {
      id: 'documentation',
      question: 'Wie ist die Dokumentation Ihrer IT-Infrastruktur?',
      options: ['Vollständig und aktuell', 'Teilweise dokumentiert', 'Veraltete Dokumentation', 'Keine Dokumentation'],
      risks: {
        'Keine Dokumentation': 'hoch',
        'Veraltete Dokumentation': 'mittel',
        'Teilweise dokumentiert': 'mittel',
        'Vollständig und aktuell': 'niedrig',
      },
    },
  ]

  const handleAnswer = (questionId: string, answer: string) => {
    setAnswers({ ...answers, [questionId]: answer })
  }

  const calculateResults = () => {
    const riskCounts = { hoch: 0, mittel: 0, niedrig: 0, 'sehr niedrig': 0 }
    
    questions.forEach(q => {
      const answer = answers[q.id]
      if (answer) {
        const risk = q.risks[answer as keyof typeof q.risks]
        if (risk) riskCounts[risk as keyof typeof riskCounts]++
      }
    })

    const totalAnswered = Object.keys(answers).length
    const highRiskCount = riskCounts.hoch
    const mediumRiskCount = riskCounts.mittel

    let overallRisk = 'niedrig'
    let recommendations: string[] = []

    if (highRiskCount > 2 || (highRiskCount > 0 && mediumRiskCount > 2)) {
      overallRisk = 'hoch'
      recommendations = [
        'Dringende IT-Sicherheitsanalyse empfohlen',
        'Implementierung eines Backup-Systems',
        'Regelmäßige Sicherheitsschulungen für Mitarbeiter',
        'Aktualisierung der IT-Dokumentation',
      ]
    } else if (highRiskCount > 0 || mediumRiskCount > 2) {
      overallRisk = 'mittel'
      recommendations = [
        'IT-Infrastrukturanalyse zur Identifikation von Optimierungspotenzialen',
        'Verbesserung der Backup-Strategie',
        'Regelmäßige IT-Sicherheitsschulungen',
      ]
    } else {
      recommendations = [
        'Regelmäßige Überprüfung der IT-Infrastruktur',
        'Fortlaufende Weiterbildung der Mitarbeiter',
      ]
    }

    return { overallRisk, recommendations, riskCounts }
  }

  const handleSubmit = () => {
    if (Object.keys(answers).length === questions.length) {
      setShowResults(true)
    } else {
      alert('Bitte beantworten Sie alle Fragen.')
    }
  }

  const results = showResults ? calculateResults() : null

  return (
    <>
      <Navigation />
      <main>
        <section className="page-hero">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="container"
          >
            <h1>IT-Infrastruktur-Checkliste</h1>
            <p className="page-hero-subtitle">
              Erhalten Sie eine erste Einschätzung Ihrer IT-Sicherheit
            </p>
          </motion.div>
        </section>

        <section className="page-content">
          <div className="container">
            {!showResults ? (
              <>
                <motion.div
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6 }}
                  className="content-block"
                >
                  <h2>Beantworten Sie die folgenden Fragen</h2>
                  <p>
                    Diese Checkliste gibt Ihnen eine erste Einschätzung potenzieller Schwachstellen 
                    und Optimierungspotenziale in Ihrer IT-Infrastruktur.
                  </p>
                </motion.div>

                <div style={{ maxWidth: '800px', margin: '0 auto', marginTop: '60px' }}>
                  {questions.map((q, index) => (
                    <motion.div
                      key={q.id}
                      initial={{ opacity: 0, y: 30 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      viewport={{ once: true }}
                      transition={{ duration: 0.6, delay: index * 0.1 }}
                      className="feature-card"
                      style={{ marginBottom: '30px', textAlign: 'left' }}
                    >
                      <h3 style={{ marginBottom: '20px', fontSize: '20px' }}>{q.question}</h3>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                        {q.options.map((option) => (
                          <label
                            key={option}
                            style={{
                              display: 'flex',
                              alignItems: 'center',
                              padding: '12px',
                              background: answers[q.id] === option ? 'rgba(0, 113, 227, 0.1)' : 'rgba(255, 255, 255, 0.05)',
                              border: `1px solid ${answers[q.id] === option ? 'var(--color-accent)' : 'rgba(255, 255, 255, 0.1)'}`,
                              borderRadius: '8px',
                              cursor: 'pointer',
                              transition: 'all 0.3s ease',
                            }}
                          >
                            <input
                              type="radio"
                              name={q.id}
                              value={option}
                              checked={answers[q.id] === option}
                              onChange={() => handleAnswer(q.id, option)}
                              style={{ marginRight: '10px' }}
                            />
                            {option}
                          </label>
                        ))}
                      </div>
                    </motion.div>
                  ))}

                  <motion.div
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.6 }}
                  >
                    <button onClick={handleSubmit} className="btn btn-primary" style={{ width: '100%', marginTop: '20px' }}>
                      Auswertung anzeigen
                    </button>
                  </motion.div>
                </div>
              </>
            ) : (
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                className="feature-card-large"
                style={{ maxWidth: '800px', margin: '0 auto', textAlign: 'left' }}
              >
                <h2 style={{ marginBottom: '30px' }}>Ihre IT-Einschätzung</h2>
                
                <div style={{ marginBottom: '30px' }}>
                  <h3 style={{ marginBottom: '15px' }}>Gesamtrisiko: {results?.overallRisk}</h3>
                  <p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
                    Basierend auf Ihren Antworten haben wir eine erste Einschätzung erstellt. 
                    Für eine detaillierte Analyse empfehlen wir eine umfassende IT-Infrastrukturanalyse.
                  </p>
                </div>

                <div style={{ marginBottom: '30px' }}>
                  <h3 style={{ marginBottom: '15px' }}>Empfohlene Maßnahmen</h3>
                  <ul style={{ fontSize: '17px', lineHeight: '1.7', paddingLeft: '20px', color: 'var(--color-text-secondary)' }}>
                    {results?.recommendations.map((rec, i) => (
                      <li key={i} style={{ marginBottom: '10px' }}>{rec}</li>
                    ))}
                  </ul>
                </div>

                <div style={{ marginTop: '40px', paddingTop: '30px', borderTop: '1px solid rgba(255, 255, 255, 0.1)' }}>
                  <p style={{ marginBottom: '20px', fontSize: '17px' }}>
                    Möchten Sie eine detaillierte IT-Infrastrukturanalyse? Kontaktieren Sie uns für eine unverbindliche Beratung.
                  </p>
                  <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
                    <Link href="/kontakt" className="btn btn-primary">
                      Jetzt Kontakt aufnehmen
                    </Link>
                    <button
                      onClick={() => {
                        setShowResults(false)
                        setAnswers({})
                      }}
                      className="btn btn-secondary"
                    >
                      Erneut starten
                    </button>
                  </div>
                </div>
              </motion.div>
            )}
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}

