import React, { useCallback, useEffect, useRef, useState } from 'react'
import { createRoot } from 'react-dom/client'
import axios from 'axios'
import CommentForm from '../../components/comments/CommentForm'
import ReactionBar from '../../components/comments/ReactionBar'
import LevelBadge from '../../components/xp/LevelBadge'
import { isFlood } from '../../utils/emojiFlood'

const ABSOLUTE_DATE_FORMATTER = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
  timeZone: 'UTC',
})

const ABSOLUTE_DATE_TIME_FORMATTER = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: '2-digit',
  timeZone: 'UTC',
})

function formatAbsoluteDate(value) {
  if (!value) return ''

  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return ''

  return ABSOLUTE_DATE_FORMATTER.format(date)
}

function formatAbsoluteDateTime(value) {
  if (!value) return ''

  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return ''

  return ABSOLUTE_DATE_TIME_FORMATTER.format(date)
}

function formatCommentTime(primaryLabel, createdAt) {
  return primaryLabel || formatAbsoluteDate(createdAt)
}

function ReplyIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-3.5 w-3.5">
      <path fillRule="evenodd" d="M7.793 2.232a.75.75 0 0 1-.025 1.06L3.622 7.25h10.003a5.375 5.375 0 0 1 0 10.75H10.75a.75.75 0 0 1 0-1.5h2.875a3.875 3.875 0 0 0 0-7.75H3.622l4.146 3.957a.75.75 0 0 1-1.036 1.085l-5.5-5.25a.75.75 0 0 1 0-1.085l5.5-5.25a.75.75 0 0 1 1.06.025Z" clipRule="evenodd" />
    </svg>
  )
}

function TrashIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-3.5 w-3.5">
      <path fillRule="evenodd" d="M7.5 2.75A1.75 1.75 0 0 0 5.75 4.5v.25H3.5a.75.75 0 0 0 0 1.5h.54l.853 9.1A2.25 2.25 0 0 0 7.133 17.5h5.734a2.25 2.25 0 0 0 2.24-2.15l.853-9.1h.54a.75.75 0 0 0 0-1.5h-2.25V4.5A1.75 1.75 0 0 0 12.5 2.75h-5Zm5.25 2V4.5a.25.25 0 0 0-.25-.25h-5a.25.25 0 0 0-.25.25v.25h5.5Zm-4 3a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0V8.5a.75.75 0 0 1 .75-.75Zm3.25.75a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0V8.5Z" clipRule="evenodd" />
    </svg>
  )
}

function ChatBubbleIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.2} stroke="currentColor" className="h-10 w-10 text-white/15">
      <path strokeLinecap="round" strokeLinejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
    </svg>
  )
}

function ChevronDownIcon({ className }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className={className}>
      <path fillRule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clipRule="evenodd" />
    </svg>
  )
}

function Avatar({ user, size = 36 }) {
  if (user?.avatar_url) {
    return (
      <img
        src={user.avatar_url}
        alt={user.display || user.username || ''}
        width={size}
        height={size}
        className="rounded-full object-cover shrink-0 ring-1 ring-white/10"
        style={{ width: size, height: size }}
        loading="lazy"
        onError={(event) => {
          event.currentTarget.onerror = null
          event.currentTarget.src = 'https://files.skinbase.org/default/avatar_default.webp'
        }}
      />
    )
  }

  const initials = (user?.display || user?.username || '?').slice(0, 1).toUpperCase()

  return (
    <span
      className="flex items-center justify-center rounded-full bg-gradient-to-br from-nova-600 to-nova-800 text-sm font-bold text-white/90 shrink-0 ring-1 ring-white/10"
      style={{ width: size, height: size }}
    >
      {initials}
    </span>
  )
}

function DeleteButton({ onDelete, pending = false }) {
  return (
    <button
      type="button"
      onClick={onDelete}
      disabled={pending}
      className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium uppercase tracking-wider text-white/35 transition-all duration-200 hover:bg-rose-500/10 hover:text-rose-100 disabled:pointer-events-none disabled:opacity-40"
    >
      <TrashIcon />
      Remove
    </button>
  )
}

