'use client'

import { useState, useEffect } from 'react'
import Image from 'next/image'
import styles from './CommunityGallery.module.css'

interface GalleryImage {
  id: string
  image_url: string
  created_at: string
  votes: number
}

export default function CommunityGallery() {
  const [images, setImages] = useState<GalleryImage[]>([])
  const [loading, setLoading] = useState(true)
  const [loadingMore, setLoadingMore] = useState(false)
  const [page, setPage] = useState(0)
  const [hasMore, setHasMore] = useState(true)
  const [votedIds, setVotedIds] = useState<Set<string>>(new Set())

  const fetchGallery = async (pageNum: number, isLoadMore = false) => {
    try {
      const response = await fetch(`/api/gallery?page=${pageNum}&limit=20`)
      const data = await response.json()
      if (data.images) {
        if (data.images.length < 20) {
          setHasMore(false)
        }
        if (isLoadMore) {
          setImages(prev => [...prev, ...data.images])
        } else {
          setImages(data.images)
        }
      }
    } catch (err) {
      console.error('Failed to fetch gallery:', err)
    } finally {
      setLoading(false)
      setLoadingMore(false)
    }
  }

  useEffect(() => {
    fetchGallery(0)

    // Load voted IDs from localStorage
    const stored = localStorage.getItem('prime_gallery_votes')
    if (stored) {
      try {
        setVotedIds(new Set(JSON.parse(stored)))
      } catch (e) {
        // Invalid data, ignore
      }
    }
  }, [])

  const handleLoadMore = () => {
    const nextPage = page + 1
    setPage(nextPage)
    setLoadingMore(true)
    fetchGallery(nextPage, true)
  }

  const handleVote = async (imageId: string) => {
    if (votedIds.has(imageId)) return

    try {
      const response = await fetch(`/api/gallery/${imageId}/vote`, {
        method: 'POST'
      })
      const data = await response.json()

      if (data.votes !== undefined) {
        // Update local state
        setImages(prev =>
          prev.map(img =>
            img.id === imageId ? { ...img, votes: data.votes } : img
          )
        )

        // Mark as voted
        const newVoted = new Set(votedIds)
        newVoted.add(imageId)
        setVotedIds(newVoted)
        localStorage.setItem('prime_gallery_votes', JSON.stringify([...newVoted]))
      }
    } catch (err) {
      console.error('Failed to vote:', err)
    }
  }

  if (loading) {
    return (
      <section id="gallery" className={styles.gallery}>
        <div className={styles.container}>
          <p className={styles.loading}>Loading gallery...</p>
        </div>
      </section>
    )
  }

  if (images.length === 0) {
    return (
      <section id="gallery" className={styles.gallery}>
        <div className={styles.container}>
          <h2 className={styles.title}>The Collective</h2>
          <p className={styles.empty}>First reveal starts here.</p>
        </div>
      </section>
    )
  }

  return (
    <section id="gallery" className={styles.gallery}>
      <div className={styles.grain}></div>

      <div className={styles.container}>
        <h2 className={styles.title}>The Collective</h2>
        <p className={styles.sub}>Those who revealed their PRIME.</p>

        <div className={styles.grid}>
          {images.map((image) => (
            <div key={image.id} className={styles.item}>
              <Image
                src={image.image_url}
                alt="PRIME"
                fill
                className={styles.image}
                unoptimized
              />
              <button
                className={`${styles.voteBtn} ${votedIds.has(image.id) ? styles.voted : ''}`}
                onClick={() => handleVote(image.id)}
                disabled={votedIds.has(image.id)}
                title={votedIds.has(image.id) ? 'Acknowledged' : 'Acknowledge'}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill={votedIds.has(image.id) ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
                </svg>
                <span className={styles.voteCount}>{image.votes || 0}</span>
              </button>
            </div>
          ))}
        </div>

        {hasMore && (
          <div className={styles.loadMoreContainer}>
            <button 
              className={styles.loadMoreBtn} 
              onClick={handleLoadMore}
              disabled={loadingMore}
            >
              {loadingMore ? 'Loading...' : 'Load More'}
            </button>
          </div>
        )}
      </div>
    </section>
  )
}