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

function formatCount(value) {
  const n = Number(value || 0)
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
  if (n >= 1_000) return `${(n / 1_000).toFixed(1).replace(/\.0$/, '')}k`
  return `${n}`
}

/* ── SVG Icons ─────────────────────────────────────────────────────────────── */
function HeartIcon({ filled }) {
  return filled ? (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
      <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
    </svg>
  ) : (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5">
      <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>
  )
}

function BookmarkIcon({ filled }) {
  return filled ? (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
      <path fillRule="evenodd" d="M6.32 2.577a49.255 49.255 0 0 1 11.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 0 1-1.085.67L12 18.089l-7.165 3.583A.75.75 0 0 1 3.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93Z" clipRule="evenodd" />
    </svg>
  ) : (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5">
      <path strokeLinecap="round" strokeLinejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" />
    </svg>
  )
}

function CloudDownIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5">
      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9.75v6.75m0 0-3-3m3 3 3-3m-8.25 6a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z" />
    </svg>
  )
}

function DownloadArrowIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="h-4 w-4">
      <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
    </svg>
  )
}

function ShareIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5">
      <path strokeLinecap="round" strokeLinejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 1 1 0-2.684m0 2.684 6.632 3.316m-6.632-6 6.632-3.316m0 0a3 3 0 1 0 5.367-2.684 3 3 0 0 0-5.367 2.684Zm0 9.316a3 3 0 1 0 5.368 2.684 3 3 0 0 0-5.368-2.684Z" />
    </svg>
  )
}

function FlagIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5">
      <path strokeLinecap="round" strokeLinejoin="round" d="M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5" />
    </svg>
  )
}

