import React, { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import {
  HiHeart,
  HiChatBubbleLeft,
  HiMapPin,
  HiUsers,
  HiCalendar,
  HiXMark,
  HiChevronLeft,
  HiChevronRight,
} from 'react-icons/hi2'
import dayjs from 'dayjs'
import 'dayjs/locale/tr'
import relativeTime from 'dayjs/plugin/relativeTime'
import { mockEvents, CalendarEvent, EventComment } from '../../mocks/mockIntranetData'
import { mockEmployees } from '@/mocks/mockEmployees'

dayjs.locale('tr')
dayjs.extend(relativeTime)

const EventsModule: React.FC = () => {
  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null)
  const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(0)
  const [showPhotoModal, setShowPhotoModal] = useState(false)
  const [selectedFilter, setSelectedFilter] = useState<
    'all' | 'social' | 'training' | 'company' | 'sport' | 'culture'
  >('all')
  const [newComment, setNewComment] = useState('')
  const [events, setEvents] = useState<CalendarEvent[]>(mockEvents)

  const filteredEvents =
    selectedFilter === 'all'
      ? events.filter((e) => e.isPublished)
      : events.filter((e) => e.isPublished && e.type === selectedFilter)

  const handleLikeEvent = (eventId: string) => {
    setEvents((prev) => prev.map((e) => (e.id === eventId ? { ...e, likes: e.likes + 1 } : e)))
    if (selectedEvent?.id === eventId) {
      setSelectedEvent((prev) => (prev ? { ...prev, likes: prev.likes + 1 } : null))
    }
  }

  const handleAddComment = (eventId: string) => {
    if (!newComment.trim()) return

    const comment: EventComment = {
      id: `c${Date.now()}`,
      author: mockEmployees[0],
      content: newComment,
      createdAt: new Date(),
      likes: 0,
    }

    setEvents((prev) =>
      prev.map((e) => (e.id === eventId ? { ...e, comments: [...e.comments, comment] } : e)),
    )

    if (selectedEvent?.id === eventId) {
      setSelectedEvent((prev) => (prev ? { ...prev, comments: [...prev.comments, comment] } : null))
    }

    setNewComment('')
  }

  const getTypeColor = (type: string) => {
    const colors: Record<string, string> = {
      social: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
      training: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
      company: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
      sport: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
      culture: 'bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-300',
    }
    return colors[type] || colors.social
  }

  const getTypeLabel = (type: string) => {
    const labels: Record<string, string> = {
      social: '🎉 Sosyal',
      training: '📚 Eğitim',
      company: '🏢 Kurumsal',
      sport: '⚽ Spor',
      culture: '🎨 Kültür',
    }
    return labels[type] || type
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* Header */}
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">🎊 Etkinlikler</h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">
            Şirket etkinlikleri, fotoğraflar ve anılar
          </p>
        </div>

        {/* Filter Tabs */}
        <div className="flex gap-3 overflow-x-auto pb-2">
          {[
            { value: 'all' as const, label: '🌟 Tümü' },
            { value: 'social' as const, label: '🎉 Sosyal' },
            { value: 'training' as const, label: '📚 Eğitim' },
            { value: 'company' as const, label: '🏢 Kurumsal' },
            { value: 'sport' as const, label: '⚽ Spor' },
            { value: 'culture' as const, label: '🎨 Kültür' },
          ].map((tab) => (
            <button
              key={tab.value}
              onClick={() => setSelectedFilter(tab.value)}
              className={`px-4 py-2 rounded-lg border-2 transition-all whitespace-nowrap ${
                selectedFilter === tab.value
                  ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
                  : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* Events Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredEvents.map((event, idx) => (
            <motion.div
              key={event.id}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: idx * 0.1 }}
              className="bg-white dark:bg-gray-800 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-all cursor-pointer"
              onClick={() => setSelectedEvent(event)}
            >
              {/* Cover Photo */}
              <div className="relative h-48 overflow-hidden">
                <img
                  src={event.photos[0]}
                  alt={event.title}
                  className="w-full h-full object-cover hover:scale-110 transition-transform duration-300"
                />
                <div className="absolute top-3 right-3">
                  <span
                    className={`px-3 py-1 rounded-full text-xs font-medium ${getTypeColor(event.type)}`}
                  >
                    {getTypeLabel(event.type)}
                  </span>
                </div>
                {event.photos.length > 1 && (
                  <div className="absolute bottom-3 right-3 bg-black/70 text-white px-2 py-1 rounded text-xs">
                    +{event.photos.length - 1} fotoğraf
                  </div>
                )}
              </div>

              {/* Content */}
              <div className="p-4 space-y-3">
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white line-clamp-2">
                  {event.title}
                </h3>

                <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                  {event.description}
                </p>

                <div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
                  <div className="flex items-center gap-1">
                    <HiCalendar className="w-4 h-4" />
                    {dayjs(event.date).format('DD MMMM YYYY')}
                  </div>
                  <div className="flex items-center gap-1">
                    <HiMapPin className="w-4 h-4" />
                    {event.location}
                  </div>
                </div>

                <div className="flex items-center justify-between pt-3 border-t border-gray-200 dark:border-gray-700">
                  <div className="flex items-center gap-4 text-sm">
                    <button
                      onClick={(e) => {
                        e.stopPropagation()
                        handleLikeEvent(event.id)
                      }}
                      className="flex items-center gap-1 text-gray-600 dark:text-gray-400 hover:text-red-500 transition-colors"
                    >
                      <HiHeart className="w-5 h-5" />
                      {event.likes}
                    </button>
                    <div className="flex items-center gap-1 text-gray-600 dark:text-gray-400">
                      <HiChatBubbleLeft className="w-5 h-5" />
                      {event.comments.length}
                    </div>
                  </div>
                  <div className="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400">
                    <HiUsers className="w-4 h-4" />
                    {event.participants} kişi
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        {filteredEvents.length === 0 && (
          <div className="text-center py-12 text-gray-500 dark:text-gray-400">
            <p className="text-lg">Bu kategoride henüz etkinlik yok</p>
          </div>
        )}
      </div>

      {/* Event Detail Modal */}
      <AnimatePresence>
        {selectedEvent && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="fixed inset-0 bg-black/50 z-40"
              onClick={() => setSelectedEvent(null)}
            />
            <div className="fixed inset-0 z-50 flex items-center justify-center p-4 overflow-y-auto">
              <motion.div
                initial={{ opacity: 0, scale: 0.95, y: 20 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.95, y: 20 }}
                className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto my-8"
                onClick={(e) => e.stopPropagation()}
              >
                {/* Header */}
                <div className="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-6 z-10">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <span
                          className={`px-3 py-1 rounded-full text-xs font-medium ${getTypeColor(selectedEvent.type)}`}
                        >
                          {getTypeLabel(selectedEvent.type)}
                        </span>
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {dayjs(selectedEvent.date).format('DD MMMM YYYY')}
                        </span>
                      </div>
                      <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                        {selectedEvent.title}
                      </h2>
                      <p className="text-gray-600 dark:text-gray-400 mt-2">
                        {selectedEvent.description}
                      </p>
                    </div>
                    <button
                      onClick={() => setSelectedEvent(null)}
                      className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                    >
                      <HiXMark className="w-6 h-6 text-gray-500" />
                    </button>
                  </div>

                  <div className="flex items-center gap-6 mt-4 text-sm text-gray-600 dark:text-gray-400">
                    <div className="flex items-center gap-2">
                      <HiMapPin className="w-5 h-5" />
                      {selectedEvent.location}
                    </div>
                    <div className="flex items-center gap-2">
                      <HiUsers className="w-5 h-5" />
                      {selectedEvent.participants} katılımcı
                    </div>
                    <div className="flex items-center gap-2">
                      <img
                        src={selectedEvent.organizer.avatar}
                        alt={selectedEvent.organizer.fullName}
                        className="w-6 h-6 rounded-full"
                      />
                      <span>Düzenleyen: {selectedEvent.organizer.fullName}</span>
                    </div>
                  </div>
                </div>

                {/* Photo Gallery */}
                <div className="p-6">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    📸 Fotoğraflar ({selectedEvent.photos.length})
                  </h3>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                    {selectedEvent.photos.map((photo, idx) => (
                      <motion.div
                        key={idx}
                        whileHover={{ scale: 1.05 }}
                        className="relative aspect-square rounded-lg overflow-hidden cursor-pointer"
                        onClick={() => {
                          setSelectedPhotoIndex(idx)
                          setShowPhotoModal(true)
                        }}
                      >
                        <img
                          src={photo}
                          alt={`${selectedEvent.title} - ${idx + 1}`}
                          className="w-full h-full object-cover"
                        />
                      </motion.div>
                    ))}
                  </div>
                </div>

                {/* Comments Section */}
                <div className="p-6 border-t border-gray-200 dark:border-gray-700">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                      💬 Yorumlar ({selectedEvent.comments.length})
                    </h3>
                    <div className="flex items-center gap-4 text-sm">
                      <button
                        onClick={() => handleLikeEvent(selectedEvent.id)}
                        className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors"
                      >
                        <HiHeart className="w-5 h-5 text-red-500" />
                        {selectedEvent.likes} beğeni
                      </button>
                    </div>
                  </div>

                  {/* Comments List */}
                  <div className="space-y-4 mb-4">
                    {selectedEvent.comments.map((comment) => (
                      <div
                        key={comment.id}
                        className="flex gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg"
                      >
                        <img
                          src={comment.author.avatar}
                          alt={comment.author.fullName}
                          className="w-10 h-10 rounded-full"
                        />
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-1">
                            <span className="font-semibold text-gray-900 dark:text-white">
                              {comment.author.fullName}
                            </span>
                            <span className="text-xs text-gray-500 dark:text-gray-400">
                              {dayjs(comment.createdAt).fromNow()}
                            </span>
                          </div>
                          <p className="text-gray-700 dark:text-gray-300 text-sm">
                            {comment.content}
                          </p>
                          <div className="flex items-center gap-2 mt-2">
                            <button className="text-xs text-gray-500 hover:text-red-500 transition-colors">
                              ❤️ {comment.likes} beğeni
                            </button>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Add Comment */}
                  <div className="flex gap-3">
                    <img
                      src="https://ui-avatars.com/api/?name=Sedat+Ozturk&background=3b82f6&color=fff"
                      alt="You"
                      className="w-10 h-10 rounded-full"
                    />
                    <div className="flex-1 flex gap-2">
                      <input
                        type="text"
                        value={newComment}
                        onChange={(e) => setNewComment(e.target.value)}
                        onKeyPress={(e) => {
                          if (e.key === 'Enter') {
                            handleAddComment(selectedEvent.id)
                          }
                        }}
                        placeholder="Yorumunuzu yazın..."
                        className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
                      />
                      <button
                        onClick={() => handleAddComment(selectedEvent.id)}
                        disabled={!newComment.trim()}
                        className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white rounded-lg transition-colors"
                      >
                        Gönder
                      </button>
                    </div>
                  </div>
                </div>
              </motion.div>
            </div>
          </>
        )}
      </AnimatePresence>

      {/* Photo Viewer Modal */}
      <AnimatePresence>
        {showPhotoModal && selectedEvent && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="fixed inset-0 bg-black/90 z-50"
              onClick={() => setShowPhotoModal(false)}
            />
            <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.9 }}
                className="relative max-w-5xl w-full"
                onClick={(e) => e.stopPropagation()}
              >
                {/* Close Button */}
                <button
                  onClick={() => setShowPhotoModal(false)}
                  className="absolute top-4 right-4 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white z-10"
                >
                  <HiXMark className="w-6 h-6" />
                </button>

                {/* Navigation */}
                {selectedEvent.photos.length > 1 && (
                  <>
                    <button
                      onClick={() =>
                        setSelectedPhotoIndex((prev) =>
                          prev === 0 ? selectedEvent.photos.length - 1 : prev - 1,
                        )
                      }
                      className="absolute left-4 top-1/2 -translate-y-1/2 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white"
                    >
                      <HiChevronLeft className="w-6 h-6" />
                    </button>
                    <button
                      onClick={() =>
                        setSelectedPhotoIndex((prev) =>
                          prev === selectedEvent.photos.length - 1 ? 0 : prev + 1,
                        )
                      }
                      className="absolute right-4 top-1/2 -translate-y-1/2 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white"
                    >
                      <HiChevronRight className="w-6 h-6" />
                    </button>
                  </>
                )}

                {/* Image */}
                <img
                  src={selectedEvent.photos[selectedPhotoIndex]}
                  alt={`${selectedEvent.title} - ${selectedPhotoIndex + 1}`}
                  className="w-full h-auto max-h-[80vh] object-contain rounded-lg"
                />

                {/* Counter */}
                <div className="absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 bg-black/70 text-white rounded-full text-sm">
                  {selectedPhotoIndex + 1} / {selectedEvent.photos.length}
                </div>
              </motion.div>
            </div>
          </>
        )}
      </AnimatePresence>
    </div>
  )
}

export default EventsModule