'use client'

import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { MapPin, X, Calendar, User } from 'lucide-react'
import { formatDate } from '@/lib/utils'

type TimelineEntry = {
  id: number
  year: string
  month: string | null
  day: string | null
  title: string
  description: string | null
  location: string | null
  media_filenames: string | null
  source: 'official' | 'community'
  contributorName?: string
}

interface TimelineSectionProps {
  entries: TimelineEntry[]
}

export default function TimelineSection({ entries }: TimelineSectionProps) {
  const [selectedEntry, setSelectedEntry] = useState<TimelineEntry | null>(null)

  // Find birth and death indices
  const birthIndex = entries.findIndex(e => e.title.toLowerCase().includes('geburt'))
  const deathIndex = entries.findIndex(e => e.title.toLowerCase().includes('tod') || e.title.toLowerCase().includes('verstorben'))

  return (
    <section id="zeitstrahl" className="py-16 sm:py-24 px-4 bg-gradient-to-b from-amber-50/30 to-cream">
      <div className="max-w-5xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h2 className="font-cormorant italic text-4xl sm:text-5xl text-warm-brown mb-4">
            Lebensreise
          </h2>
          <div className="flex items-center justify-center gap-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>
        </motion.div>

        {/* Timeline Path */}
        <div className="relative">
          {/* Desktop: centered vertical line — w-0.5 (2 px) for better visibility */}
          <div className="absolute left-1/2 top-0 bottom-0 w-0.5 -translate-x-1/2 bg-gradient-to-b from-warm-gold/20 via-warm-gold/50 to-warm-gold/20 hidden sm:block" />

          {/* Mobile: left-side vertical line */}
          <div className="absolute left-5 top-0 bottom-0 w-0.5 bg-gradient-to-b from-warm-gold/40 via-warm-gold/25 to-warm-gold/40 sm:hidden" />

          {/* Entries */}
          <div className="space-y-12 sm:space-y-16 py-4 relative" style={{ zIndex: 10 }}>
            {entries.map((entry, index) => {
              const isLeft = index % 2 === 0
              const isBirth = index === birthIndex
              const isDeath = index === deathIndex
              const isSpecial = isBirth || isDeath
              const photos = entry.media_filenames ? entry.media_filenames.split(',') : []

              return (
                <motion.div
                  key={`${entry.source}-${entry.id}`}
                  initial={{ opacity: 0, x: isLeft ? -30 : 30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true, margin: '-50px' }}
                  transition={{ duration: 0.6, delay: 0.1 }}
                  className={`relative flex items-start ${
                    isLeft
                      ? 'pl-10 sm:pl-0 sm:pr-[52%]'
                      : 'pl-10 sm:pl-[52%]'
                  }`}
                >
                  {/* Content Card */}
                  <motion.button
                    onClick={() => setSelectedEntry(entry)}
                    whileHover={{ scale: 1.02, y: -2 }}
                    whileTap={{ scale: 0.98 }}
                    className={`group cursor-pointer text-left w-full bg-white/80 backdrop-blur-sm rounded-xl shadow-md border border-warm-border p-4 sm:p-5 hover:shadow-lg transition-all ${
                      isLeft ? 'sm:mr-auto' : 'sm:ml-auto'
                    } ${isSpecial ? 'ring-2 ring-warm-gold/30' : ''}`}
                    style={{ minWidth: 0 }}
                  >
                    {/* Photos */}
                    {photos.length > 0 && (
                      <div className={`grid gap-2 mb-3 ${photos.length === 1 ? 'grid-cols-1' : 'grid-cols-2'}`}>
                        {photos.slice(0, 2).map((filename, i) => (
                          <img
                            key={i}
                            src={`/api/files/${filename.trim()}`}
                            alt=""
                            className="w-full max-h-40 object-contain rounded-lg bg-warm-brown/5"
                          />
                        ))}
                      </div>
                    )}

                    {/* Date */}
                    <div className={`font-cormorant mb-1 ${isSpecial ? 'text-3xl text-warm-gold' : 'text-2xl text-warm-gold'}`}>
                      {formatDate(entry.year, entry.month, entry.day)}
                    </div>

                    {/* Title */}
                    <h3 className={`font-cormorant italic mb-1 group-hover:text-warm-gold transition-colors ${isSpecial ? 'text-xl text-warm-brown font-medium' : 'text-lg text-warm-brown'}`}>
                      {entry.title}
                    </h3>

                    {/* Location */}
                    {entry.location && (
                      <div className="flex items-center gap-1 text-warm-brown-light/50 mb-2 text-xs">
                        <MapPin size={11} />
                        <span className="font-lora">{entry.location}</span>
                      </div>
                    )}

                    {/* Description — no clamp, card grows with content */}
                    {entry.description && (
                      <p className="font-lora text-warm-brown-light/60 text-xs leading-relaxed">
                        {entry.description}
                      </p>
                    )}

                    {/* Contributor */}
                    {entry.source === 'community' && entry.contributorName && (
                      <div className="flex items-center gap-1 text-amber-600/60 text-[10px] mt-2 italic font-lora">
                        <User size={10} />
                        <span>{entry.contributorName}</span>
                      </div>
                    )}

                    <p className="text-warm-gold/40 group-hover:text-warm-gold/70 text-[10px] font-lora mt-2 transition-colors">
                      {photos.length > 2 && `+${photos.length - 2} weitere · `}Details →
                    </p>
                  </motion.button>

                  {/* Dot - Mobile (left-side line) */}
                  <div className="sm:hidden absolute left-5 top-5 -translate-x-1/2 z-20">
                    <div className={`rounded-full border-2 border-white shadow-sm ${
                      isSpecial
                        ? 'w-5 h-5 bg-warm-gold ring-2 ring-warm-gold/30'
                        : entry.source === 'community'
                          ? 'w-3.5 h-3.5 bg-amber-400'
                          : 'w-3.5 h-3.5 bg-warm-gold'
                    }`} />
                  </div>

                  {/* Dot - Desktop (centred line) */}
                  <div className="hidden sm:block absolute left-1/2 top-5 -translate-x-1/2 z-20">
                    <div className={`rounded-full border-2 border-white shadow-sm ${
                      isSpecial
                        ? 'w-5 h-5 bg-warm-gold ring-2 ring-warm-gold/30'
                        : entry.source === 'community'
                          ? 'w-4 h-4 bg-amber-400'
                          : 'w-4 h-4 bg-warm-gold'
                    }`} />
                  </div>
                </motion.div>
              )
            })}
          </div>
        </div>
      </div>

      {/* Detail Modal */}
      <AnimatePresence>
        {selectedEntry && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={() => setSelectedEntry(null)}
            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
          >
            <motion.div
              initial={{ scale: 0.9, y: 20 }}
              animate={{ scale: 1, y: 0 }}
              exit={{ scale: 0.9, y: 20 }}
              onClick={(e) => e.stopPropagation()}
              className="bg-cream rounded-2xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-y-auto"
            >
              {/* Header */}
              <div className="sticky top-0 bg-cream/95 backdrop-blur-sm border-b border-warm-border p-6 flex items-start justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-2 text-warm-gold text-sm font-lora mb-2">
                    <Calendar size={14} />
                    {formatDate(selectedEntry.year, selectedEntry.month, selectedEntry.day)}
                  </div>
                  <h3 className="font-cormorant italic text-3xl text-warm-brown">
                    {selectedEntry.title}
                  </h3>
                  {selectedEntry.location && (
                    <div className="flex items-center gap-1 text-warm-brown-light/60 text-sm mt-1">
                      <MapPin size={13} />
                      <span className="font-lora">{selectedEntry.location}</span>
                    </div>
                  )}
                </div>
                <button
                  onClick={() => setSelectedEntry(null)}
                  className="text-warm-brown-light/40 hover:text-warm-brown transition-colors p-1"
                >
                  <X size={24} />
                </button>
              </div>

              {/* Content */}
              <div className="p-6 space-y-6">
                {/* Photos */}
                {selectedEntry.media_filenames && (
                  <div className="grid grid-cols-2 gap-3">
                    {selectedEntry.media_filenames.split(',').map((filename, i) => (
                      <img
                        key={i}
                        src={`/api/files/${filename.trim()}`}
                        alt=""
                        className="w-full object-contain rounded-lg bg-warm-brown/5"
                      />
                    ))}
                  </div>
                )}

                {/* Description */}
                {selectedEntry.description && (
                  <p className="font-lora text-warm-brown-light/80 text-sm leading-relaxed whitespace-pre-wrap">
                    {selectedEntry.description}
                  </p>
                )}

                {/* Contributor info */}
                {selectedEntry.source === 'community' && selectedEntry.contributorName && (
                  <div className="pt-4 border-t border-warm-border">
                    <p className="font-lora text-xs text-amber-600/60 italic flex items-center gap-1.5">
                      <User size={12} />
                      Beitrag von {selectedEntry.contributorName}
                    </p>
                  </div>
                )}
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  )
}