function ReplyItem({ reply, articleId, isLoggedIn, onReplyPosted, onDelete, deletePending = false, depth = 1 }) {
  const user = reply.user
  const html = reply.rendered_content ?? null
  const plain = reply.raw_content ?? ''
  const profileLabel = user?.display || user?.username || 'Member'
  const replies = reply.replies || []
  const reactionEndpoint = `/api/news/comments/${reply.id}/reactions`

  const [showReplyForm, setShowReplyForm] = useState(false)
  const [showAllReplies, setShowAllReplies] = useState(false)
  const [reactionTotals, setReactionTotals] = useState(reply.reactions ?? {})

  useEffect(() => {
    if (reply.reactions || !reply.id) return

    axios
      .get(reactionEndpoint)
      .then(({ data }) => setReactionTotals(data.totals ?? {}))
      .catch(() => {})
  }, [reply.id, reply.reactions, reactionEndpoint])

  const handleReplyPosted = useCallback((newReply) => {
    onReplyPosted?.(reply.id, newReply)
    setShowReplyForm(false)
    setShowAllReplies(true)
  }, [onReplyPosted, reply.id])

  const visibleReplies = showAllReplies ? replies : replies.slice(0, 2)
  const hiddenReplyCount = replies.length - 2
  const avatarSize = depth >= 3 ? 22 : 28

  return (
    <li className="rounded-lg bg-white/[0.02] px-3 py-2.5" id={`comment-${reply.id}`}>
      <div className="flex gap-2.5">
        {user?.profile_url ? (
          <a href={user.profile_url} className="shrink-0 mt-0.5" tabIndex={-1}>
            <Avatar user={user} size={avatarSize} />
          </a>
        ) : (
          <span className="shrink-0 mt-0.5"><Avatar user={user} size={avatarSize} /></span>
        )}

        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2 flex-wrap">
            {user?.profile_url ? (
              <a href={user.profile_url} className="text-[12px] font-semibold text-white/90 hover:text-accent transition-colors">
                {profileLabel}
              </a>
            ) : (
              <span className="text-[12px] font-semibold text-white/90">{profileLabel}</span>
            )}
            <LevelBadge level={user?.level} rank={user?.rank} compact className="shrink-0" />
            <span className="text-white/15" aria-hidden="true">·</span>
            <time
              dateTime={reply.created_at}
              title={formatAbsoluteDateTime(reply.created_at)}
              className="text-[10px] font-medium tracking-wide text-white/25 uppercase"
            >
              {formatCommentTime(reply.time_ago, reply.created_at)}
            </time>
          </div>

          {html ? (
            <div
              className="mt-1 text-[12.5px] leading-[1.65] text-white/70 prose prose-invert prose-sm max-w-none prose-p:my-1 prose-a:text-sky-400 prose-a:no-underline hover:prose-a:underline prose-code:bg-white/[0.07] prose-code:px-1 prose-code:py-0.5 prose-code:rounded-md prose-code:text-xs"
              dangerouslySetInnerHTML={{ __html: html }}
            />
          ) : (
            <p className="mt-1 text-[12.5px] leading-[1.65] text-white/70 whitespace-pre-line break-words">{plain}</p>
          )}

          <div className="flex flex-wrap items-center gap-1.5 pt-1">
            {isLoggedIn && (
              <button
                type="button"
                onClick={() => setShowReplyForm((value) => !value)}
                className={[
                  'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[10px] font-medium uppercase tracking-wider transition-all duration-200 focus:outline-none',
                  showReplyForm ? 'bg-accent/10 text-accent' : 'text-white/35 hover:bg-white/[0.06] hover:text-white/65',
                ].join(' ')}
              >
                <ReplyIcon />
                Reply
              </button>
            )}

            {reply.can_delete ? <DeleteButton onDelete={() => onDelete(reply.id)} pending={deletePending} /> : null}

            <ReactionBar
              entityType="comment"
              entityId={reply.id}
              initialTotals={reactionTotals}
              isLoggedIn={isLoggedIn}
              endpoint={reactionEndpoint}
            />
          </div>

          {showReplyForm ? (
            <div className="mt-2">
              <CommentForm
                artworkId={articleId}
                submitUrl={`/api/news/articles/${articleId}/comments`}
                contentField="content"
                maxLength={4000}
                placeholder="Share your thoughts about this article…"
                onPosted={handleReplyPosted}
                parentId={reply.id}
                replyTo={profileLabel}
                onCancelReply={() => setShowReplyForm(false)}
                isLoggedIn={isLoggedIn}
                compact
              />
            </div>
          ) : null}

          {replies.length > 0 ? (
            <div className="mt-2">
              <ul className={`space-y-1 pl-3 border-l-2 ${depth >= 3 ? 'border-white/[0.03]' : 'border-white/[0.05]'}`}>
                {visibleReplies.map((child) => (
                  <ReplyItem
                    key={child.id}
                    reply={child}
                    articleId={articleId}
                    isLoggedIn={isLoggedIn}
                    onReplyPosted={onReplyPosted}
                    onDelete={onDelete}
                    deletePending={deletePending && child.id === reply.id}
                    depth={depth + 1}
                  />
                ))}
              </ul>

              {!showAllReplies && hiddenReplyCount > 0 ? (
                <button
                  type="button"
                  onClick={() => setShowAllReplies(true)}
                  className="mt-1.5 ml-3 inline-flex items-center gap-1 text-[10px] font-medium text-accent/70 transition-colors hover:text-accent"
                >
                  <ChevronDownIcon className="h-3 w-3" />
                  Show {hiddenReplyCount} more {hiddenReplyCount === 1 ? 'reply' : 'replies'}
                </button>
              ) : null}
            </div>
          ) : null}
        </div>
      </div>
    </li>
  )
}

