'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 LernpfadFinder() {
  const [currentStep, setCurrentStep] = useState(0)
  const [answers, setAnswers] = useState<Record<number, string>>({})
  const [recommendation, setRecommendation] = useState<string | null>(null)
  const [showContactForm, setShowContactForm] = useState(false)
  const [contactData, setContactData] = useState({
    name: '',
    email: '',
    message: '',
  })

  const questions = [
    {
      question: 'Was ist Ihr Hauptziel?',
      options: [
        { text: 'Karrierewechsel in die IT', value: 'career' },
        { text: 'IT-Kenntnisse für meinen aktuellen Job', value: 'current' },
        { text: 'Persönliches Interesse an IT', value: 'interest' },
        { text: 'Gründung eines IT-Unternehmens', value: 'startup' },
      ],
    },
    {
      question: 'Welcher Bereich interessiert Sie am meisten?',
      options: [
        { text: 'Programmierung & Softwareentwicklung', value: 'programming' },
        { text: 'IT-Sicherheit & Cybersecurity', value: 'security' },
        { text: 'Systemadministration & Netzwerke', value: 'admin' },
        { text: 'Webentwicklung', value: 'web' },
        { text: 'Noch unsicher', value: 'unsure' },
      ],
    },
    {
      question: 'Wie viel Zeit können Sie pro Woche investieren?',
      options: [
        { text: 'Weniger als 5 Stunden', value: 'low' },
        { text: '5-10 Stunden', value: 'medium' },
        { text: '10-20 Stunden', value: 'high' },
        { text: 'Mehr als 20 Stunden', value: 'very-high' },
      ],
    },
    {
      question: 'Haben Sie bereits IT-Vorkenntnisse?',
      options: [
        { text: 'Keine Vorkenntnisse', value: 'none' },
        { text: 'Grundkenntnisse (Computer, Internet)', value: 'basic' },
        { text: 'Einige Erfahrung mit IT', value: 'some' },
        { text: 'Fortgeschrittene Kenntnisse', value: 'advanced' },
      ],
    },
  ]

  const handleAnswer = (value: string) => {
    setAnswers({ ...answers, [currentStep]: value })
    if (currentStep < questions.length - 1) {
      setCurrentStep(currentStep + 1)
    } else {
      calculateRecommendation()
    }
  }

  const calculateRecommendation = () => {
    const goal = answers[0]
    const interest = answers[1]
    const time = answers[2]
    const experience = answers[3]

    let recommendedCourse = 'IT-Grundlagen für Einsteiger'

    if (experience === 'none' || experience === 'basic') {
      recommendedCourse = 'IT-Grundlagen für Einsteiger'
    } else if (interest === 'programming') {
      recommendedCourse = 'Python für Anfänger'
    } else if (interest === 'web') {
      recommendedCourse = 'Webentwicklung für Einsteiger'
    } else if (interest === 'security') {
      recommendedCourse = 'IT-Security Grundlagen'
    } else if (interest === 'admin') {
      recommendedCourse = 'Linux für Anfänger'
    }

    setRecommendation(recommendedCourse)
  }

  const resetQuiz = () => {
    setCurrentStep(0)
    setAnswers({})
    setRecommendation(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>Lernpfad-Finder</h1>
            <p className="page-hero-subtitle">
              Finden Sie den passenden Kurs für Ihren Einstieg
            </p>
          </motion.div>
        </section>

        <section className="page-content">
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="content-block"
            >
              <h2>Ihr persönlicher Lernpfad</h2>
              <p>
                Beantworten Sie ein paar Fragen und wir empfehlen Ihnen den passenden Kurs 
                für Ihren Einstieg in die IT.
              </p>
            </motion.div>

            <div style={{ maxWidth: '800px', margin: '0 auto', marginTop: '60px' }}>
              {!recommendation ? (
                <>
                  {/* Progress Bar */}
                  <div style={{ marginBottom: '40px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px', fontSize: '14px', color: 'var(--color-text-secondary)' }}>
                      <span>Frage {currentStep + 1} von {questions.length}</span>
                      <span>{Math.round(((currentStep + 1) / questions.length) * 100)}%</span>
                    </div>
                    <div style={{ width: '100%', height: '4px', background: 'rgba(255, 255, 255, 0.1)', borderRadius: '2px', overflow: 'hidden' }}>
                      <motion.div
                        initial={{ width: 0 }}
                        animate={{ width: `${((currentStep + 1) / questions.length) * 100}%` }}
                        transition={{ duration: 0.3 }}
                        style={{ height: '100%', background: 'var(--color-accent)', borderRadius: '2px' }}
                      />
                    </div>
                  </div>

                  {/* Current Question */}
                  <motion.div
                    key={currentStep}
                    initial={{ opacity: 0, x: 20 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: -20 }}
                    className="feature-card-large"
                    style={{ textAlign: 'left' }}
                  >
                    <h2 style={{ marginBottom: '30px', fontSize: '28px' }}>
                      {questions[currentStep].question}
                    </h2>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
                      {questions[currentStep].options.map((option) => (
                        <button
                          key={option.value}
                          onClick={() => handleAnswer(option.value)}
                          className="btn btn-secondary"
                          style={{
                            textAlign: 'left',
                            justifyContent: 'flex-start',
                            padding: '15px 20px',
                            fontSize: '17px',
                          }}
                        >
                          {option.text}
                        </button>
                      ))}
                    </div>

                    {currentStep > 0 && (
                      <button
                        onClick={() => setCurrentStep(currentStep - 1)}
                        className="btn btn-secondary"
                        style={{ marginTop: '20px', width: '100%' }}
                      >
                        Zurück
                      </button>
                    )}
                  </motion.div>
                </>
              ) : (
                <motion.div
                  initial={{ opacity: 0, y: 30 }}
                  animate={{ opacity: 1, y: 0 }}
                  className="feature-card-large"
                  style={{ textAlign: 'left' }}
                >
                  <h2 style={{ marginBottom: '30px' }}>Ihre Empfehlung</h2>
                  
                  <div style={{ marginBottom: '30px' }}>
                    <h3 style={{ fontSize: '24px', marginBottom: '15px', color: 'var(--color-accent)' }}>
                      {recommendation}
                    </h3>
                    <p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
                      Basierend auf Ihren Antworten empfehlen wir Ihnen diesen Kurs als Einstieg. 
                      Dieser Kurs ist speziell für Quereinsteiger konzipiert und führt Sie Schritt 
                      für Schritt in die IT-Welt ein.
                    </p>
                  </div>

                  <div style={{ marginTop: '40px', paddingTop: '30px', borderTop: '1px solid rgba(255, 255, 255, 0.1)' }}>
                    {!showContactForm ? (
                      <>
                        <p style={{ marginBottom: '20px', fontSize: '17px' }}>
                          Möchten Sie diesen Lernpfad per E-Mail erhalten? Füllen Sie das Kontaktformular aus und wir senden Ihnen die Empfehlung zu.
                        </p>
                        <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
                          <button
                            onClick={() => setShowContactForm(true)}
                            className="btn btn-primary btn-large"
                          >
                            Lernpfad per E-Mail senden
                          </button>
                          <Link href="/quereinsteiger/kurse" className="btn btn-secondary btn-large">
                            Zum Kurskatalog
                          </Link>
                          <button
                            onClick={resetQuiz}
                            className="btn btn-secondary btn-large"
                          >
                            Quiz erneut starten
                          </button>
                        </div>
                      </>
                    ) : (
                      <div>
                        <h3 style={{ marginBottom: '20px', fontSize: '20px' }}>Kontaktformular</h3>
                        <form
                          onSubmit={(e) => {
                            e.preventDefault()
                            const subject = `Lernpfad-Empfehlung: ${recommendation}`
                            const body = `Hallo,\n\nich habe den Lernpfad-Finder ausgefüllt und folgende Empfehlung erhalten:\n\n${recommendation}\n\nMeine Antworten:\n${Object.entries(answers).map(([key, value]) => {
                              const question = questions[parseInt(key)]
                              const option = question?.options.find(opt => opt.value === value)
                              return `Frage ${parseInt(key) + 1}: ${option?.text || value}`
                            }).join('\n')}\n\n${contactData.message ? `Nachricht:\n${contactData.message}` : ''}`
                            window.location.href = `mailto:info@doing-it.de?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
                          }}
                        >
                          <div className="form-group">
                            <label htmlFor="name">Name *</label>
                            <input
                              type="text"
                              id="name"
                              required
                              value={contactData.name}
                              onChange={(e) => setContactData({ ...contactData, name: e.target.value })}
                              placeholder="Ihr Name"
                            />
                          </div>
                          <div className="form-group">
                            <label htmlFor="email">E-Mail *</label>
                            <input
                              type="email"
                              id="email"
                              required
                              value={contactData.email}
                              onChange={(e) => setContactData({ ...contactData, email: e.target.value })}
                              placeholder="ihre.email@beispiel.de"
                            />
                          </div>
                          <div className="form-group">
                            <label htmlFor="message">Nachricht (optional)</label>
                            <textarea
                              id="message"
                              value={contactData.message}
                              onChange={(e) => setContactData({ ...contactData, message: e.target.value })}
                              placeholder="Ihre Nachricht an uns..."
                              rows={4}
                            />
                          </div>
                          <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap', marginTop: '20px' }}>
                            <button type="submit" className="btn btn-primary btn-large">
                              E-Mail senden
                            </button>
                            <button
                              type="button"
                              onClick={() => setShowContactForm(false)}
                              className="btn btn-secondary btn-large"
                            >
                              Abbrechen
                            </button>
                          </div>
                        </form>
                      </div>
                    )}
                  </div>
                </motion.div>
              )}
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}