jellybloom/src/components/detail/WhereToWatch.tsx

import { useState } from 'react'
import { ExternalLink, Globe } from '../../lib/icons'
import Select, { type SelectOption } from '../ui/Select'
import { motion } from 'framer-motion'
import type { TmdbWatchProviders } from '../../api/tmdb'
import { getTmdbImageUrl } from '../../api/tmdb'
import { countryLabel } from '../../lib/format'
import { SectionLabel } from '../ui/SectionLabel'

interface Props {
  providers?: TmdbWatchProviders | null
  defaultRegion: string
  onRegionChange?: (region: string) => void
}

const COMMON_REGIONS = ['US', 'GB', 'CA', 'AU', 'DE', 'FR', 'ES', 'IT', 'NL', 'JP', 'BR', 'IN', 'MX']

export default function WhereToWatch({ providers, defaultRegion, onRegionChange }: Props) {
  const [region, setRegion] = useState(defaultRegion)

  const all = providers?.results || {}
  const regionData = all[region]

  const availableRegions = Object.keys(all).sort()

  if (!regionData && !availableRegions.length) return null

  function changeRegion(next: string) {
    setRegion(next)
    onRegionChange?.(next)
  }

  return (
    <Section>
      <div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
        <SectionLabel>Where to watch</SectionLabel>
        <Select
          size="sm"
          ariaLabel="Region"
          triggerIcon={<Globe size={11} stroke={2} />}
          value={region}
          onChange={changeRegion}
          width="min-w-[160px]"
          options={
            [...new Set([region, ...COMMON_REGIONS, ...availableRegions])].map<SelectOption<string>>(r => ({
              value: r,
              label: countryLabel(r) || r,
            }))
          }
        />
      </div>

      {!regionData ? (
        <p className="text-[12px] text-text-4">
          Not available for streaming in {countryLabel(region) || region}.
        </p>
      ) : (
        <div className="space-y-3">
          {regionData.flatrate && (
            <ProviderRow label="Stream" link={regionData.link} providers={regionData.flatrate} />
          )}
          {regionData.free && (
            <ProviderRow label="Free" link={regionData.link} providers={regionData.free} />
          )}
          {regionData.ads && (
            <ProviderRow label="With ads" link={regionData.link} providers={regionData.ads} />
          )}
          {regionData.rent && (
            <ProviderRow label="Rent" link={regionData.link} providers={regionData.rent} />
          )}
          {regionData.buy && (
            <ProviderRow label="Buy" link={regionData.link} providers={regionData.buy} />
          )}
          {regionData.link && (
            <a
              href={regionData.link}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 text-[11px] text-text-4 hover:text-accent transition-colors"
            >
              View all options on TMDB <ExternalLink size={10} />
            </a>
          )}
        </div>
      )}
    </Section>
  )
}

function ProviderRow({
  label,
  link,
  providers,
}: {
  label: string
  link: string
  providers: { provider_id: number; provider_name: string; logo_path: string | null }[]
}) {
  return (
    <div className="flex items-center gap-3 flex-wrap">
      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-text-3 w-16 shrink-0">
        {label}
      </span>
      <div className="flex items-center gap-2 flex-wrap">
        {providers.map((p, i) => (
          <motion.a
            key={p.provider_id}
            href={link}
            target="_blank"
            rel="noopener noreferrer"
            initial={{ opacity: 0, y: 4 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3, delay: i * 0.04 }}
            whileHover={{ y: -2 }}
            className="group relative shrink-0"
            title={p.provider_name}
          >
            <div className="absolute inset-0 rounded-lg bg-accent/0 group-hover:bg-accent/15 blur-md transition-all duration-200" />
            <div className="relative w-10 h-10 rounded-lg overflow-hidden ring-1 ring-border group-hover:ring-accent/40 transition-all duration-150">
              {p.logo_path ? (
                <img
                  src={getTmdbImageUrl(p.logo_path, 'w92')}
                  alt={p.provider_name}
                  className="w-full h-full object-cover"
                  loading="lazy"
                />
              ) : (
                <div className="w-full h-full grid place-items-center bg-elevated text-text-3 text-[10px]">
                  {p.provider_name[0]}
                </div>
              )}
            </div>
          </motion.a>
        ))}
      </div>
    </div>
  )
}

function Section({ children }: { children: React.ReactNode }) {
  return <section className="mb-9">{children}</section>
}