import { motion } from 'framer-motion'
import { Search, Clock } from '../../lib/icons'
import { usePosterGridClasses } from '../../lib/density'

const SUGGESTED: string[] = [
  'Top action movies',
  'Christopher Nolan',
  'Oscar winners',
  'A24',
  'Studio Ghibli',
  'Denis Villeneuve',
]

export function EmptyState({
  recents,
  onPick,
  onClearRecents,
}: { recents: string[]; onPick: (s: string) => void; onClearRecents: () => void }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.32, ease: [0.16, 1, 0.3, 1] }}
      className="max-w-2xl mx-auto pt-6 sm:pt-12"
    >
      <div className="text-center mb-12">
        <div className="relative w-16 h-16 mx-auto mb-5">
          <div className="absolute inset-0 rounded-full bg-accent/15 blur-2xl" />
          <div className="relative w-full h-full rounded-full bg-gradient-to-br from-elevated to-surface ring-1 ring-border grid place-items-center">
            <Search size={22} className="text-text-2" />
          </div>
        </div>
        <h1 className="font-display text-[22px] sm:text-[26px] text-text-1 font-semibold tracking-tight">
          What are you looking for?
        </h1>
        <p className="text-[13.5px] text-text-3 mt-2">
          Search across your library and TMDB for movies, shows, episodes, people, and music.
        </p>
      </div>

      {recents.length > 0 && (
        <section className="mb-10">
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-[11px] font-semibold text-text-2 uppercase tracking-[0.14em]">
              Recent
            </h2>
            <button
              onClick={onClearRecents}
              className="text-[11px] text-text-4 hover:text-text-2 transition-colors focus-ring rounded px-1"
            >
              Clear
            </button>
          </div>
          <div className="flex flex-wrap gap-2">
            {recents.map(r => (
              <button
                key={r}
                onClick={() => onPick(r)}
                className="inline-flex items-center gap-1.5 h-8 px-3 rounded-md bg-elevated/60 ring-1 ring-border text-[12.5px] text-text-2 hover:text-text-1 hover:ring-border-strong hover:bg-elevated transition-all duration-200 focus-ring"
              >
                <Clock size={11} className="text-text-4" />
                <span className="truncate max-w-[200px]">{r}</span>
              </button>
            ))}
          </div>
        </section>
      )}

      <section>
        <h2 className="text-[11px] font-semibold text-text-2 uppercase tracking-[0.14em] mb-3">
          Try searching
        </h2>
        <div className="flex flex-wrap gap-2">
          {SUGGESTED.map(s => (
            <button
              key={s}
              onClick={() => onPick(s)}
              className="inline-flex items-center h-8 px-3 rounded-md bg-elevated/40 ring-1 ring-border text-[12.5px] text-text-2 hover:text-accent hover:ring-accent/40 hover:bg-elevated/70 transition-all duration-200 focus-ring"
            >
              {s}
            </button>
          ))}
        </div>
      </section>
    </motion.div>
  )
}

export function LoadingState() {
  const grid = usePosterGridClasses()
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.2 }}
      className="space-y-12"
    >
      {/* People skeleton */}
      <section>
        <div className="skeleton h-3 w-20 rounded mb-4" />
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-5 gap-y-7">
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="flex items-center gap-4 p-2.5">
              <div className="skeleton w-20 h-20 rounded-full shrink-0" />
              <div className="flex-1 space-y-2">
                <div className="skeleton h-3 w-2/3 rounded" />
                <div className="skeleton h-2.5 w-1/3 rounded" />
                <div className="skeleton h-2.5 w-3/4 rounded" />
              </div>
            </div>
          ))}
        </div>
      </section>
      {/* Posters skeleton */}
      <section>
        <div className="skeleton h-3 w-24 rounded mb-4" />
        <div className={grid}>
          {Array.from({ length: 12 }).map((_, i) => (
            <div key={i}>
              <div className="skeleton aspect-[2/3] rounded-lg" />
              <div className="mt-2.5 space-y-1.5">
                <div className="skeleton h-3 w-3/4 rounded" />
                <div className="skeleton h-2.5 w-1/2 rounded" />
              </div>
            </div>
          ))}
        </div>
      </section>
    </motion.div>
  )
}

export function NoResults({ query }: { query: string }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.3 }}
      className="text-center py-20 max-w-md mx-auto"
    >
      <div className="relative w-14 h-14 mx-auto mb-4">
        <div className="absolute inset-0 rounded-full bg-text-5/10 blur-xl" />
        <div className="relative w-full h-full rounded-full bg-gradient-to-br from-elevated to-surface ring-1 ring-border grid place-items-center">
          <Search size={20} className="text-text-3" />
        </div>
      </div>
      <p className="font-display text-[18px] text-text-1 font-semibold tracking-tight">
        Nothing matched "{query}"
      </p>
      <p className="text-[13px] text-text-3 mt-2 leading-relaxed">
        Check the spelling, try a shorter query, or search for an actor or director.
      </p>
    </motion.div>
  )
}
