import { Database, Check, RefreshCw, Clock } from '../../lib/icons'
import { useRequestModal } from '../../stores/request-modal-store'
import { useItemAvailability } from '../../hooks/use-availability'
import type { TmdbMovie, TmdbTvShow } from '../../api/tmdb'

interface Props {
  tmdbId: number | null | undefined
  kind: 'movie' | 'tv'
  tmdbData: TmdbMovie | TmdbTvShow | null
  /** Visual style. 'pill' for hero rows, 'inline' for compact contexts. */
  variant?: 'pill' | 'inline'
}

/**
 * Renders a Request CTA when the item isn't available locally and an
 * appropriate *arr instance exists. When *arr already tracks the item,
 * morphs into a status pill (Downloading / Pending / etc.) so the user
 * sees the request state without a confusing duplicate Request button.
 *
 * Hides itself entirely when no *arr instance is configured for the
 * relevant kind, since there's nothing to request against.
 */
export default function RequestButton({ tmdbId, kind, tmdbData, variant = 'pill' }: Props) {
  const show = useRequestModal(s => s.show)
  const availability = useItemAvailability(tmdbId)

  if (!tmdbId) return null

  // Available locally - nothing to request. Hide.
  if (availability?.status === 'available') return null

  // Note: we intentionally render the button even when the matching
  // *arr (Radarr for movies, Sonarr for shows) isn't configured. The
  // modal explains how to set it up. Hiding silently was confusing -
  // users assumed the app didn't support requests at all.

  // Tracked by *arr already - render a status chip instead of "Request"
  // so the user can see what stage their existing request is in.
  if (availability && availability.status !== 'missing') {
    const Icon =
      availability.status === 'processing' ? RefreshCw
      : availability.status === 'partial' ? Check
      : Clock
    const label =
      availability.status === 'processing' ? 'Downloading'
      : availability.status === 'partial' ? 'Partially downloaded'
      : availability.status === 'pending' ? 'Pending release'
      : 'Requested'
    if (variant === 'inline') {
      return (
        <span className="inline-flex items-center gap-1.5 h-7 px-3 rounded-full bg-accent/10 ring-1 ring-accent/30 text-[11.5px] text-accent font-medium tracking-tight">
          <Icon size={11} stroke={2.25} />
          {label}
        </span>
      )
    }
    return (
      <span className="inline-flex items-center gap-2 h-11 px-5 rounded-lg bg-accent/15 text-accent border border-accent/30 text-[13px] font-medium tracking-tight">
        <Icon size={14} stroke={2} />
        {label}
      </span>
    )
  }

  function open() {
    if (!tmdbId) return
    show({ tmdbId, kind, tmdbData })
  }

  if (variant === 'inline') {
    return (
      <button
        onClick={open}
        className="inline-flex items-center gap-1.5 h-7 px-3 rounded-full bg-accent text-void text-[11.5px] font-semibold tracking-tight transition hover:bg-accent-hover focus-ring"
      >
        <Database size={11} stroke={2.25} />
        Request
      </button>
    )
  }

  return (
    <button
      onClick={open}
      className="h-11 px-5 bg-accent hover:bg-accent-hover text-void rounded-lg flex items-center gap-2 text-[13px] font-semibold tracking-tight transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] shadow-[0_8px_24px_-8px_rgba(245,182,66,0.5)] focus-ring"
    >
      <Database size={14} stroke={2} />
      Request
    </button>
  )
}
