import React, { useCallback, useEffect, useRef, useState } from 'react'
import axios from 'axios'
import CommentForm from '../comments/CommentForm'
import ReactionBar from '../comments/ReactionBar'
import LevelBadge from '../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',
})

// ── Helpers ───────────────────────────────────────────────────────────────────

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)
}

/* ── Icons ─────────────────────────────────────────────────────────────────── */
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 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>
  )
}

/* ── Avatar ─────────────────────────────────────────────────────────────────── */
function Avatar({ user, size = 36 }) {
  if (user?.avatar_url) {
    return (
      <img
        src={user.avatar_url}
        alt={user.name || 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={(e) => {
          e.currentTarget.onerror = null
          e.currentTarget.src = 'https://files.skinbase.org/default/avatar_default.webp'
        }}
      />
    )
  }
  const initials = (user?.name || 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>
  )
}

// ── Reply item (nested under a parent) ────────────────────────────────────────

function ReplyItem({ reply, parentId, artworkId, isLoggedIn, onReplyPosted, depth = 1 }) {
  const user = reply.user
  const html = reply.rendered_content ?? null
  const plain = reply.content ?? reply.raw_content ?? ''
  const profileLabel = user?.display || user?.username || user?.name || 'Member'
  const replies = reply.replies || []

  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(`/api/comments/${reply.id}/reactions`)
      .then(({ data }) => setReactionTotals(data.totals ?? {}))
      .catch(() => {})
  }, [reply.id, reply.reactions])

  const handleReplyPosted = useCallback((newReply) => {
    // Reply posts under THIS reply's id as parent
    onReplyPosted?.(reply.id, newReply)
    setShowReplyForm(false)
    setShowAllReplies(true)
  }, [reply.id, onReplyPosted])

  // Show first 2 nested replies, expand to show all
  const visibleReplies = showAllReplies ? replies : replies.slice(0, 2)
  const hiddenReplyCount = replies.length - 2

  // Shrink avatar at deeper levels
  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>
        )}

        {/* Actions — Reply + React inline */}
        <div className="flex items-center gap-1.5 pt-1">
          {isLoggedIn && (
            <button
              type="button"
              onClick={() => setShowReplyForm(v => !v)}
              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>
          )}

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

        {/* Inline reply form */}
        {showReplyForm && (
          <div className="mt-2">
            <CommentForm
              artworkId={artworkId}
              parentId={reply.id}
              replyTo={profileLabel}
              onCancelReply={() => setShowReplyForm(false)}
              onPosted={handleReplyPosted}
              isLoggedIn={isLoggedIn}
              compact
            />
          </div>
        )}

        {/* Nested replies (tree) */}
        {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}
                  parentId={reply.id}
                  artworkId={artworkId}
                  isLoggedIn={isLoggedIn}
                  onReplyPosted={onReplyPosted}
                  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>
            )}
          </div>
        )}
      </div>
      </div>
    </li>
  )
}

// ── Single comment (top-level) ────────────────────────────────────────────────

function CommentItem({ comment, isLoggedIn, artworkId, onReplyPosted }) {
  const user = comment.user
  const html = comment.rendered_content ?? null
  const plain = comment.content ?? comment.raw_content ?? ''
  const profileLabel = user?.display || user?.username || user?.name || 'Member'
  const replies = comment.replies || []

  const flood = isFlood(plain)
  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(`/api/comments/${comment.id}/reactions`)
      .then(({ data }) => setReactionTotals(data.totals ?? {}))
      .catch(() => {})
  }, [comment.id, comment.reactions])

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

  // Show first 2 replies by default, expand to show all
  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">
          {/* Avatar */}
          {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>
          )}

          {/* Content */}
          <div className="min-w-0 flex-1 space-y-2">
            {/* Header */}
            <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>

            {/* Body */}
            <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" />
              )}
            </div>

            {flood && (
              <button
                type="button"
                onClick={() => setExpanded((e) => !e)}
                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>
            )}

            {/* Actions */}
            <div className="flex items-center gap-1.5 pt-0.5">
              {isLoggedIn && (
                <button
                  type="button"
                  onClick={() => setShowReplyForm(v => !v)}
                  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>
              )}

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

      {/* ── Replies thread ───────────────────────────────────────────────── */}
      {(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}
                    parentId={comment.id}
                    artworkId={artworkId}
                    isLoggedIn={isLoggedIn}
                    onReplyPosted={onReplyPosted}
                  />
                ))}
              </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>
              )}
            </>
          )}

          {/* Inline reply form */}
          {showReplyForm && (
            <div className={replies.length > 0 ? 'mt-3 pl-4 border-l-2 border-accent/20' : ''}>
              <CommentForm
                artworkId={artworkId}
                parentId={comment.id}
                replyTo={profileLabel}
                onCancelReply={() => setShowReplyForm(false)}
                onPosted={handleReplyPosted}
                isLoggedIn={isLoggedIn}
                compact
              />
            </div>
          )}
        </div>
      )}
    </li>
  )
}

// ── Skeleton ──────────────────────────────────────────────────────────────────

