SkinbaseNova/resources/js/components/comments/ReactionBar.jsx

import React, { useCallback, useEffect, useRef, useState } from 'react'
import axios from 'axios'

/* ── Reaction definitions ────────────────────────────────────────────────── */
const REACTIONS = [
  { slug: 'thumbs_up', emoji: '👍', label: 'Like' },
  { slug: 'heart',     emoji: '❤️', label: 'Love' },
  { slug: 'fire',      emoji: '🔥', label: 'Fire' },
  { slug: 'laugh',     emoji: '😂', label: 'Haha' },
  { slug: 'clap',      emoji: '👏', label: 'Clap' },
  { slug: 'wow',       emoji: '😮', label: 'Wow' },
]

/* ── Small heart outline icon for the trigger ─────────────────────────────── */
function HeartOutlineIcon({ className }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
    </svg>
  )
}

/**
 * Facebook-style reaction bar.
 *
 * - Compact trigger button (heart icon or the user's reaction)
 * - Floating picker that appears on hover/click with scale animation
 * - Summary row showing unique reaction emoji + total count
 *
 * Props:
 *   entityType    'artwork' | 'comment'
 *   entityId      number
 *   initialTotals Record<slug, { emoji, label, count, mine }>
 *   isLoggedIn    boolean
 */
