import { useState, useRef, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { useNotification } from '../context/notification-context'
import { motion, AnimatePresence } from 'framer-motion'
import { FaBookReader, FaTimes, FaVideo, FaLink } from 'react-icons/fa'
import VideoPlayer from '../components/VideoPlayer'

interface Video {
  id: string
  title: string
  description: string
  thumbnail: string
  videoSrc: string
  vttSrc: string
  transcriptSrc?: string
}

interface Category {
  id: string
  title: string
  description: string
  videos: Video[]
}

const ITEMS_PER_PAGE = {
  mobile: 3,
  tablet: 4,
  desktop: 6
}

const resourceCategories: Category[] = [
  {
    id: 'governance',
    title: 'Professional Development & Governance',
    description: 'Essential training materials for effective organizational management and parliamentary procedures',
    videos: [
      {
        id: 'governance-documents',
        title: 'Governance Documents: Understanding the Hierarchy',
        description: 'Expert parliamentarian Mark Apodaca explains the complete hierarchy of governance documents for non-profit organizations, from state laws and Articles of Incorporation down to bylaws, standing rules, and customs',
        thumbnail: '/images/thumbnails/governance-documents.png',
        videoSrc: '/videos/governance-documents.mp4',
        vttSrc: '/subtitles/governance-documents.vtt',
        transcriptSrc: '/transcriptions/governance-documents.txt'
      },
      {
        id: 'secretary-role-responsibilities',
        title: 'Secretary Role & Responsibilities: Comprehensive Guide',
        description: 'Expert parliamentarian Mark Apodaca provides a detailed overview of a secretary\'s essential duties, including keeping meeting minutes, maintaining member records, and managing organizational documentation',
        thumbnail: '/images/thumbnails/secretary-role-responsibilities.png',
        videoSrc: '/videos/secretary-role-responsibilities.mp4',
        vttSrc: '/subtitles/secretary-role-responsibilities.vtt',
        transcriptSrc: '/transcriptions/secretary-role-responsibilities.txt'
      },
      {
        id: 'minutes-approval-procedure',
        title: 'Meeting Minutes Approval: Expert Guidelines',
        description: 'Expert parliamentarian Mark Apodaca explains the proper procedures for reviewing and accepting meeting minutes in non-profit organizations',
        thumbnail: '/images/thumbnails/minutes-approval-procedure.png',
        videoSrc: '/videos/minutes-approval-procedure.mp4',
        vttSrc: '/subtitles/minutes-approval-procedure.vtt',
        transcriptSrc: '/transcriptions/minutes-approval-procedure.txt'
      },
      {
        id: 'board-participation-guidelines',
        title: 'Board Meeting Participation: Guidelines & Procedures',
        description: 'Expert parliamentarian Mark Apodaca explains proper protocols for member participation in board meetings and channels for expressing concerns',
        thumbnail: '/images/thumbnails/board-participation-guidelines.png',
        videoSrc: '/videos/board-participation-guidelines.mp4',
        vttSrc: '/subtitles/board-participation-guidelines.vtt',
        transcriptSrc: '/transcriptions/board-participation-guidelines.txt'
      },
      {
        id: 'board-member-reprimands',
        title: 'Board Member Reprimands: Due Process Guidelines',
        description: 'Expert parliamentarian Mark Apodaca explains proper procedures for handling board member reprimands and the importance of due process in organizational governance',
        thumbnail: '/images/thumbnails/board-member-reprimands.png',
        videoSrc: '/videos/board-member-reprimands.mp4',
        vttSrc: '/subtitles/board-member-reprimands.vtt',
        transcriptSrc: '/transcriptions/board-member-reprimands.txt'
      },
      {
        id: 'meeting-minutes-access-rights',
        title: 'Meeting Minutes Access Rights: Member Guidelines',
        description: 'Expert parliamentarian Mark Apodaca explains members\' rights to access meeting minutes and proper procedures for requesting organizational records',
        thumbnail: '/images/thumbnails/meeting-minutes-access-rights.png',
        videoSrc: '/videos/meeting-minutes-access-rights.mp4',
        vttSrc: '/subtitles/meeting-minutes-access-rights.vtt',
        transcriptSrc: '/transcriptions/meeting-minutes-access-rights.txt'
      }            
    ]
  }
]

const Resources = () => {
  const { videoId } = useParams<{ videoId?: string }>()
  const navigate = useNavigate()
  const { showNotification } = useNotification()
  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null)
  const [currentPage, setCurrentPage] = useState<Record<string, number>>({})
  const [showTranscript, setShowTranscript] = useState(false)
  const [transcriptContent, setTranscriptContent] = useState('')
  const [screenWidth, setScreenWidth] = useState(window.innerWidth)
  const [isSubscribing, setIsSubscribing] = useState(false)
  const [subscriptionForm, setSubscriptionForm] = useState({
    name: '',
    email: ''
  })
  const popupRef = useRef<HTMLDivElement>(null)
  const transcriptRef = useRef<HTMLDivElement>(null)

  // Handle direct video links
  useEffect(() => {
    if (videoId) {
      const video = resourceCategories
        .flatMap(category => category.videos)
        .find(v => v.id === videoId)
      
      if (video) {
        setSelectedVideo(video)
      }
    }
  }, [videoId])

  useEffect(() => {
    const handleResize = () => setScreenWidth(window.innerWidth)
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  const getItemsPerPage = () => {
    if (screenWidth < 640) return ITEMS_PER_PAGE.mobile
    if (screenWidth < 1024) return ITEMS_PER_PAGE.tablet
    return ITEMS_PER_PAGE.desktop
  }

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
        setSelectedVideo(null)
      }
      if (transcriptRef.current && !transcriptRef.current.contains(event.target as Node)) {
        setShowTranscript(false)
      }
    }

    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  const fetchTranscript = async (videoId: string) => {
    try {
      const response = await fetch(`/transcriptions/${videoId}.txt`)
      const text = await response.text()
      setTranscriptContent(text)
      setShowTranscript(true)
    } catch (error) {
      console.error('Error fetching transcript:', error)
      setTranscriptContent('Transcript not available.')
    }
  }

  const getPageCount = (videoCount: number) => Math.ceil(videoCount / getItemsPerPage())

  const getCurrentPageVideos = (videos: Video[], categoryId: string) => {
    const page = currentPage[categoryId] || 1
    const itemsPerPage = getItemsPerPage()
    const start = (page - 1) * itemsPerPage
    return videos.slice(start, start + itemsPerPage)
  }

  const handleSubscribe = async (e: React.FormEvent) => {
    e.preventDefault()
    if (isSubscribing) return
    setIsSubscribing(true)

    try {
      const response = await fetch('/api/subscribe', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(subscriptionForm),
      })

      const data = await response.json()

      if (data.success) {
        showNotification('Thanks! You\'ll be notified when new videos are added.', 'success')
        setSubscriptionForm({ name: '', email: '' })
      } else {
        showNotification(data.message || 'Failed to subscribe', 'error')
      }
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : 'An error occurred. Please try again later.'
      showNotification(errorMessage, 'error')
    } finally {
      setTimeout(() => {
        setIsSubscribing(false)
      }, 1000)
    }
  }

  return (
    <div className="min-h-screen bg-accent-snow">
      <div className="max-w-7xl mx-auto px-4 py-12 sm:py-20">
        <h1 className="text-3xl sm:text-4xl font-bold text-secondary mb-12 sm:mb-16 text-center">
          Resource Library
        </h1>

        {resourceCategories.map((category) => (
          <div key={category.id} className="mb-16">
            <div className="mb-8">
              <h2 className="text-xl sm:text-2xl font-bold text-secondary mb-2">{category.title}</h2>
              <p className="text-accent-mountain">{category.description}</p>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
              {getCurrentPageVideos(category.videos, category.id).map((video, index) => (
                <motion.div
                  key={video.id}
                  layout
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  className="group bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100"
                >
                  <div className="relative aspect-video overflow-hidden">
                    <img
                      src={video.thumbnail}
                      alt={video.title}
                      className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                    />
                    {/* Gradient overlay for better text readability */}
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-60 group-hover:opacity-80 transition-opacity duration-300" />
                    
                    {/* Always visible play icon */}
                    <div className="absolute top-4 right-4 bg-white/20 backdrop-blur-sm rounded-full p-2 opacity-80 group-hover:opacity-100 transition-opacity duration-300">
                      <FaVideo className="w-4 h-4 text-white" />
                    </div>
                    
                    {/* Hover overlay with buttons */}
                    <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-col items-center justify-center gap-3">
                      <motion.button
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                        onClick={() => {
                          setSelectedVideo(video)
                          navigate(`/resources/video/${video.id}`, { replace: true })
                        }}
                        className="bg-gradient-to-r from-primary to-secondary hover:from-secondary hover:to-primary text-white px-6 py-3 rounded-xl flex items-center gap-3 font-semibold shadow-lg backdrop-blur-sm border border-white/20 transition-all duration-300"
                        aria-label={`Watch ${video.title}`}
                      >
                        <FaVideo className="w-4 h-4" /> Watch Video
                      </motion.button>
                      
                      <div className="flex items-center gap-3">
                        <motion.button
                          whileHover={{ scale: 1.05 }}
                          whileTap={{ scale: 0.95 }}
                          onClick={() => {
                            const url = `${window.location.origin}/resources/video/${video.id}`
                            navigator.clipboard.writeText(url)
                            showNotification('Link copied to clipboard!', 'success')
                          }}
                          className="bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-300 border border-white/20"
                          aria-label={`Copy link to ${video.title}`}
                        >
                          <FaLink className="w-4 h-4" /> Share
                        </motion.button>
                        
                        {video.transcriptSrc && (
                          <motion.button
                            whileHover={{ scale: 1.05 }}
                            whileTap={{ scale: 0.95 }}
                            onClick={() => fetchTranscript(video.id)}
                            className="bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-300 border border-white/20"
                            aria-label={`Read transcript of ${video.title}`}
                          >
                            <FaBookReader className="w-4 h-4" /> Transcript
                          </motion.button>
                        )}
                      </div>
                    </div>
                  </div>
                  
                  <div className="p-6">
                    <h3 className="text-xl font-bold text-secondary mb-3 line-clamp-2 leading-tight group-hover:text-primary transition-colors duration-300">
                      {video.title}
                    </h3>
                    <p className="text-accent-mountain line-clamp-3 leading-relaxed text-sm">
                      {video.description}
                    </p>
                    
                    {/* Bottom action bar */}
                    <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
                      <span className="text-xs text-accent-mountain/70 uppercase tracking-wide font-medium">
                        Professional Training
                      </span>
                      <div className="flex items-center gap-1">
                        {[...Array(5)].map((_, i) => (
                          <div
                            key={i}
                            className="w-1.5 h-1.5 rounded-full bg-primary/20"
                          />
                        ))}
                      </div>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>

            {getPageCount(category.videos.length) > 1 && (
              <div className="mt-8 flex justify-center items-center space-x-4">
                {Array.from({ length: getPageCount(category.videos.length) }).map((_, idx) => (
                  <button
                    key={idx}
                    onClick={() => setCurrentPage({ ...currentPage, [category.id]: idx + 1 })}
                    className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors
                      ${(currentPage[category.id] || 1) === idx + 1
                        ? 'bg-primary text-white'
                        : 'bg-white text-primary border border-primary hover:bg-primary/10'
                      }`}
                    aria-label={`Page ${idx + 1}`}
                    aria-current={(currentPage[category.id] || 1) === idx + 1 ? 'page' : undefined}
                  >
                    {idx + 1}
                  </button>
                ))}
              </div>
            )}
          </div>
        ))}

        {/* Subscription Section */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6 sm:p-8"
        >
          <div className="text-center mb-6">
            <h2 className="text-xl sm:text-2xl font-bold text-secondary mb-2">Stay Updated</h2>
            <p className="text-accent-mountain">Get notified when we add new training videos</p>
          </div>
          
          <form onSubmit={handleSubscribe} className="space-y-4">
            <div className="grid sm:grid-cols-2 gap-4">
              <div>
                <label htmlFor="sub-name" className="block text-accent-mountain mb-2 text-sm sm:text-base">
                  Name
                </label>
                <input
                  type="text"
                  id="sub-name"
                  value={subscriptionForm.name}
                  onChange={(e) => setSubscriptionForm({ ...subscriptionForm, name: e.target.value })}
                  className="w-full px-4 py-3 border border-accent-lake rounded-lg focus:outline-none focus:border-primary
                           text-base sm:text-lg"
                  required
                  minLength={2}
                  maxLength={50}
                  placeholder="Your name"
                />
              </div>

              <div>
                <label htmlFor="sub-email" className="block text-accent-mountain mb-2 text-sm sm:text-base">
                  Email
                </label>
                <input
                  type="email"
                  id="sub-email"
                  value={subscriptionForm.email}
                  onChange={(e) => setSubscriptionForm({ ...subscriptionForm, email: e.target.value })}
                  className="w-full px-4 py-3 border border-accent-lake rounded-lg focus:outline-none focus:border-primary
                           text-base sm:text-lg"
                  required
                  pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
                  placeholder="your@email.com"
                />
              </div>
            </div>

            <motion.button
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              type="submit"
              disabled={isSubscribing}
              className={`w-full py-3 rounded-lg font-semibold text-base sm:text-lg transition-colors
                ${isSubscribing 
                  ? 'bg-accent-mountain text-accent-snow cursor-not-allowed'
                  : 'bg-primary text-accent-snow hover:bg-secondary active:bg-secondary'
                }`}
            >
              {isSubscribing ? 'Subscribing...' : 'Subscribe to Updates'}
            </motion.button>
          </form>
        </motion.div>
      </div>

      {/* Video Modal */}
      {selectedVideo && (
        <div className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="w-full max-w-6xl" ref={popupRef}>
            <div className="relative">
              <button
                onClick={() => {
                  setSelectedVideo(null)
                  navigate('/resources', { replace: true })
                }}
                className="absolute -top-12 right-0 text-white hover:text-accent-lake bg-black/50 p-2 rounded-full transition-colors"
                aria-label="Close video"
              >
                <FaTimes className="w-6 h-6" />
              </button>
              <VideoPlayer
                src={selectedVideo.videoSrc}
                poster={selectedVideo.thumbnail}
                vttSrc={selectedVideo.vttSrc}
              />
            </div>
          </div>
        </div>
      )}

      {/* Transcript Modal */}
      <AnimatePresence>
        {showTranscript && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center z-50 p-4"
          >
            <motion.div
              initial={{ y: 50, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              exit={{ y: 50, opacity: 0 }}
              className="w-full max-w-4xl bg-white rounded-xl shadow-2xl"
              ref={transcriptRef}
            >
              <div className="p-6 flex justify-between items-center border-b border-gray-200">
                <h3 className="text-2xl font-bold text-secondary">Video Transcript</h3>
                <button
                  onClick={() => setShowTranscript(false)}
                  className="text-accent-mountain hover:text-secondary transition-colors bg-accent-snow/50 p-2 rounded-full"
                  aria-label="Close transcript"
                >
                  <FaTimes size={24} />
                </button>
              </div>
              <div className="p-6 max-h-[60vh] overflow-y-auto prose prose-slate">
                {transcriptContent.split('\n\n').map((paragraph, index) => (
                  <p key={index} className="mb-4 text-accent-mountain leading-relaxed">
                    {paragraph}
                  </p>
                ))}
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

export default Resources
