import { useState, useEffect } from 'react'
import { useSearchParams } from 'react-router-dom'
import { getPosts } from '../utils/api'
import PostCard from '../components/PostCard'
import CreatePostModal from '../components/CreatePostModal'
import { Plus } from 'lucide-react'
import { hapticFeedback } from '../utils/telegram'
import './Feed.css'

export default function Feed({ user }) {
  const [searchParams] = useSearchParams()
  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(true)
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [filter, setFilter] = useState('all')
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const [highlightPostId, setHighlightPostId] = useState(null)

  useEffect(() => {
    // Проверить параметр post в URL
    const postId = searchParams.get('post')
    if (postId) {
      setHighlightPostId(postId)
      // Загрузить конкретный пост если его нет в списке
      loadSpecificPost(postId)
    } else {
      loadPosts()
    }
  }, [filter, searchParams])

  const loadSpecificPost = async (postId) => {
    try {
      // Загрузить посты и найти нужный
      const data = await getPosts({})
      const foundPost = data.posts.find(p => p._id === postId)
      
      if (foundPost) {
        // Если пост найден, добавить его в начало списка
        setPosts(prev => {
          const filtered = prev.filter(p => p._id !== postId)
          return [foundPost, ...filtered]
        })
        
        // Прокрутить к посту после загрузки
        setTimeout(() => {
          const element = document.getElementById(`post-${postId}`)
          if (element) {
            element.scrollIntoView({ behavior: 'smooth', block: 'center' })
          }
        }, 100)
      } else {
        // Если пост не найден, загрузить все посты
        await loadPosts()
      }
    } catch (error) {
      console.error('Ошибка загрузки поста:', error)
      await loadPosts()
    }
  }

  const loadPosts = async (pageNum = 1) => {
    try {
      setLoading(true)
      const params = {}
      if (filter !== 'all') {
        params.tag = filter
      }
      params.page = pageNum
      
      const data = await getPosts(params)
      
      if (pageNum === 1) {
        setPosts(data.posts)
      } else {
        setPosts(prev => [...prev, ...data.posts])
      }
      
      setHasMore(pageNum < data.totalPages)
      setPage(pageNum)
    } catch (error) {
      console.error('Ошибка загрузки постов:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleCreatePost = () => {
    hapticFeedback('light')
    setShowCreateModal(true)
  }

  const handlePostCreated = (newPost) => {
    setPosts(prev => [newPost, ...prev])
    setShowCreateModal(false)
  }

  const handleLoadMore = () => {
    if (!loading && hasMore) {
      loadPosts(page + 1)
    }
  }

  return (
    <div className="feed-page">
      {/* Хедер */}
      <div className="feed-header">
        <h1>NakamaHost</h1>
        <button className="create-btn" onClick={handleCreatePost}>
          <Plus size={20} />
        </button>
      </div>

      {/* Фильтры */}
      <div className="feed-filters">
        <button
          className={`filter-btn ${filter === 'all' ? 'active' : ''}`}
          onClick={() => setFilter('all')}
        >
          Все
        </button>
        <button
          className={`filter-btn ${filter === 'furry' ? 'active' : ''}`}
          onClick={() => setFilter('furry')}
          style={{ color: filter === 'furry' ? 'var(--tag-furry)' : undefined }}
        >
          Furry
        </button>
        <button
          className={`filter-btn ${filter === 'anime' ? 'active' : ''}`}
          onClick={() => setFilter('anime')}
          style={{ color: filter === 'anime' ? 'var(--tag-anime)' : undefined }}
        >
          Anime
        </button>
        <button
          className={`filter-btn ${filter === 'other' ? 'active' : ''}`}
          onClick={() => setFilter('other')}
          style={{ color: filter === 'other' ? 'var(--tag-other)' : undefined }}
        >
          Other
        </button>
      </div>

      {/* Посты */}
      <div className="feed-content">
        {loading && posts.length === 0 ? (
          <div className="loading-state">
            <div className="spinner" />
          </div>
        ) : posts.length === 0 ? (
          <div className="empty-state">
            <p>Пока нет постов</p>
            <button className="btn-primary" onClick={handleCreatePost}>
              Создать первый пост
            </button>
          </div>
        ) : (
          <>
            {posts.map(post => (
              <div 
                key={post._id} 
                className={highlightPostId === post._id ? 'post-highlight' : ''}
                id={`post-${post._id}`}
              >
                <PostCard post={post} currentUser={user} onUpdate={loadPosts} />
              </div>
            ))}
            
            {hasMore && (
              <button 
                className="load-more-btn"
                onClick={handleLoadMore}
                disabled={loading}
              >
                {loading ? 'Загрузка...' : 'Загрузить ещё'}
              </button>
            )}
          </>
        )}
      </div>

      {/* Модальное окно создания поста */}
      {showCreateModal && (
        <CreatePostModal
          user={user}
          onClose={() => setShowCreateModal(false)}
          onPostCreated={handlePostCreated}
        />
      )}
    </div>
  )
}