function CommentItem({ comment, isLoggedIn, articleId, onReplyPosted, onDelete, deletePending = false }) {
  const user = comment.user
  const html = comment.rendered_content ?? null
  const plain = comment.raw_content ?? ''
  const profileLabel = user?.display || user?.username || 'Member'
  const replies = comment.replies || []
  const flood = isFlood(plain)
  const reactionEndpoint = `/api/news/comments/${comment.id}/reactions`

  const [expanded, setExpanded] = useState(!flood)
  const [showReplyForm, setShowReplyForm] = useState(false)
  const [showAllReplies, setShowAllReplies] = useState(false)
  const [reactionTotals, setReactionTotals] = useState(comment.reactions ?? {})

  useEffect(() => {
    if (comment.reactions || !comment.id) return

    axios
      .get(reactionEndpoint)
      .then(({ data }) => setReactionTotals(data.totals ?? {}))
      .catch(() => {})
  }, [comment.id, comment.reactions, reactionEndpoint])

  const handleReplyPosted = useCallback((newReply) => {
    onReplyPosted?.(comment.id, newReply)
    setShowReplyForm(false)
    setShowAllReplies(true)
  }, [comment.id, onReplyPosted])

  const visibleReplies = showAllReplies ? replies : replies.slice(0, 2)
  const hiddenReplyCount = replies.length - 2

  return (
    <li
      id={`comment-${comment.id}`}
      className="group/comment rounded-2xl border border-white/[0.06] bg-white/[0.03] shadow-[0_1px_3px_rgba(0,0,0,.25)] backdrop-blur-sm transition-all duration-200 hover:border-white/[0.1] hover:bg-white/[0.05]"
    >
      <div className="p-4 sm:p-5">
        <div className="flex gap-3.5">
          {user?.profile_url ? (
            <a href={user.profile_url} className="shrink-0 mt-0.5" tabIndex={-1} aria-hidden="true">
              <Avatar user={user} size={38} />
            </a>
          ) : (
            <span className="shrink-0 mt-0.5"><Avatar user={user} size={38} /></span>
          )}

          <div className="min-w-0 flex-1 space-y-2">
            <div className="flex items-center gap-2 flex-wrap">
              {user?.profile_url ? (
                <a href={user.profile_url} className="text-[13px] font-semibold text-white/95 transition-colors hover:text-accent">
                  {profileLabel}
                </a>
              ) : (
                <span className="text-[13px] font-semibold text-white/95">{profileLabel}</span>
              )}
              <LevelBadge level={user?.level} rank={user?.rank} compact className="shrink-0" />
              <span className="text-white/15" aria-hidden="true">·</span>
              <time
                dateTime={comment.created_at}
                title={formatAbsoluteDateTime(comment.created_at)}
                className="text-[11px] font-medium tracking-wide text-white/30 uppercase"
              >
                {formatCommentTime(comment.time_ago, comment.created_at)}
              </time>
            </div>

            <div className={!expanded ? 'overflow-hidden relative' : undefined} style={!expanded ? { maxHeight: '5em' } : undefined}>
              {html ? (
                <div
                  className="text-[13px] leading-[1.7] text-white/80 prose prose-invert prose-sm max-w-none prose-p:my-1.5 prose-a:text-sky-400 prose-a:no-underline hover:prose-a:underline prose-code:bg-white/[0.07] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:text-xs prose-code:font-normal"
                  dangerouslySetInnerHTML={{ __html: html }}
                />
              ) : (
                <p className="text-[13px] leading-[1.7] text-white/80 whitespace-pre-line break-words">{plain}</p>
              )}

              {flood && !expanded ? (
                <div className="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-nova-900/95 to-transparent" aria-hidden="true" />
              ) : null}
            </div>

            {flood ? (
              <button
                type="button"
                onClick={() => setExpanded((value) => !value)}
                className="rounded-md px-2 py-0.5 text-xs font-medium text-sky-400 transition-all hover:bg-sky-500/10 hover:text-sky-300"
                aria-expanded={expanded}
              >
                {expanded ? '↑ Collapse' : '↓ Show full comment'}
              </button>
            ) : null}

            <div className="flex flex-wrap items-center gap-1.5 pt-0.5">
              {isLoggedIn ? (
                <button
                  type="button"
                  onClick={() => setShowReplyForm((value) => !value)}
                  className={[
                    'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-[11px] font-medium uppercase tracking-wider transition-all duration-200 focus:outline-none',
                    showReplyForm ? 'bg-accent/10 text-accent' : 'text-white/40 hover:bg-white/[0.06] hover:text-white/70',
                  ].join(' ')}
                >
                  <ReplyIcon />
                  Reply
                </button>
              ) : null}

              {comment.can_delete ? <DeleteButton onDelete={() => onDelete(comment.id)} pending={deletePending} /> : null}

              <ReactionBar
                entityType="comment"
                entityId={comment.id}
                initialTotals={reactionTotals}
                isLoggedIn={isLoggedIn}
                endpoint={reactionEndpoint}
              />
            </div>
          </div>
        </div>
      </div>

      {(replies.length > 0 || showReplyForm) ? (
        <div className="border-t border-white/[0.04] bg-white/[0.01] px-4 pb-4 pt-3 sm:px-5 sm:pb-5">
          {replies.length > 0 ? (
            <>
              <ul className="space-y-1 pl-4 border-l-2 border-white/[0.06]">
                {visibleReplies.map((reply) => (
                  <ReplyItem
                    key={reply.id}
                    reply={reply}
                    articleId={articleId}
                    isLoggedIn={isLoggedIn}
                    onReplyPosted={onReplyPosted}
                    onDelete={onDelete}
                    deletePending={deletePending && reply.id === comment.id}
                  />
                ))}
              </ul>

              {!showAllReplies && hiddenReplyCount > 0 ? (
                <button
                  type="button"
                  onClick={() => setShowAllReplies(true)}
                  className="mt-2 ml-4 inline-flex items-center gap-1 text-[11px] font-medium text-accent/70 transition-colors hover:text-accent"
                >
                  <ChevronDownIcon className="h-3.5 w-3.5" />
                  Show {hiddenReplyCount} more {hiddenReplyCount === 1 ? 'reply' : 'replies'}
                </button>
              ) : null}
            </>
          ) : null}

          {showReplyForm ? (
            <div className={replies.length > 0 ? 'mt-3 pl-4 border-l-2 border-accent/20' : ''}>
              <CommentForm
                artworkId={articleId}
                submitUrl={`/api/news/articles/${articleId}/comments`}
                contentField="content"
                maxLength={4000}
                placeholder="Share your thoughts about this article…"
                onPosted={handleReplyPosted}
                parentId={comment.id}
                replyTo={profileLabel}
                onCancelReply={() => setShowReplyForm(false)}
                isLoggedIn={isLoggedIn}
                compact
              />
            </div>
          ) : null}
        </div>
      ) : null}
    </li>
  )
}

