import { useState, useRef } from 'react'
import { X, Image as ImageIcon, Tag, AtSign } from 'lucide-react'
import { createPost, searchUsers } from '../utils/api'
import { hapticFeedback } from '../utils/telegram'
import './CreatePostModal.css'

const TAGS = [
  { value: 'furry', label: 'Furry', color: '#FF8A33' },
  { value: 'anime', label: 'Anime', color: '#4A90E2' },
  { value: 'other', label: 'Other', color: '#A0A0A0' }
]

export default function CreatePostModal({ user, onClose, onPostCreated }) {
  const [content, setContent] = useState('')
  const [selectedTags, setSelectedTags] = useState([])
  const [image, setImage] = useState(null)
  const [imagePreview, setImagePreview] = useState(null)
  const [isNSFW, setIsNSFW] = useState(false)
  const [loading, setLoading] = useState(false)
  const [showUserSearch, setShowUserSearch] = useState(false)
  const [userSearchQuery, setUserSearchQuery] = useState('')
  const [searchResults, setSearchResults] = useState([])
  const [mentionedUsers, setMentionedUsers] = useState([])
  const fileInputRef = useRef(null)

  const handleImageSelect = (e) => {
    const file = e.target.files[0]
    if (file) {
      setImage(file)
      const reader = new FileReader()
      reader.onloadend = () => {
        setImagePreview(reader.result)
      }
      reader.readAsDataURL(file)
      hapticFeedback('light')
    }
  }

  const handleRemoveImage = () => {
    setImage(null)
    setImagePreview(null)
    if (fileInputRef.current) {
      fileInputRef.current.value = ''
    }
  }

  const toggleTag = (tag) => {
    hapticFeedback('light')
    if (selectedTags.includes(tag)) {
      setSelectedTags(selectedTags.filter(t => t !== tag))
    } else {
      setSelectedTags([...selectedTags, tag])
    }
  }

  const handleUserSearch = async (query) => {
    setUserSearchQuery(query)
    if (query.length > 1) {
      try {
        const users = await searchUsers(query)
        setSearchResults(users)
      } catch (error) {
        console.error('Ошибка поиска:', error)
      }
    } else {
      setSearchResults([])
    }
  }

  const handleMentionUser = (user) => {
    if (!mentionedUsers.find(u => u._id === user._id)) {
      setMentionedUsers([...mentionedUsers, user])
      setContent(prev => prev + `@${user.username} `)
    }
    setShowUserSearch(false)
    setUserSearchQuery('')
    setSearchResults([])
    hapticFeedback('light')
  }

  const handleSubmit = async () => {
    if (selectedTags.length === 0) {
      alert('Выберите хотя бы один тег')
      return
    }

    if (!content.trim() && !image) {
      alert('Добавьте текст или изображение')
      return
    }

    try {
      setLoading(true)
      hapticFeedback('light')
      
      const formData = new FormData()
      formData.append('content', content)
      formData.append('tags', JSON.stringify(selectedTags))
      formData.append('isNSFW', isNSFW)
      
      if (image) {
        formData.append('image', image)
      }
      
      if (mentionedUsers.length > 0) {
        formData.append('mentionedUsers', JSON.stringify(mentionedUsers.map(u => u._id)))
      }

      const newPost = await createPost(formData)
      hapticFeedback('success')
      onPostCreated(newPost)
    } catch (error) {
      console.error('Ошибка создания поста:', error)
      hapticFeedback('error')
      alert('Ошибка создания поста')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content create-post-modal" onClick={e => e.stopPropagation()}>
        {/* Хедер */}
        <div className="modal-header">
          <button className="close-btn" onClick={onClose}>
            <X size={24} />
          </button>
          <h2>Создать пост</h2>
          <button
            className="submit-btn"
            onClick={handleSubmit}
            disabled={loading || selectedTags.length === 0}
          >
            {loading ? 'Отправка...' : 'Опубликовать'}
          </button>
        </div>

        {/* Контент */}
        <div className="modal-body">
          <textarea
            placeholder="Что нового?"
            value={content}
            onChange={e => setContent(e.target.value)}
            maxLength={2000}
            rows={6}
          />

          {/* Превью изображения */}
          {imagePreview && (
            <div className="image-preview">
              <img src={imagePreview} alt="Preview" />
              <button className="remove-image-btn" onClick={handleRemoveImage}>
                <X size={20} />
              </button>
            </div>
          )}

          {/* Выбор тегов */}
          <div className="tags-section">
            <div className="section-label">
              <Tag size={18} />
              <span>Теги (обязательно)</span>
            </div>
            <div className="tags-list">
              {TAGS.map(tag => (
                <button
                  key={tag.value}
                  className={`tag-btn ${selectedTags.includes(tag.value) ? 'active' : ''}`}
                  style={{
                    backgroundColor: selectedTags.includes(tag.value) ? tag.color : 'var(--bg-primary)',
                    color: selectedTags.includes(tag.value) ? 'white' : 'var(--text-primary)'
                  }}
                  onClick={() => toggleTag(tag.value)}
                >
                  {tag.label}
                </button>
              ))}
            </div>
          </div>

          {/* Упомянутые пользователи */}
          {mentionedUsers.length > 0 && (
            <div className="mentioned-users">
              {mentionedUsers.map(u => (
                <span key={u._id} className="mentioned-user">
                  @{u.username}
                </span>
              ))}
            </div>
          )}

          {/* NSFW переключатель */}
          <div className="nsfw-toggle">
            <label>
              <input
                type="checkbox"
                checked={isNSFW}
                onChange={e => setIsNSFW(e.target.checked)}
              />
              <span>Отметить как NSFW</span>
            </label>
          </div>
        </div>

        {/* Футер с действиями */}
        <div className="modal-footer">
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            onChange={handleImageSelect}
            style={{ display: 'none' }}
          />
          
          <button className="action-icon-btn" onClick={() => fileInputRef.current?.click()}>
            <ImageIcon size={22} />
          </button>
          
          <button className="action-icon-btn" onClick={() => setShowUserSearch(true)}>
            <AtSign size={22} />
          </button>
        </div>

        {/* Поиск пользователей */}
        {showUserSearch && (
          <div className="user-search-modal">
            <div className="user-search-header">
              <input
                type="text"
                placeholder="Поиск пользователей..."
                value={userSearchQuery}
                onChange={e => handleUserSearch(e.target.value)}
                autoFocus
              />
              <button onClick={() => setShowUserSearch(false)}>
                <X size={20} />
              </button>
            </div>
            <div className="user-search-results">
              {searchResults.map(u => (
                <div key={u._id} className="user-result" onClick={() => handleMentionUser(u)}>
                  <img src={u.photoUrl || '/default-avatar.png'} alt={u.username} />
                  <div>
                    <div className="user-name">{u.firstName} {u.lastName}</div>
                    <div className="user-username">@{u.username}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}