export default function ArtworkActionBar({ artwork, stats, canonicalUrl, onStatsChange }) {
  const [liked, setLiked] = useState(Boolean(artwork?.viewer?.is_liked))
  const [favorited, setFavorited] = useState(Boolean(artwork?.viewer?.is_favorited))
  const [downloading, setDownloading] = useState(false)
  const [reporting, setReporting] = useState(false)
  const [copied, setCopied] = useState(false)

  useEffect(() => {
    setLiked(Boolean(artwork?.viewer?.is_liked))
    setFavorited(Boolean(artwork?.viewer?.is_favorited))
  }, [artwork?.id, artwork?.viewer?.is_liked, artwork?.viewer?.is_favorited])

  const fallbackUrl = artwork?.thumbs?.xl?.url || artwork?.thumbs?.lg?.url || artwork?.file?.url || '#'
  const shareUrl = canonicalUrl || artwork?.canonical_url || (typeof window !== 'undefined' ? window.location.href : '#')
  const csrfToken = typeof document !== 'undefined'
    ? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
    : null

  // Track view
  useEffect(() => {
    if (!artwork?.id) return
    const key = `sb_viewed_${artwork.id}`
    if (typeof sessionStorage !== 'undefined' && sessionStorage.getItem(key)) return
    fetch(`/api/art/${artwork.id}/view`, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': csrfToken || '', 'Content-Type': 'application/json' },
      credentials: 'same-origin',
    }).then(res => {
      if (res.ok && typeof sessionStorage !== 'undefined') sessionStorage.setItem(key, '1')
    }).catch(() => {})
  }, [artwork?.id]) // eslint-disable-line react-hooks/exhaustive-deps

  const postInteraction = async (url, body) => {
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken || '' },
      credentials: 'same-origin',
      body: JSON.stringify(body),
    })
    if (!response.ok) throw new Error('Request failed')
    return response.json()
  }

  const handleDownload = async () => {
    if (downloading || !artwork?.id) return
    setDownloading(true)
    try {
      const res = await fetch(`/api/art/${artwork.id}/download`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': csrfToken || '', 'Content-Type': 'application/json' },
        credentials: 'same-origin',
      })
      const data = res.ok ? await res.json() : null
      const url = data?.url || fallbackUrl
      const a = document.createElement('a')
      a.href = url
      a.download = data?.filename || ''
      a.rel = 'noopener noreferrer'
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    } catch {
      window.open(fallbackUrl, '_blank', 'noopener,noreferrer')
    } finally {
      setDownloading(false)
    }
  }

  const onToggleLike = async () => {
    const nextState = !liked
    setLiked(nextState)
    try {
      await postInteraction(`/api/artworks/${artwork.id}/like`, { state: nextState })
      onStatsChange?.({ likes: nextState ? 1 : -1 })
    } catch { setLiked(!nextState) }
  }

  const onToggleFavorite = async () => {
    const nextState = !favorited
    setFavorited(nextState)
    try {
      await postInteraction(`/api/artworks/${artwork.id}/favorite`, { state: nextState })
      onStatsChange?.({ favorites: nextState ? 1 : -1 })
    } catch { setFavorited(!nextState) }
  }

  const onShare = async () => {
    try {
      if (navigator.share) {
        await navigator.share({ title: artwork?.title || 'Artwork', url: shareUrl })
        return
      }
      await navigator.clipboard.writeText(shareUrl)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch { /* noop */ }
  }

  const onReport = async () => {
    if (reporting) return
    setReporting(true)
    try {
      await postInteraction(`/api/artworks/${artwork.id}/report`, { reason: 'Reported from artwork page' })
    } catch { /* noop */ }
    finally { setReporting(false) }
  }

  const likeCount = formatCount(stats?.likes ?? artwork?.stats?.likes ?? 0)
  const favCount = formatCount(stats?.favorites ?? artwork?.stats?.favorites ?? 0)
  const viewCount = formatCount(stats?.views ?? artwork?.stats?.views ?? 0)

  return (
    <>
      {/* ── Desktop centered bar ────────────────────────────────────── */}
      <div className="hidden lg:flex lg:items-center lg:justify-center lg:gap-3">
        {/* Like stat pill */}
        <button
          type="button"
          aria-label={liked ? 'Unlike artwork' : 'Like artwork'}
          onClick={onToggleLike}
          className={[
            'inline-flex items-center gap-2 rounded-full border px-5 py-2.5 text-sm font-medium transition-all duration-200',
            liked
              ? 'border-rose-500/40 bg-rose-500/15 text-rose-400 shadow-lg shadow-rose-500/10 hover:bg-rose-500/20'
              : 'border-white/[0.08] bg-white/[0.04] text-white/70 hover:border-white/[0.15] hover:bg-white/[0.07] hover:text-white',
          ].join(' ')}
        >
          <HeartIcon filled={liked} />
          <span className="tabular-nums">{likeCount}</span>
        </button>

        {/* Favorite/bookmark stat pill */}
        <button
          type="button"
          aria-label={favorited ? 'Unsave artwork' : 'Save artwork'}
          onClick={onToggleFavorite}
          className={[
            'inline-flex items-center gap-2 rounded-full border px-5 py-2.5 text-sm font-medium transition-all duration-200',
            favorited
              ? 'border-amber-500/40 bg-amber-500/15 text-amber-400 shadow-lg shadow-amber-500/10 hover:bg-amber-500/20'
              : 'border-white/[0.08] bg-white/[0.04] text-white/70 hover:border-white/[0.15] hover:bg-white/[0.07] hover:text-white',
          ].join(' ')}
        >
          <BookmarkIcon filled={favorited} />
          <span className="tabular-nums">{favCount}</span>
        </button>

        {/* Views stat pill */}
        <div className="inline-flex items-center gap-2 rounded-full border border-white/[0.08] bg-white/[0.04] px-5 py-2.5 text-sm font-medium text-white/70">
          <CloudDownIcon />
          <span className="tabular-nums">{viewCount}</span>
        </div>

        {/* Share pill */}
        <button
          type="button"
          aria-label="Share artwork"
          onClick={onShare}
          className="inline-flex items-center gap-2 rounded-full border border-white/[0.08] bg-white/[0.04] px-5 py-2.5 text-sm font-medium text-white/70 transition-all duration-200 hover:border-white/[0.15] hover:bg-white/[0.07] hover:text-white"
        >
          <ShareIcon />
          {copied ? 'Copied!' : 'Share'}
        </button>

        {/* Report pill */}
        <button
          type="button"
          aria-label="Report artwork"
          onClick={onReport}
          disabled={reporting}
          className="inline-flex items-center gap-2 rounded-full border border-white/[0.08] bg-white/[0.04] px-5 py-2.5 text-sm font-medium text-white/70 transition-all duration-200 hover:border-red-500/40 hover:bg-red-500/10 hover:text-red-400 disabled:cursor-wait disabled:opacity-50"
        >
          <FlagIcon />
          {reporting ? '…' : 'Report'}
        </button>

        {/* Download button */}
        <button
          type="button"
          aria-label="Download artwork"
          onClick={handleDownload}
          disabled={downloading}
          className="inline-flex items-center gap-2 rounded-full bg-accent px-6 py-2.5 text-sm font-bold text-deep shadow-lg shadow-accent/25 transition-all duration-200 hover:brightness-110 hover:shadow-xl hover:shadow-accent/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/60 disabled:cursor-wait disabled:opacity-60"
        >
          <DownloadArrowIcon />
          {downloading ? 'Downloading…' : 'Download'}
        </button>
      </div>

      {/* ── Mobile fixed bottom bar ─────────────────────────────────── */}
      <div className="fixed inset-x-0 bottom-0 z-50 border-t border-white/[0.08] bg-nova-900/95 px-3 py-2.5 backdrop-blur-md lg:hidden">
        <div className="flex items-center justify-center gap-2">
          <button
            type="button"
            aria-label={liked ? 'Unlike' : 'Like'}
            onClick={onToggleLike}
            className={[
              'inline-flex items-center gap-1.5 rounded-full border px-3.5 py-2 text-xs font-medium transition-all',
              liked
                ? 'border-rose-500/40 bg-rose-500/15 text-rose-400'
                : 'border-white/[0.08] bg-white/[0.04] text-white/70',
            ].join(' ')}
          >
            <HeartIcon filled={liked} />
            <span className="tabular-nums">{likeCount}</span>
          </button>

          <button
            type="button"
            aria-label={favorited ? 'Unsave' : 'Save'}
            onClick={onToggleFavorite}
            className={[
              'inline-flex items-center gap-1.5 rounded-full border px-3.5 py-2 text-xs font-medium transition-all',
              favorited
                ? 'border-amber-500/40 bg-amber-500/15 text-amber-400'
                : 'border-white/[0.08] bg-white/[0.04] text-white/70',
            ].join(' ')}
          >
            <BookmarkIcon filled={favorited} />
            <span className="tabular-nums">{favCount}</span>
          </button>

          {/* Share */}
          <button
            type="button"
            aria-label="Share"
            onClick={onShare}
            className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.04] px-3.5 py-2 text-xs font-medium text-white/70 transition-all"
          >
            <ShareIcon />
          </button>

          {/* Report */}
          <button
            type="button"
            aria-label="Report"
            onClick={onReport}
            disabled={reporting}
            className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.04] px-3.5 py-2 text-xs font-medium text-white/70 transition-all hover:border-red-500/40 hover:text-red-400 disabled:opacity-50"
          >
            <FlagIcon />
          </button>

          <button
            type="button"
            aria-label="Download artwork"
            onClick={handleDownload}
            disabled={downloading}
            className="inline-flex items-center gap-1.5 rounded-full bg-accent px-5 py-2 text-xs font-bold text-deep transition hover:brightness-110 disabled:cursor-wait disabled:opacity-60"
          >
            <DownloadArrowIcon />
            {downloading ? '…' : 'Download'}
          </button>
        </div>
      </div>
    </>
  )
}