dashboards/apps/business/src/components/BlogCommentsSection.tsx

import { useEffect, useState } from 'react'
import { ThumbsUp, Check, XCircle, Trash2 } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import type { ProductComment } from '../types/comment'
import { formatCommentDate } from '../data/productComments'
import { ApiError } from '../lib/api'
import {
  COMMENTS_PER_PAGE,
  deleteComment,
  listBlogComments,
  updateCommentApproval,
} from '../services/commentService'
import { Pagination } from './Pagination'
import styles from './BlogCommentsSection.module.css'

interface BlogCommentsSectionProps {
  blogId: string
  onCountChange?: (count: number) => void
}

export function BlogCommentsSection({ blogId, onCountChange }: BlogCommentsSectionProps) {
  const { locale } = useLocale()
  const dateLocale = locale === 'fa' ? 'fa' : 'en'
  const [comments, setComments] = useState<ProductComment[]>([])
  const [totalComments, setTotalComments] = useState(0)
  const [currentPage, setCurrentPage] = useState(1)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState('')
  const [actionId, setActionId] = useState<string | null>(null)

  const totalPages = Math.max(1, Math.ceil(totalComments / COMMENTS_PER_PAGE))

  useEffect(() => {
    const controller = new AbortController()
    void loadComments(currentPage, controller.signal)
    return () => controller.abort()
  }, [blogId, currentPage])

  async function loadComments(page: number, signal?: AbortSignal) {
    setIsLoading(true)
    setError('')

    try {
      const data = await listBlogComments(blogId, page, COMMENTS_PER_PAGE, signal)
      setComments(data.items)
      setTotalComments(data.total)
      onCountChange?.(data.total)
    } catch (err) {
      if (err instanceof DOMException && err.name === 'AbortError') return
      if (err instanceof ApiError) {
        setError(err.message)
      } else {
        setError('Unable to load comments.')
      }
    } finally {
      setIsLoading(false)
    }
  }

  async function toggleApproval(comment: ProductComment) {
    setActionId(comment.id)
    setError('')

    try {
      const updated = await updateCommentApproval(comment.id, !comment.approved)
      setComments((prev) => prev.map((c) => (c.id === comment.id ? updated : c)))
    } catch (err) {
      if (err instanceof ApiError) {
        setError(err.message)
      } else {
        setError('Unable to update comment approval.')
      }
    } finally {
      setActionId(null)
    }
  }

  async function removeComment(commentId: string) {
    setActionId(commentId)
    setError('')

    try {
      await deleteComment(commentId)
      const nextTotal = totalComments - 1
      const nextTotalPages = Math.max(1, Math.ceil(nextTotal / COMMENTS_PER_PAGE))
      const nextPage = currentPage > nextTotalPages ? nextTotalPages : currentPage
      setTotalComments(nextTotal)
      onCountChange?.(nextTotal)

      if (nextPage !== currentPage) {
        setCurrentPage(nextPage)
      } else {
        setComments((prev) => prev.filter((c) => c.id !== commentId))
      }
    } catch (err) {
      if (err instanceof ApiError) {
        setError(err.message)
      } else {
        setError('Unable to delete comment.')
      }
    } finally {
      setActionId(null)
    }
  }

  return (
    <section className={styles.section}>
      <div className={styles.header}>
        <h3 className={styles.title}>Comments</h3>
        <span className={styles.count}>
          {totalComments} {totalComments === 1 ? 'comment' : 'comments'}
        </span>
      </div>

      {error && (
        <p className={styles.errorText} role="alert">
          {error}
        </p>
      )}

      {isLoading ? (
        <p className={styles.emptyText}>Loading comments...</p>
      ) : totalComments === 0 ? (
        <p className={styles.emptyText}>No comments yet for this blog post.</p>
      ) : (
        <>
          <div className={styles.list}>
            {comments.map((comment) => (
              <article
                key={comment.id}
                className={`${styles.comment} ${comment.approved ? styles.commentApproved : ''}`}
              >
                <div className={styles.commentHeader}>
                  <div className={styles.commentMeta}>
                    <div className={styles.author}>{comment.author}</div>
                    <div className={styles.dateTime}>
                      {formatCommentDate(comment.createdAt, dateLocale)}
                    </div>
                  </div>
                  <span className={styles.likes}>
                    <ThumbsUp size={13} />
                    {comment.likesCount}
                  </span>
                </div>
                <p className={styles.text}>{comment.text}</p>
                <div className={styles.commentActions}>
                  {comment.approved ? (
                    <button
                      type="button"
                      className={styles.rejectBtn}
                      disabled={actionId === comment.id}
                      onClick={() => void toggleApproval(comment)}
                    >
                      <XCircle size={14} />
                      Reject
                    </button>
                  ) : (
                    <button
                      type="button"
                      className={styles.approveBtn}
                      disabled={actionId === comment.id}
                      onClick={() => void toggleApproval(comment)}
                    >
                      <Check size={14} />
                      Approve
                    </button>
                  )}
                  <button
                    type="button"
                    className={styles.removeBtn}
                    disabled={actionId === comment.id}
                    onClick={() => void removeComment(comment.id)}
                  >
                    <Trash2 size={14} />
                    Remove
                  </button>
                </div>
              </article>
            ))}
          </div>

          {totalComments > COMMENTS_PER_PAGE && (
            <div className={styles.paginationWrap}>
              <Pagination
                currentPage={currentPage}
                totalPages={totalPages}
                onPageChange={setCurrentPage}
              />
            </div>
          )}
        </>
      )}
    </section>
  )
}