SkinbaseNova/resources/js/components/artwork/ArtworkAwards.jsx

import React, { useState, useCallback } from 'react'

const MEDALS = [
  { key: 'gold',   label: 'Gold',   emoji: '🥇', weight: 3 },
  { key: 'silver', label: 'Silver', emoji: '🥈', weight: 2 },
  { key: 'bronze', label: 'Bronze', emoji: '🥉', weight: 1 },
]

export default function ArtworkAwards({ artwork, initialAwards = null, isAuthenticated = false }) {
  const artworkId = artwork?.id

  const [awards, setAwards] = useState({
    gold:   initialAwards?.gold   ?? 0,
    silver: initialAwards?.silver ?? 0,
    bronze: initialAwards?.bronze ?? 0,
    score:  initialAwards?.score  ?? 0,
  })
  const [viewerAward, setViewerAward] = useState(initialAwards?.viewer_award ?? null)
  const [loading, setLoading] = useState(null) // which medal is pending
  const [error, setError] = useState(null)

  const csrfToken = typeof document !== 'undefined'
    ? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
    : null

  const apiFetch = useCallback(async (method, body = null) => {
    const res = await fetch(`/api/artworks/${artworkId}/award`, {
      method,
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': csrfToken || '',
        'Accept': 'application/json',
      },
      credentials: 'same-origin',
      body: body ? JSON.stringify(body) : undefined,
    })

    if (!res.ok) {
      const data = await res.json().catch(() => ({}))
      throw new Error(data?.message || data?.errors?.medal?.[0] || 'Request failed')
    }

    return res.json()
  }, [artworkId, csrfToken])

  const applyServerResponse = useCallback((data) => {
    if (data?.awards) {
      setAwards({
        gold:   data.awards.gold   ?? 0,
        silver: data.awards.silver ?? 0,
        bronze: data.awards.bronze ?? 0,
        score:  data.awards.score  ?? 0,
      })
    }
    setViewerAward(data?.viewer_award ?? null)
  }, [])

  const handleMedalClick = useCallback(async (medal) => {
    if (!isAuthenticated) return
    if (loading) return

    setError(null)

    // Optimistic update
    const prevAwards   = { ...awards }
    const prevViewer   = viewerAward

    const delta = (m) => {
      const weight = MEDALS.find(x => x.key === m)?.weight ?? 0
      return weight
    }

    if (viewerAward === medal) {
      // Undo: remove award
      setAwards(a => ({
        ...a,
        [medal]: Math.max(0, a[medal] - 1),
        score:   Math.max(0, a.score - delta(medal)),
      }))
      setViewerAward(null)

      setLoading(medal)
      try {
        const data = await apiFetch('DELETE')
        applyServerResponse(data)
      } catch (e) {
        setAwards(prevAwards)
        setViewerAward(prevViewer)
        setError(e.message)
      } finally {
        setLoading(null)
      }
    } else if (viewerAward) {
      // Change: swap medals
      const prev = viewerAward
      setAwards(a => ({
        ...a,
        [prev]:  Math.max(0, a[prev] - 1),
        [medal]: a[medal] + 1,
        score:   a.score - delta(prev) + delta(medal),
      }))
      setViewerAward(medal)

      setLoading(medal)
      try {
        const data = await apiFetch('PUT', { medal })
        applyServerResponse(data)
      } catch (e) {
        setAwards(prevAwards)
        setViewerAward(prevViewer)
        setError(e.message)
      } finally {
        setLoading(null)
      }
    } else {
      // New award
      setAwards(a => ({
        ...a,
        [medal]: a[medal] + 1,
        score:   a.score + delta(medal),
      }))
      setViewerAward(medal)

      setLoading(medal)
      try {
        const data = await apiFetch('POST', { medal })
        applyServerResponse(data)
      } catch (e) {
        setAwards(prevAwards)
        setViewerAward(prevViewer)
        setError(e.message)
      } finally {
        setLoading(null)
      }
    }
  }, [isAuthenticated, loading, awards, viewerAward, apiFetch, applyServerResponse])

  return (
    <div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5">
      <h2 className="text-xs font-semibold uppercase tracking-wider text-white/30">Awards</h2>

      {error && (
        <p className="mt-2 text-xs text-red-400">{error}</p>
      )}

      <div className="mt-4 flex flex-col gap-3 sm:flex-row">
        {MEDALS.map(({ key, label, emoji }) => {
          const isActive  = viewerAward === key
          const isPending = loading === key

          return (
            <button
              key={key}
              type="button"
              disabled={!isAuthenticated || loading !== null}
              onClick={() => handleMedalClick(key)}
              title={!isAuthenticated ? 'Sign in to award' : isActive ? `Remove ${label} award` : `Award ${label}`}
              className={[
                'inline-flex min-h-11 flex-1 flex-col items-center justify-center gap-1 rounded-lg border px-3 py-2 text-sm transition-all',
                isActive
                  ? 'border-accent/40 bg-accent/10 font-semibold text-accent shadow-lg shadow-accent/10'
                  : 'border-white/[0.08] bg-white/[0.03] text-white/70 hover:bg-white/[0.06] hover:border-white/[0.12]',
                (!isAuthenticated || loading !== null) && 'cursor-not-allowed opacity-60',
              ].filter(Boolean).join(' ')}
            >
              <span className="text-xl leading-none" aria-hidden="true">
                {isPending ? '…' : emoji}
              </span>
              <span className="text-xs font-medium leading-none">{label}</span>
              <span className="text-xs text-soft tabular-nums">
                {awards[key]}
              </span>
            </button>
          )
        })}
      </div>

      {awards.score > 0 && (
        <p className="mt-3 text-right text-xs text-soft">
          Score: <span className="font-semibold text-white">{awards.score}</span>
        </p>
      )}

      {!isAuthenticated && (
        <p className="mt-3 text-center text-xs text-soft">
          <a href="/login" className="text-accent hover:underline">Sign in</a> to award this artwork
        </p>
      )}
    </div>
  )
}