function Skeleton() {
  return (
    <div className="space-y-4">
      {Array.from({ length: 3 }).map((_, i) => (
        <div
          key={i}
          className="flex gap-3.5 rounded-2xl border border-white/[0.04] bg-white/[0.02] p-5 animate-pulse"
          style={{ animationDelay: `${i * 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>
  )
}

// ── Main export ───────────────────────────────────────────────────────────────

export default function ArtworkComments({
  artworkId,
  isLoggedIn = false,
  loginUrl = '/login',
}) {
  const [comments, setComments]   = useState([])
  const [loading, setLoading]     = useState(false)
  const [error, setError]         = useState(false)
  const [page, setPage]           = useState(1)
  const [lastPage, setLastPage]   = useState(1)
  const [total, setTotal]         = useState(0)
  const sectionRef                 = useRef(null)
  const requestRef                 = useRef(null)
  const generationRef              = useRef(0)

  const loadComments = useCallback(
    async (p = 1) => {
      if (!artworkId || requestRef.current) return
      const generation = generationRef.current
      const controller = new AbortController()
      requestRef.current = controller
      setLoading(true)
      setError(false)
      try {
        const { data } = await axios.get(`/api/artworks/${artworkId}/comments?page=${p}`, { signal: controller.signal })
        if (generation !== generationRef.current) return
        if (p === 1) {
          setComments(data.data ?? [])
        } else {
          setComments((prev) => [...prev, ...(data.data ?? [])])
        }
        setPage(data.meta?.current_page ?? p)
        setLastPage(data.meta?.last_page ?? 1)
        setTotal(data.meta?.total ?? 0)
      } catch {
        if (generation === generationRef.current && !controller.signal.aborted) setError(true)
      } finally {
        if (requestRef.current === controller) {
          requestRef.current = null
          if (generation === generationRef.current) setLoading(false)
        }
      }
    },
    [artworkId],
  )

  useEffect(() => {
    generationRef.current += 1
    requestRef.current?.abort()
    requestRef.current = null
    setComments([])
    setLoading(false)
    setError(false)
    setPage(1)
    setLastPage(1)
    setTotal(0)

    const section = sectionRef.current
    if (!section || !artworkId) return undefined

    let fallbackTimer = null
    let observer = null
    let established = false
    const trigger = () => {
      observer?.disconnect()
      if (!requestRef.current) loadComments(1)
    }

    if (typeof window !== 'undefined' && typeof window.IntersectionObserver === 'function') {
      try {
        observer = new window.IntersectionObserver((entries) => {
          if (entries.some((entry) => entry.isIntersecting)) trigger()
        }, { rootMargin: '350px 0px' })
        observer.observe(section)
        established = true
      } catch {
        observer?.disconnect()
      }
    }

    if (!established && typeof window !== 'undefined') {
      fallbackTimer = window.setTimeout(trigger, 1200)
    }

    return () => {
      observer?.disconnect()
      if (fallbackTimer !== null && typeof window !== 'undefined') window.clearTimeout(fallbackTimer)
      requestRef.current?.abort()
      requestRef.current = null
    }
  }, [artworkId, loadComments])

  // New top-level comment posted
  const handlePosted = useCallback((newComment) => {
    // Ensure it has a replies array
    const comment = { ...newComment, replies: newComment.replies || [] }
    setComments((prev) => [comment, ...prev])
    setTotal((t) => t + 1)
  }, [])

  // Reply posted under a parent comment (works at any nesting depth)
  const handleReplyPosted = useCallback((parentId, newReply) => {
    // Recursively find the parent node and append the reply
    const insertReply = (nodes) =>
      nodes.map((c) => {
        if (c.id === parentId) {
          return { ...c, replies: [...(c.replies || []), { ...newReply, replies: [] }] }
        }
        if (c.replies?.length) {
          return { ...c, replies: insertReply(c.replies) }
        }
        return c
      })

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

  return (
    <section ref={sectionRef} aria-label="Comments" className="space-y-6">
      {/* Section header */}
      <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>
        )}
      </div>

      {/* Comment list */}
      {loading && comments.length === 0 ? (
        <Skeleton />
      ) : error && comments.length === 0 ? (
        <div className="rounded-2xl border border-dashed border-white/[0.08] bg-white/[0.015] px-6 py-8 text-center">
          <p className="text-sm font-medium text-white/45">Comments could not be loaded.</p>
          <button type="button" onClick={() => loadComments(1)} className="mt-3 rounded-full border border-white/[0.1] px-4 py-2 text-xs font-medium text-white/65 hover:bg-white/[0.06]">Try again</button>
        </div>
      ) : 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}
                artworkId={artworkId}
                isLoggedIn={isLoggedIn}
                onReplyPosted={handleReplyPosted}
              />
            ))}
          </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>
          )}
        </>
      )}

      {/* Comment form — after all comments */}
      {artworkId && (
        <CommentForm
          artworkId={artworkId}
          onPosted={handlePosted}
          isLoggedIn={isLoggedIn}
          loginUrl={loginUrl}
        />
      )}
    </section>
  )
}