import { useMemo, useState } from 'react'
import { useGenlockeGraveyard } from '../hooks/useGenlockes'
import { TypeBadge } from './TypeBadge'
import type { GraveyardEntry } from '../types'

type SortKey = 'leg' | 'level' | 'species'

interface GenlockeGraveyardProps {
  genlockeId: number
}

function GraveyardCard({ entry }: { entry: GraveyardEntry }) {
  const displayPokemon = entry.currentPokemon ?? entry.pokemon
  const isEvolved = entry.currentPokemon !== null

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 flex flex-col items-center text-center opacity-60 grayscale">
      {displayPokemon.spriteUrl ? (
        <img
          src={displayPokemon.spriteUrl}
          alt={displayPokemon.name}
          className="w-25 h-25"
          loading="lazy"
        />
      ) : (
        <div className="w-25 h-25 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-xl font-bold text-gray-600 dark:text-gray-300">
          {displayPokemon.name[0].toUpperCase()}
        </div>
      )}

      <div className="mt-2 flex items-center gap-1.5">
        <span className="w-2 h-2 rounded-full shrink-0 bg-red-500" />
        <span className="font-semibold text-gray-900 dark:text-gray-100 text-sm">
          {entry.nickname || displayPokemon.name}
        </span>
      </div>
      {entry.nickname && (
        <div className="text-xs text-gray-500 dark:text-gray-400">
          {displayPokemon.name}
        </div>
      )}

      <div className="flex flex-col items-center gap-0.5 mt-1">
        {displayPokemon.types.map((type) => (
          <TypeBadge key={type} type={type} />
        ))}
      </div>

      <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
        Lv. {entry.catchLevel} &rarr; {entry.faintLevel}
      </div>

      <div className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
        {entry.routeName}
      </div>

      <div className="text-[10px] text-purple-600 dark:text-purple-400 mt-0.5 font-medium">
        Leg {entry.legOrder} &mdash; {entry.gameName}
      </div>

      {isEvolved && (
        <div className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">
          Originally: {entry.pokemon.name}
        </div>
      )}

      {entry.deathCause && (
        <div className="text-[10px] italic text-gray-400 dark:text-gray-500 mt-0.5 line-clamp-2">
          {entry.deathCause}
        </div>
      )}
    </div>
  )
}

export function GenlockeGraveyard({ genlockeId }: GenlockeGraveyardProps) {
  const { data, isLoading, error } = useGenlockeGraveyard(genlockeId)
  const [filterLeg, setFilterLeg] = useState<number | null>(null)
  const [sortKey, setSortKey] = useState<SortKey>('leg')

  const filtered = useMemo(() => {
    if (!data) return []
    let entries = data.entries
    if (filterLeg !== null) {
      entries = entries.filter((e) => e.legOrder === filterLeg)
    }
    return [...entries].sort((a, b) => {
      switch (sortKey) {
        case 'leg':
          return a.legOrder - b.legOrder || a.id - b.id
        case 'level':
          return (b.faintLevel ?? 0) - (a.faintLevel ?? 0)
        case 'species': {
          const nameA = (a.currentPokemon ?? a.pokemon).name
          const nameB = (b.currentPokemon ?? b.pokemon).name
          return nameA.localeCompare(nameB)
        }
        default:
          return 0
      }
    })
  }, [data, filterLeg, sortKey])

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-8">
        <div className="w-6 h-6 border-4 border-red-600 border-t-transparent rounded-full animate-spin" />
      </div>
    )
  }

  if (error) {
    return (
      <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-red-700 dark:text-red-400">
        Failed to load graveyard data.
      </div>
    )
  }

  if (!data || data.totalDeaths === 0) {
    return (
      <div className="rounded-lg bg-gray-50 dark:bg-gray-800/50 p-6 text-center text-gray-500 dark:text-gray-400">
        No deaths recorded across any leg.
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {/* Summary bar */}
      <div className="flex flex-wrap items-center gap-4 text-sm">
        <span className="font-semibold text-gray-900 dark:text-gray-100">
          {data.totalDeaths} total death{data.totalDeaths !== 1 ? 's' : ''}
        </span>
        {data.deadliestLeg && (
          <span className="text-gray-500 dark:text-gray-400">
            Deadliest: Leg {data.deadliestLeg.legOrder} &mdash; {data.deadliestLeg.gameName} ({data.deadliestLeg.deathCount})
          </span>
        )}
      </div>

      {/* Controls */}
      <div className="flex flex-wrap items-center gap-3">
        <select
          value={filterLeg ?? ''}
          onChange={(e) => setFilterLeg(e.target.value ? Number(e.target.value) : null)}
          className="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
        >
          <option value="">All Legs</option>
          {data.deathsPerLeg.map((leg) => (
            <option key={leg.legOrder} value={leg.legOrder}>
              Leg {leg.legOrder} &mdash; {leg.gameName} ({leg.deathCount})
            </option>
          ))}
        </select>

        <select
          value={sortKey}
          onChange={(e) => setSortKey(e.target.value as SortKey)}
          className="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
        >
          <option value="leg">Sort by Leg</option>
          <option value="level">Sort by Level</option>
          <option value="species">Sort by Species</option>
        </select>
      </div>

      {/* Grid */}
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
        {filtered.map((entry) => (
          <GraveyardCard key={entry.id} entry={entry} />
        ))}
      </div>
    </div>
  )
}