export default function ReactionBar({ entityType, entityId, initialTotals = {}, isLoggedIn = false }) {
  const [totals, setTotals] = useState(initialTotals)
  const [loading, setLoading] = useState(null)
  const [pickerOpen, setPickerOpen] = useState(false)
  const containerRef = useRef(null)
  const hoverTimeout = useRef(null)

  const endpoint =
    entityType === 'artwork'
      ? `/api/artworks/${entityId}/reactions`
      : `/api/comments/${entityId}/reactions`

  // Close picker when clicking outside
  useEffect(() => {
    if (!pickerOpen) return
    const handler = (e) => {
      if (containerRef.current && !containerRef.current.contains(e.target)) {
        setPickerOpen(false)
      }
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [pickerOpen])

  const toggle = useCallback(
    async (slug) => {
      if (!isLoggedIn) {
        window.location.href = '/login'
        return
      }
      if (loading) return
      setLoading(slug)
      setPickerOpen(false)

      // Optimistic update
      setTotals((prev) => {
        const entry = prev[slug] ?? { count: 0, mine: false, emoji: REACTIONS.find(r => r.slug === slug)?.emoji, label: REACTIONS.find(r => r.slug === slug)?.label }
        return {
          ...prev,
          [slug]: {
            ...entry,
            count: entry.mine ? Math.max(0, entry.count - 1) : entry.count + 1,
            mine: !entry.mine,
          },
        }
      })

      try {
        const { data } = await axios.post(endpoint, { reaction: slug })
        setTotals(data.totals)
      } catch {
        setTotals((prev) => {
          const entry = prev[slug] ?? { count: 0, mine: false }
          return {
            ...prev,
            [slug]: {
              ...entry,
              count: entry.mine ? Math.max(0, entry.count - 1) : entry.count + 1,
              mine: !entry.mine,
            },
          }
        })
      } finally {
        setLoading(null)
      }
    },
    [endpoint, isLoggedIn, loading],
  )

  // Compute summary data
  const entries = Object.entries(totals)
  const activeReactions = entries.filter(([, info]) => info.count > 0)
  const totalCount = activeReactions.reduce((sum, [, info]) => sum + info.count, 0)
  const myReaction = entries.find(([, info]) => info.mine)?.[0] ?? null
  const myReactionData = myReaction ? REACTIONS.find(r => r.slug === myReaction) : null

  // Hover handlers for desktop — open on hover with a small delay
  const onMouseEnter = () => {
    clearTimeout(hoverTimeout.current)
    hoverTimeout.current = setTimeout(() => setPickerOpen(true), 200)
  }
  const onMouseLeave = () => {
    clearTimeout(hoverTimeout.current)
    hoverTimeout.current = setTimeout(() => setPickerOpen(false), 400)
  }

  return (
    <div
      ref={containerRef}
      className="flex items-center gap-2"
      onMouseLeave={onMouseLeave}
    >
      {/* ── Trigger button ──────────────────────────────────────────── */}
      <div className="relative" onMouseEnter={onMouseEnter}>
        <button
          type="button"
          onClick={() => {
            if (myReaction) {
              // Quick-toggle: remove own reaction
              toggle(myReaction)
            } else {
              // Quick-like with thumbs_up
              toggle('thumbs_up')
            }
          }}
          className={[
            'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium transition-all duration-200',
            'focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50',
            myReaction
              ? 'text-accent'
              : 'text-white/40 hover:text-white/70',
          ].join(' ')}
          aria-label={myReaction ? `You reacted with ${myReactionData?.label}. Click to remove.` : 'React to this comment'}
        >
          {myReaction ? (
            <span className="text-base leading-none">{myReactionData?.emoji}</span>
          ) : (
            <HeartOutlineIcon className="h-4 w-4" />
          )}
          <span>{myReaction ? myReactionData?.label : 'React'}</span>
        </button>

        {/* ── Floating picker ─────────────────────────────────────── */}
        {pickerOpen && (
          <div
            className="absolute bottom-full left-0 mb-2 z-[200] animate-in fade-in slide-in-from-bottom-2 duration-200"
            onMouseEnter={() => { clearTimeout(hoverTimeout.current) }}
            onMouseLeave={onMouseLeave}
          >
            <div className="flex items-center gap-0.5 rounded-full bg-nova-800/95 border border-white/[0.1] px-2 py-1.5 shadow-xl shadow-black/40 backdrop-blur-xl">
              {REACTIONS.map((r, i) => {
                const isActive = totals[r.slug]?.mine
                return (
                  <button
                    key={r.slug}
                    type="button"
                    onClick={() => toggle(r.slug)}
                    disabled={loading === r.slug}
                    aria-label={`${r.label}${isActive ? ' (selected)' : ''}`}
                    className={[
                      'group/reaction relative flex items-center justify-center w-9 h-9 rounded-full transition-all duration-200',
                      'hover:bg-white/[0.08] hover:scale-125 hover:-translate-y-1',
                      'focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50',
                      'disabled:opacity-50',
                      isActive ? 'bg-white/[0.1] scale-110' : '',
                    ].join(' ')}
                    style={{ animationDelay: `${i * 30}ms` }}
                    title={r.label}
                  >
                    <span className="text-xl leading-none transition-transform duration-150 group-hover/reaction:scale-110">
                      {r.emoji}
                    </span>
                    {/* Tooltip */}
                    <span className="pointer-events-none absolute -top-7 left-1/2 -translate-x-1/2 rounded bg-black/80 px-1.5 py-0.5 text-[10px] font-medium text-white/90 opacity-0 transition-opacity group-hover/reaction:opacity-100 whitespace-nowrap">
                      {r.label}
                    </span>
                  </button>
                )
              })}
            </div>
          </div>
        )}
      </div>

      {/* ── Summary: stacked emoji + count ───────────────────────── */}
      {totalCount > 0 && (
        <button
          type="button"
          onClick={() => setPickerOpen(v => !v)}
          className="inline-flex items-center gap-1.5 rounded-full px-1.5 py-0.5 transition-colors hover:bg-white/[0.06] group/summary"
          aria-label={`${totalCount} reaction${totalCount !== 1 ? 's' : ''}`}
        >
          {/* Stacked emoji circles (Facebook-style, max 3) */}
          <span className="inline-flex items-center -space-x-1">
            {activeReactions.slice(0, 3).map(([slug, info], i) => (
              <span
                key={slug}
                className="relative flex items-center justify-center w-5 h-5 rounded-full bg-nova-700 border border-nova-800 text-xs leading-none"
                style={{ zIndex: 3 - i }}
                title={info.label}
              >
                {info.emoji}
              </span>
            ))}
          </span>
          <span className="text-xs font-medium tabular-nums text-white/50 group-hover/summary:text-white/70 transition-colors">
            {totalCount}
          </span>
        </button>
      )}
    </div>
  )
}