function Skeleton() {
  return (
    <div className="space-y-4">
      {Array.from({ length: 3 }).map((_, index) => (
        <div
          key={index}
          className="flex gap-3.5 rounded-2xl border border-white/[0.04] bg-white/[0.02] p-5 animate-pulse"
          style={{ animationDelay: `${index * 120}ms` }}
        >
          <div className="w-[38px] h-[38px] rounded-full bg-white/[0.06] shrink-0" />
          <div className="flex-1 space-y-3 pt-1">
            <div className="flex gap-2.5">
              <div className="h-3 bg-white/[0.06] rounded-full w-24" />
              <div className="h-3 bg-white/[0.04] rounded-full w-14" />
            </div>
            <div className="space-y-2">
              <div className="h-3 bg-white/[0.05] rounded-full w-full" />
              <div className="h-3 bg-white/[0.04] rounded-full w-4/5" />
              <div className="h-3 bg-white/[0.03] rounded-full w-2/5" />
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

function NewsComments({ articleId, isLoggedIn = false, loginUrl = '/login' }) {
  const [comments, setComments] = useState([])
  const [loading, setLoading] = useState(false)
  const [page, setPage] = useState(1)
  const [lastPage, setLastPage] = useState(1)
  const [total, setTotal] = useState(0)
  const [deletingId, setDeletingId] = useState(null)
  const initialized = useRef(false)

  const loadComments = useCallback(async (nextPage = 1) => {
    if (!articleId) return

    setLoading(true)

    try {
      const { data } = await axios.get(`/api/news/articles/${articleId}/comments?page=${nextPage}`)

      if (nextPage === 1) {
        setComments(data.data ?? [])
      } else {
        setComments((current) => [...current, ...(data.data ?? [])])
      }

      setPage(data.meta?.current_page ?? nextPage)
      setLastPage(data.meta?.last_page ?? 1)
      setTotal(data.meta?.total ?? 0)
    } catch {
      // Keep the server-rendered fallback in place if the API is unavailable.
    } finally {
      setLoading(false)
    }
  }, [articleId])

  useEffect(() => {
    if (initialized.current) return
    initialized.current = true
    loadComments(1)
  }, [loadComments])

  const handlePosted = useCallback((newComment) => {
    const comment = { ...newComment, replies: newComment.replies || [] }
    setComments((current) => [comment, ...current])
    setTotal((current) => current + 1)
  }, [])

  const handleReplyPosted = useCallback((parentId, newReply) => {
    const insertReply = (nodes) => nodes.map((comment) => {
      if (comment.id === parentId) {
        return { ...comment, replies: [...(comment.replies || []), { ...newReply, replies: [] }] }
      }

      if (comment.replies?.length) {
        return { ...comment, replies: insertReply(comment.replies) }
      }

      return comment
    })

    setComments((current) => insertReply(current))
    setTotal((current) => current + 1)
  }, [])

  const handleDelete = useCallback(async (commentId) => {
    if (!commentId || deletingId) return

    setDeletingId(commentId)

    try {
      await axios.delete(`/api/news/articles/${articleId}/comments/${commentId}`)
      await loadComments(1)
    } catch {
      // Preserve the current state if deletion fails.
    } finally {
      setDeletingId(null)
    }
  }, [articleId, deletingId, loadComments])

  return (
    <section aria-label="Comments" className="space-y-6">
      <div className="flex items-center gap-3">
        <h2 className="text-lg font-semibold tracking-tight text-white sm:text-xl">Comments</h2>
        {total > 0 ? (
          <span className="inline-flex items-center rounded-full bg-white/[0.06] px-2.5 py-0.5 text-xs font-medium tabular-nums text-white/50">
            {total}
          </span>
        ) : null}
      </div>

      {loading && comments.length === 0 ? (
        <Skeleton />
      ) : comments.length === 0 ? (
        <div className="flex flex-col items-center gap-3 rounded-2xl border border-dashed border-white/[0.08] bg-white/[0.015] px-6 py-10 text-center">
          <ChatBubbleIcon />
          <p className="text-sm font-medium text-white/40">No comments yet</p>
          <p className="text-xs text-white/25">Be the first to share your thoughts.</p>
        </div>
      ) : (
        <>
          <ul className="space-y-3 sm:space-y-4">
            {comments.map((comment) => (
              <CommentItem
                key={comment.id}
                comment={comment}
                articleId={articleId}
                isLoggedIn={isLoggedIn}
                onReplyPosted={handleReplyPosted}
                onDelete={handleDelete}
                deletePending={deletingId === comment.id}
              />
            ))}
          </ul>

          {page < lastPage ? (
            <div className="flex justify-center pt-3">
              <button
                type="button"
                disabled={loading}
                onClick={() => loadComments(page + 1)}
                className="group relative rounded-full border border-white/[0.08] bg-white/[0.03] px-6 py-2.5 text-sm font-medium text-white/50 transition-all duration-200 hover:border-white/[0.15] hover:bg-white/[0.06] hover:text-white/80 hover:shadow-lg hover:shadow-black/20 disabled:opacity-40 disabled:pointer-events-none"
              >
                {loading ? (
                  <span className="inline-flex items-center gap-2">
                    <svg className="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                    </svg>
                    Loading…
                  </span>
                ) : 'Load more comments'}
              </button>
            </div>
          ) : null}
        </>
      )}

      {articleId ? (
        <CommentForm
          artworkId={articleId}
          submitUrl={`/api/news/articles/${articleId}/comments`}
          contentField="content"
          maxLength={4000}
          placeholder="Share your thoughts about this article…"
          onPosted={handlePosted}
          isLoggedIn={isLoggedIn}
          loginUrl={loginUrl}
        />
      ) : null}
    </section>
  )
}

if (typeof document !== 'undefined') {
  const mountEl = document.getElementById('news-comments-root')
  const propsEl = document.getElementById('news-comments-props')

  if (mountEl && propsEl) {
    let props = {}

    try {
      props = JSON.parse(propsEl.textContent || '{}')
    } catch {
      props = {}
    }

    createRoot(mountEl).render(<NewsComments {...props} />)
  }
}

export default NewsComments