'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 Schulungsbedarf() {
  const [employees, setEmployees] = useState('')
  const [departments, setDepartments] = useState('')
  const [selectedTopics, setSelectedTopics] = useState<string[]>([])

  const topics = [
    'IT-Security für Mitarbeiter',
    'Office-Software Optimierung',
    'Datenschutz DSGVO',
    'Cloud-Computing Grundlagen',
    'Systemadministration',
    'Netzwerktechnik',
  ]

  const toggleTopic = (topic: string) => {
    if (selectedTopics.includes(topic)) {
      setSelectedTopics(selectedTopics.filter(t => t !== topic))
    } else {
      setSelectedTopics([...selectedTopics, topic])
    }
  }

  const calculateEstimate = () => {
    const empCount = parseInt(employees) || 0
    const deptCount = parseInt(departments) || 1
    const topicCount = selectedTopics.length || 1

    // Basis-Schätzung: 1 Tag pro Thema, 0.5 Tage pro 10 Mitarbeiter
    const baseDays = topicCount * 1
    const employeeDays = Math.ceil(empCount / 10) * 0.5
    const departmentFactor = Math.max(1, deptCount * 0.2)

    const totalDays = Math.ceil((baseDays + employeeDays) * departmentFactor)
    const estimatedWeeks = Math.ceil(totalDays / 5)
    const estimatedMonths = Math.ceil(totalDays / 20)

    return {
      totalDays,
      estimatedWeeks,
      estimatedMonths,
      empCount,
      topicCount,
    }
  }

  const [showResults, setShowResults] = useState(false)
  const estimate = calculateEstimate()

  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>Schulungsbedarfs-Rechner</h1>
            <p className="page-hero-subtitle">
              Schätzen Sie den Umfang Ihrer IT-Schulung
            </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>Ermitteln Sie Ihren Schulungsbedarf</h2>
              <p>
                Geben Sie einige Informationen zu Ihrem Unternehmen ein und erhalten Sie eine 
                erste Schätzung des potenziellen Schulungsumfangs.
              </p>
            </motion.div>

            <div style={{ maxWidth: '800px', margin: '0 auto', marginTop: '60px' }}>
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
                className="feature-card"
                style={{ marginBottom: '30px', textAlign: 'left' }}
              >
                <h3 style={{ marginBottom: '20px' }}>Anzahl der Mitarbeiter</h3>
                <input
                  type="number"
                  value={employees}
                  onChange={(e) => setEmployees(e.target.value)}
                  placeholder="z.B. 50"
                  style={{
                    width: '100%',
                    padding: '12px 16px',
                    fontSize: '17px',
                    background: 'rgba(255, 255, 255, 0.05)',
                    border: '1px solid rgba(255, 255, 255, 0.1)',
                    borderRadius: '10px',
                    color: 'var(--color-text)',
                    fontFamily: 'var(--font-primary)',
                  }}
                />
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.1 }}
                className="feature-card"
                style={{ marginBottom: '30px', textAlign: 'left' }}
              >
                <h3 style={{ marginBottom: '20px' }}>Anzahl der Abteilungen</h3>
                <input
                  type="number"
                  value={departments}
                  onChange={(e) => setDepartments(e.target.value)}
                  placeholder="z.B. 5"
                  style={{
                    width: '100%',
                    padding: '12px 16px',
                    fontSize: '17px',
                    background: 'rgba(255, 255, 255, 0.05)',
                    border: '1px solid rgba(255, 255, 255, 0.1)',
                    borderRadius: '10px',
                    color: 'var(--color-text)',
                    fontFamily: 'var(--font-primary)',
                  }}
                />
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.2 }}
                className="feature-card"
                style={{ marginBottom: '30px', textAlign: 'left' }}
              >
                <h3 style={{ marginBottom: '20px' }}>Gewünschte Schulungsthemen</h3>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                  {topics.map((topic) => (
                    <label
                      key={topic}
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        padding: '12px',
                        background: selectedTopics.includes(topic) ? 'rgba(0, 113, 227, 0.1)' : 'rgba(255, 255, 255, 0.05)',
                        border: `1px solid ${selectedTopics.includes(topic) ? 'var(--color-accent)' : 'rgba(255, 255, 255, 0.1)'}`,
                        borderRadius: '8px',
                        cursor: 'pointer',
                        transition: 'all 0.3s ease',
                      }}
                    >
                      <input
                        type="checkbox"
                        checked={selectedTopics.includes(topic)}
                        onChange={() => toggleTopic(topic)}
                        style={{ marginRight: '10px' }}
                      />
                      {topic}
                    </label>
                  ))}
                </div>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.3 }}
              >
                <button
                  onClick={() => setShowResults(true)}
                  className="btn btn-primary"
                  style={{ width: '100%' }}
                  disabled={!employees || selectedTopics.length === 0}
                >
                  Schulungsbedarf berechnen
                </button>
              </motion.div>

              {showResults && (
                <motion.div
                  initial={{ opacity: 0, y: 30 }}
                  animate={{ opacity: 1, y: 0 }}
                  className="feature-card-large"
                  style={{ marginTop: '40px', textAlign: 'left' }}
                >
                  <h2 style={{ marginBottom: '30px' }}>Geschätzter Schulungsbedarf</h2>

                  <div style={{ marginBottom: '30px' }}>
                    <h3 style={{ marginBottom: '15px' }}>Ihre Angaben</h3>
                    <p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
                      <strong>Mitarbeiter:</strong> {estimate.empCount}<br />
                      <strong>Abteilungen:</strong> {departments || 'Nicht angegeben'}<br />
                      <strong>Gewählte Themen:</strong> {estimate.topicCount}
                    </p>
                  </div>

                  <div style={{ marginBottom: '30px' }}>
                    <h3 style={{ marginBottom: '15px' }}>Geschätzter Umfang</h3>
                    <p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
                      Basierend auf Ihren Angaben schätzen wir einen Schulungsbedarf von ca. <strong>{estimate.totalDays} Tagen</strong> 
                      ({estimate.estimatedWeeks} Wochen / {estimate.estimatedMonths} Monate).
                    </p>
                    <p style={{ fontSize: '15px', lineHeight: '1.7', color: 'var(--color-text-secondary)', marginTop: '15px', fontStyle: 'italic' }}>
                      * Dies ist eine erste Schätzung. Der tatsächliche Umfang kann je nach spezifischen Anforderungen variieren.
                    </p>
                  </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 ein individuelles Schulungskonzept entwickeln? Kontaktieren Sie uns für eine detaillierte Beratung.
                    </p>
                    <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
                      <Link href="/kontakt" className="btn btn-primary">
                        Jetzt Beratung anfragen
                      </Link>
                      <button
                        onClick={() => {
                          setShowResults(false)
                          setEmployees('')
                          setDepartments('')
                          setSelectedTopics([])
                        }}
                        className="btn btn-secondary"
                      >
                        Erneut berechnen
                      </button>
                    </div>
                  </div>
                </motion.div>
              )}
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}