import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Heart, MessageCircle, MoreVertical, ChevronLeft, ChevronRight } from 'lucide-react'
import { likePost, deletePost } from '../utils/api'
import { hapticFeedback, showConfirm } from '../utils/telegram'
import './PostCard.css'

const TAG_COLORS = {
  furry: '#FF8A33',
  anime: '#4A90E2',
  other: '#A0A0A0'
}

const TAG_NAMES = {
  furry: 'Furry',
  anime: 'Anime',
  other: 'Other'
}

export default function PostCard({ post, currentUser, onUpdate }) {
  const navigate = useNavigate()
  const [liked, setLiked] = useState(post.likes.includes(currentUser.id))
  const [likesCount, setLikesCount] = useState(post.likes.length)
  const [currentImageIndex, setCurrentImageIndex] = useState(0)
  
  // Поддержка и старого поля imageUrl и нового images
  const images = post.images && post.images.length > 0 ? post.images : (post.imageUrl ? [post.imageUrl] : [])

  const handleLike = async () => {
    try {
      hapticFeedback('light')
      const result = await likePost(post._id)
      setLiked(result.liked)
      setLikesCount(result.likes)
      if (result.liked) {
        hapticFeedback('success')
      }
    } catch (error) {
      console.error('Ошибка лайка:', error)
    }
  }


  const handleDelete = async () => {
    const confirmed = await showConfirm('Удалить этот пост?')
    if (confirmed) {
      try {
        await deletePost(post._id)
        hapticFeedback('success')
        onUpdate()
      } catch (error) {
        console.error('Ошибка удаления:', error)
      }
    }
  }

  const formatDate = (date) => {
    const d = new Date(date)
    return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' })
  }

  const goToProfile = () => {
    navigate(`/user/${post.author._id}`)
  }

  return (
    <div className="post-card card fade-in">
      {/* Хедер поста */}
      <div className="post-header">
        <div className="post-author" onClick={goToProfile}>
          <img
            src={post.author.photoUrl || '/default-avatar.png'}
            alt={post.author.username}
            className="author-avatar"
          />
          <div className="author-info">
            <div className="author-name">
              {post.author.firstName} {post.author.lastName}
            </div>
            <div className="post-date">
              @{post.author.username} · {formatDate(post.createdAt)}
            </div>
          </div>
        </div>
        
        <button className="menu-btn" onClick={() => navigate(`/post/${post._id}/menu`)}>
          <MoreVertical size={20} />
        </button>
      </div>

      {/* Контент */}
      {post.content && (
        <div className="post-content">
          {post.content}
        </div>
      )}

      {/* Изображения */}
      {images.length > 0 && (
        <div className="post-images">
          <div className="image-carousel">
            <img src={images[currentImageIndex]} alt={`Image ${currentImageIndex + 1}`} />
            
            {images.length > 1 && (
              <>
                {currentImageIndex > 0 && (
                  <button className="carousel-btn prev" onClick={() => setCurrentImageIndex(currentImageIndex - 1)}>
                    <ChevronLeft size={24} />
                  </button>
                )}
                
                {currentImageIndex < images.length - 1 && (
                  <button className="carousel-btn next" onClick={() => setCurrentImageIndex(currentImageIndex + 1)}>
                    <ChevronRight size={24} />
                  </button>
                )}
                
                <div className="carousel-dots">
                  {images.map((_, index) => (
                    <span 
                      key={index} 
                      className={`dot ${index === currentImageIndex ? 'active' : ''}`}
                      onClick={() => setCurrentImageIndex(index)}
                    />
                  ))}
                </div>
              </>
            )}
          </div>
        </div>
      )}

      {/* Теги */}
      <div className="post-tags">
        {post.tags.map((tag, index) => (
          <span
            key={index}
            className="post-tag"
            style={{ backgroundColor: TAG_COLORS[tag] }}
          >
            {TAG_NAMES[tag]}
          </span>
        ))}
        {post.isNSFW && (
          <span className="nsfw-badge">NSFW</span>
        )}
      </div>

      {/* Действия */}
      <div className="post-actions">
        <button
          className={`action-btn ${liked ? 'active' : ''}`}
          onClick={handleLike}
        >
          <Heart size={20} fill={liked ? '#FF3B30' : 'none'} stroke={liked ? '#FF3B30' : 'currentColor'} />
          <span>{likesCount}</span>
        </button>

        <button className="action-btn" onClick={() => navigate(`/post/${post._id}/comments`)}>
          <MessageCircle size={20} stroke="currentColor" />
          <span>{post.comments.length}</span>
        </button>
      </div>
    </div>
  )
}