nakama/frontend/src/components/PostMenu.jsx

import { X, Trash2, AlertCircle, Flag } from 'lucide-react'
import { useState } from 'react'
import { reportPost } from '../utils/api'
import { hapticFeedback, showConfirm } from '../utils/telegram'
import './PostMenu.css'

export default function PostMenu({ post, currentUser, onClose, onDelete }) {
  const [showReportModal, setShowReportModal] = useState(false)
  const [reportReason, setReportReason] = useState('')
  const [submitting, setSubmitting] = useState(false)

  const isOwnPost = post.author._id === currentUser.id
  const isModerator = currentUser.role === 'moderator' || currentUser.role === 'admin'

  const handleOverlayClick = (e) => {
    // Закрывать только при клике на overlay
    if (e.target === e.currentTarget) {
      onClose()
    }
  }

  const handleReport = async () => {
    if (!reportReason.trim()) {
      alert('Укажите причину жалобы')
      return
    }

    try {
      setSubmitting(true)
      hapticFeedback('light')
      await reportPost(post._id, reportReason)
      hapticFeedback('success')
      alert('Жалоба отправлена')
      onClose()
    } catch (error) {
      console.error('Ошибка отправки жалобы:', error)
      hapticFeedback('error')
      alert('Ошибка отправки жалобы')
    } finally {
      setSubmitting(false)
    }
  }

  if (showReportModal) {
    return (
      <div className="modal-overlay" onClick={handleOverlayClick}>
        <div className="modal-content report-modal">
          <div className="modal-header">
            <button className="close-btn" onClick={onClose}>
              <X size={24} />
            </button>
            <h2>Пожаловаться</h2>
            <button
              className="submit-btn"
              onClick={handleReport}
              disabled={submitting || !reportReason.trim()}
            >
              {submitting ? 'Отправка...' : 'Отправить'}
            </button>
          </div>

          <div className="modal-body">
            <textarea
              placeholder="Опишите причину жалобы..."
              value={reportReason}
              onChange={e => setReportReason(e.target.value)}
              maxLength={500}
              rows={6}
              autoFocus
            />
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="modal-overlay" onClick={handleOverlayClick}>
      <div className="menu-modal">
        {isOwnPost || isModerator ? (
          <button className="menu-item danger" onClick={onDelete}>
            <Trash2 size={20} />
            <span>Удалить пост</span>
          </button>
        ) : (
          <button className="menu-item" onClick={() => setShowReportModal(true)}>
            <Flag size={20} />
            <span>Пожаловаться</span>
          </button>
        )}
        
        <button className="menu-item" onClick={onClose}>
          <X size={20} />
          <span>Отмена</span>
        </button>
      </div>
    </div>
  )
}