'use client'

import { useState } from 'react'
import { motion } from 'framer-motion'
import { Calendar, CheckCircle } from 'lucide-react'

export default function TimelineContributionSection() {
  const [name, setName] = useState('')
  const [story, setStory] = useState('')
  const [addToTimeline, setAddToTimeline] = useState(false)
  const [year, setYear] = useState('')
  const [month, setMonth] = useState('')
  const [day, setDay] = useState('')
  const [title, setTitle] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState('')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    // No required fields - allow empty submissions
    setSubmitting(true)
    setError('')

    try {
      const res = await fetch('/api/timeline-contributions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: name.trim() || 'Anonym',
          year: addToTimeline ? (year.trim() || null) : null,
          month: addToTimeline ? (month.trim() || null) : null,
          day: addToTimeline ? (day.trim() || null) : null,
          title: addToTimeline ? (title.trim() || 'Erinnerung') : 'Erinnerung',
          story: story.trim() || '',
        }),
      })

      if (res.ok) {
        setSuccess(true)
        setName('')
        setYear('')
        setMonth('')
        setDay('')
        setTitle('')
        setStory('')
        setAddToTimeline(false)
        setTimeout(() => setSuccess(false), 5000)
      } else {
        const data = await res.json()
        setError(data.error || 'Fehler beim Senden')
      }
    } catch (err) {
      setError('Netzwerkfehler. Bitte versuche es erneut.')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <section id="zeitstrahl-beitragen" className="py-16 sm:py-20 bg-cream">
      <div className="max-w-2xl mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-10"
        >
          <h2 className="font-cormorant italic text-4xl sm:text-5xl text-warm-brown mb-3">
            Teile deine Erinnerung
          </h2>
          <div className="flex items-center justify-center gap-4 mb-4">
            <div className="h-px w-16 bg-warm-gold/40" />
            <span className="text-warm-gold text-xl">✦</span>
            <div className="h-px w-16 bg-warm-gold/40" />
          </div>
          <p className="font-lora text-warm-brown-light/60 text-sm leading-relaxed max-w-lg mx-auto">
            Hast du eine besondere Erinnerung an Oma? Teile deine Geschichte mit uns.
            Alle Beiträge werden von Dennis geprüft.
          </p>
        </motion.div>

        {success && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            className="mb-6 bg-green-50 border border-green-200 rounded-xl p-4 flex items-start gap-3"
          >
            <CheckCircle className="text-green-600 flex-shrink-0 mt-0.5" size={20} />
            <div>
              <p className="font-lora text-green-800 font-semibold text-sm">
                Vielen Dank für deine Erinnerung!
              </p>
              <p className="font-lora text-green-700 text-xs mt-0.5">
                Dein Beitrag wird geprüft und erscheint bald auf der Seite.
              </p>
            </div>
          </motion.div>
        )}

        {error && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            className="mb-6 bg-red-50 border border-red-200 rounded-xl p-4"
          >
            <p className="font-lora text-red-800 text-sm">{error}</p>
          </motion.div>
        )}

        <motion.form
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.2 }}
          onSubmit={handleSubmit}
          className="bg-amber-50/50 border border-warm-border rounded-2xl p-6 sm:p-8 shadow-sm"
        >
          <div className="space-y-5">
            {/* Name */}
            <div>
              <label className="block font-lora text-warm-brown text-sm mb-2">
                Dein Name <span className="text-warm-brown-light/40 text-xs">(optional)</span>
              </label>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="z.B. Maria Schmidt"
                className="w-full px-4 py-3 rounded-xl border border-warm-border bg-white text-warm-brown placeholder-warm-brown-light/30 focus:outline-none focus:ring-2 focus:ring-warm-gold/30 font-lora text-sm"
              />
            </div>

            {/* Story */}
            <div>
              <label className="block font-lora text-warm-brown text-sm mb-2">
                Deine Erinnerung <span className="text-warm-brown-light/40 text-xs">(optional)</span>
              </label>
              <textarea
                value={story}
                onChange={(e) => setStory(e.target.value)}
                placeholder="Erzähle uns deine Erinnerung an Oma..."
                rows={6}
                className="w-full px-4 py-3 rounded-xl border border-warm-border bg-white text-warm-brown placeholder-warm-brown-light/30 focus:outline-none focus:ring-2 focus:ring-warm-gold/30 font-lora text-sm resize-none leading-relaxed"
              />
            </div>

            {/* Add to timeline checkbox */}
            <div className="bg-white/60 rounded-xl p-4 border border-warm-border/50">
              <label className="flex items-start gap-3 cursor-pointer group">
                <input
                  type="checkbox"
                  checked={addToTimeline}
                  onChange={(e) => setAddToTimeline(e.target.checked)}
                  className="mt-1 w-4 h-4 rounded border-warm-border text-warm-gold focus:ring-warm-gold/30"
                />
                <div className="flex-1">
                  <span className="font-lora text-warm-brown text-sm font-medium group-hover:text-warm-gold transition-colors">
                    Als Ereignis im Zeitstrahl anzeigen
                  </span>
                  <p className="font-lora text-warm-brown-light/50 text-xs mt-0.5">
                    Nur ankreuzen, wenn es ein bestimmtes Ereignis war (z.B. "Omas 60. Geburtstag")
                  </p>
                </div>
              </label>
            </div>

            {/* Timeline fields - only shown if checkbox is checked */}
            {addToTimeline && (
              <motion.div
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: 'auto' }}
                exit={{ opacity: 0, height: 0 }}
                className="space-y-4 bg-amber-50 rounded-xl p-4 border border-warm-gold/20"
              >
                <p className="font-lora text-warm-brown text-xs font-medium">
                  Ergänze die Details für den Zeitstrahl:
                </p>

                {/* Date */}
                <div>
                  <label className="block font-lora text-warm-brown text-sm mb-2">
                    Wann war das? <span className="text-warm-brown-light/40 text-xs">(optional)</span>
                  </label>
                  <div className="grid grid-cols-3 gap-3">
                    <input
                      type="text"
                      value={year}
                      onChange={(e) => setYear(e.target.value)}
                      placeholder="Jahr"
                      className="px-4 py-3 rounded-xl border border-warm-border bg-white text-warm-brown placeholder-warm-brown-light/30 focus:outline-none focus:ring-2 focus:ring-warm-gold/30 font-lora text-sm"
                    />
                    <input
                      type="text"
                      value={month}
                      onChange={(e) => setMonth(e.target.value)}
                      placeholder="Monat"
                      className="px-4 py-3 rounded-xl border border-warm-border bg-white text-warm-brown placeholder-warm-brown-light/30 focus:outline-none focus:ring-2 focus:ring-warm-gold/30 font-lora text-sm"
                    />
                    <input
                      type="text"
                      value={day}
                      onChange={(e) => setDay(e.target.value)}
                      placeholder="Tag"
                      className="px-4 py-3 rounded-xl border border-warm-border bg-white text-warm-brown placeholder-warm-brown-light/30 focus:outline-none focus:ring-2 focus:ring-warm-gold/30 font-lora text-sm"
                    />
                  </div>
                  <p className="text-warm-brown-light/40 text-xs mt-1.5 font-lora">
                    Alle Felder optional
                  </p>
                </div>

                {/* Title */}
                <div>
                  <label className="block font-lora text-warm-brown text-sm mb-2">
                    Ereignis-Titel <span className="text-warm-brown-light/40 text-xs">(optional)</span>
                  </label>
                  <input
                    type="text"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    placeholder="z.B. Omas 60. Geburtstag"
                    className="w-full px-4 py-3 rounded-xl border border-warm-border bg-white text-warm-brown placeholder-warm-brown-light/30 focus:outline-none focus:ring-2 focus:ring-warm-gold/30 font-lora text-sm"
                  />
                </div>
              </motion.div>
            )}

            {/* Submit */}
            <motion.button
              type="submit"
              disabled={submitting}
              whileHover={{ scale: submitting ? 1 : 1.02 }}
              whileTap={{ scale: submitting ? 1 : 0.98 }}
              className="w-full py-4 rounded-xl bg-warm-gold hover:bg-warm-gold/90 disabled:bg-warm-brown-light/20 disabled:cursor-not-allowed text-white font-cormorant italic text-lg transition-colors shadow-sm disabled:shadow-none flex items-center justify-center gap-2"
            >
              <Calendar size={20} />
              {submitting ? 'Wird gesendet...' : 'Erinnerung teilen'}
            </motion.button>

            <p className="text-center font-lora text-warm-brown-light/40 text-xs leading-relaxed">
              Dein Beitrag wird von Dennis geprüft.
            </p>
          </div>
        </motion.form>
      </div>
    </section>
  )
}