import React, { useState } from 'react'
import { Plus, Edit2, Trash2, CheckCircle, Circle, Heart, Loader2 } from 'lucide-react'
import { ForumPost, ForumTopic } from '@/proxy/forum/forum'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { useStoreState } from '@/store/store'

interface PostManagementProps {
  posts: ForumPost[]
  topics: ForumTopic[]
  loading: boolean
  onCreatePost: (post: {
    topicId: string
    content: string
    parentPostId?: string
    tenantId?: string
  }) => Promise<void>
  onUpdatePost: (id: string, post: Partial<ForumPost>) => Promise<void>
  onDeletePost: (id: string) => Promise<void>
  onMarkPostAsAcceptedAnswer: (id: string) => Promise<void>
  onUnmarkPostAsAcceptedAnswer: (id: string) => Promise<void>
}

export function PostManagement({
  posts,
  topics,
  loading,
  onCreatePost,
  onUpdatePost,
  onDeletePost,
  onMarkPostAsAcceptedAnswer,
  onUnmarkPostAsAcceptedAnswer,
}: PostManagementProps) {
  const { tenant } = useStoreState((state) => state.auth)
  const [content, setContent] = useState('')
  const [showCreateForm, setShowCreateForm] = useState(false)
  const [editingPost, setEditingPost] = useState<ForumPost | null>(null)
  const [formData, setFormData] = useState({
    topicId: '',
    parentPostId: '',
    tenantId: '',
    isAcceptedAnswer: false,
  })
  const [submitting, setSubmitting] = useState(false)

  const resetForm = () => {
    setFormData({
      topicId: '',
      parentPostId: '',
      tenantId: '',
      isAcceptedAnswer: false,
    })
    setShowCreateForm(false)
    setEditingPost(null)
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (submitting || !content.trim()) return

    try {
      setSubmitting(true)
      const data = { ...formData, content: content.trim() }

      if (editingPost) {
        await onUpdatePost(editingPost.id, data)
      } else {
        await onCreatePost(data)
      }

      resetForm()
    } catch (error) {
      console.error('Error submitting form:', error)
    } finally {
      setSubmitting(false)
    }
  }

  const handleEdit = (post: ForumPost) => {
    setEditingPost(post)
    setFormData({
      topicId: post.topicId,
      parentPostId: '',
      tenantId: tenant.tenantId ?? '',
      isAcceptedAnswer: post.isAcceptedAnswer,
    })
    setContent(post.content)
    setShowCreateForm(true)
  }

  const handleToggleAcceptedAnswer = async (post: ForumPost) => {
    try {
      if (post.isAcceptedAnswer) {
        await onUnmarkPostAsAcceptedAnswer(post.id)
      } else {
        await onMarkPostAsAcceptedAnswer(post.id)
      }
    } catch (error) {
      console.error('Error toggling accepted answer:', error)
    }
  }

  const handleDelete = async (id: string) => {
    if (confirm('Are you sure you want to delete this post?')) {
      try {
        await onDeletePost(id)
      } catch (error) {
        console.error('Error deleting post:', error)
      }
    }
  }

  const getTopicTitle = (topicId: string) => {
    const topic = topics.find((t) => t.id === topicId)
    return topic ? topic.title : 'Unknown Topic'
  }

  const formatDate = (value: string | Date) => {
    const date = value instanceof Date ? value : new Date(value)
    if (isNaN(date.getTime())) return 'Invalid Date'

    return new Intl.DateTimeFormat('en', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    }).format(date)
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold text-gray-900">Post Management</h2>
        <button
          onClick={() => setShowCreateForm(true)}
          disabled={loading}
          className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
        >
          <Plus className="w-4 h-4" />
          <span>Add Post</span>
        </button>
      </div>

      {/* Create/Edit Form */}
      {showCreateForm && (
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">
            {editingPost ? 'Edit Post' : 'Create New Post'}
          </h3>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Topic</label>
              <select
                value={formData.topicId}
                onChange={(e) => setFormData({ ...formData, topicId: e.target.value })}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
              >
                <option value="">Select a topic</option>
                {topics.map((topic) => (
                  <option key={topic.id} value={topic.id}>
                    {topic.title}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Content</label>
              <ReactQuill
                theme="snow"
                value={content}
                onChange={setContent}
                style={{ height: '400px', marginBottom: '50px' }}
                placeholder={'Write your message...'}
              />
            </div>

            <div className="flex items-center">
              <label className="flex items-center">
                <input
                  type="checkbox"
                  checked={formData.isAcceptedAnswer}
                  onChange={(e) => setFormData({ ...formData, isAcceptedAnswer: e.target.checked })}
                  className="mr-2"
                />
                Mark as Accepted Answer
              </label>
            </div>

            <div className="flex justify-end space-x-3">
              <button
                type="button"
                onClick={resetForm}
                disabled={submitting}
                className="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors disabled:opacity-50"
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={submitting}
                className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
              >
                {submitting && <Loader2 className="w-4 h-4 animate-spin" />}
                <span>{editingPost ? 'Update' : 'Create'}</span>
              </button>
            </div>
          </form>
        </div>
      )}

      {/* Posts List */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div className="px-6 py-4 border-b border-gray-200">
          <h3 className="text-lg font-semibold text-gray-900">Posts ({posts.length})</h3>
        </div>

        {loading ? (
          <div className="p-8 text-center">
            <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600" />
            <p className="text-gray-500">Loading posts...</p>
          </div>
        ) : (
          <div className="divide-y divide-gray-200">
            {posts
              .sort(
                (a, b) => new Date(b.creationTime).getTime() - new Date(a.creationTime).getTime(),
              )
              .map((post) => (
                <div key={post.id} className="p-6 hover:bg-gray-50 transition-colors">
                  <div className="flex items-start justify-between">
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center space-x-2 mb-2">
                        <h4 className="text-sm font-semibold text-gray-900">{post.authorName}</h4>
                        {post.isAcceptedAnswer && (
                          <div className="flex items-center space-x-1 bg-emerald-100 text-emerald-700 px-2 py-1 rounded-full text-xs">
                            <CheckCircle className="w-3 h-3" />
                            <span>Accepted Answer</span>
                          </div>
                        )}
                      </div>

                      <div className="mb-3">
                        <p className="text-xs text-gray-500 mb-1">
                          Reply to:{' '}
                          <span className="font-medium">{getTopicTitle(post.topicId)}</span>
                        </p>
                        <p
                          className="text-gray-700 line-clamp-3"
                          dangerouslySetInnerHTML={{ __html: post.content }}
                        ></p>
                      </div>

                      <div className="flex items-center justify-between text-sm text-gray-500">
                        <div className="flex items-center space-x-4">
                          <span>{formatDate(post.creationTime)}</span>
                          <div className="flex items-center space-x-1">
                            <Heart className="w-4 h-4" />
                            <span>{post.likeCount} likes</span>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="flex items-center space-x-2 ml-4">
                      <button
                        onClick={() => handleToggleAcceptedAnswer(post)}
                        className={`p-2 rounded-lg transition-colors ${
                          post.isAcceptedAnswer
                            ? 'text-emerald-600 hover:bg-emerald-100'
                            : 'text-gray-400 hover:bg-gray-100'
                        }`}
                        title={
                          post.isAcceptedAnswer
                            ? 'Remove Accepted Answer'
                            : 'Mark as Accepted Answer'
                        }
                      >
                        {post.isAcceptedAnswer ? (
                          <CheckCircle className="w-4 h-4" />
                        ) : (
                          <Circle className="w-4 h-4" />
                        )}
                      </button>

                      <button
                        onClick={() => handleEdit(post)}
                        className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
                        title="Edit Post"
                      >
                        <Edit2 className="w-4 h-4" />
                      </button>

                      <button
                        onClick={() => handleDelete(post.id)}
                        className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
                        title="Delete Post"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
          </div>
        )}
      </div>
    </div>
  )
}