import { useState } from 'react'
import { useStats } from '../hooks/useStats'
import { StatCard } from '../components'
import type { PokemonRanking, StatsResponse } from '../types/stats'

const typeBarColors: Record<string, string> = {
  normal: 'bg-gray-400',
  fire: 'bg-red-500',
  water: 'bg-blue-500',
  electric: 'bg-yellow-400',
  grass: 'bg-green-500',
  ice: 'bg-cyan-300',
  fighting: 'bg-red-700',
  poison: 'bg-purple-500',
  ground: 'bg-amber-600',
  flying: 'bg-indigo-300',
  psychic: 'bg-pink-500',
  bug: 'bg-lime-500',
  rock: 'bg-amber-700',
  ghost: 'bg-purple-700',
  dragon: 'bg-indigo-600',
  dark: 'bg-gray-700',
  steel: 'bg-gray-400',
  fairy: 'bg-pink-300',
}

function fmt(value: number | null, suffix = ''): string {
  if (value === null) return '—'
  return `${value}${suffix}`
}

function pct(value: number | null): string {
  if (value === null) return '—'
  return `${(value * 100).toFixed(1)}%`
}

function PokemonList({ title, pokemon }: { title: string; pokemon: PokemonRanking[] }) {
  const [expanded, setExpanded] = useState(false)
  const visible = expanded ? pokemon : pokemon.slice(0, 5)

  return (
    <div>
      <h3 className="text-sm font-semibold text-text-secondary mb-2">{title}</h3>
      {pokemon.length === 0 ? (
        <p className="text-sm text-text-tertiary">No data</p>
      ) : (
        <>
          <div className="space-y-1.5">
            {visible.map((p, i) => (
              <div key={p.pokemonId} className="flex items-center gap-2 text-sm">
                <span className="text-text-muted w-5 text-right">{i + 1}.</span>
                {p.spriteUrl ? (
                  <img src={p.spriteUrl} alt={p.name} className="w-6 h-6" loading="lazy" />
                ) : (
                  <div className="w-6 h-6 bg-surface-3 rounded" />
                )}
                <span className="capitalize text-text-primary">{p.name}</span>
                <span className="ml-auto text-text-tertiary font-medium">{p.count}</span>
              </div>
            ))}
          </div>
          {pokemon.length > 5 && (
            <button
              type="button"
              onClick={() => setExpanded(!expanded)}
              className="mt-2 text-xs text-text-link hover:underline"
            >
              {expanded ? 'Show less' : `Show all ${pokemon.length}`}
            </button>
          )}
        </>
      )}
    </div>
  )
}

function hexLuminance(hex: string): number {
  const r = parseInt(hex.slice(1, 3), 16)
  const g = parseInt(hex.slice(3, 5), 16)
  const b = parseInt(hex.slice(5, 7), 16)
  return (0.299 * r + 0.587 * g + 0.114 * b) / 255
}

function HorizontalBar({
  label,
  value,
  max,
  color,
  colorHex,
}: {
  label: string
  value: number
  max: number
  color?: string
  colorHex?: string
}) {
  const width = max > 0 ? (value / max) * 100 : 0
  const isLight = colorHex ? hexLuminance(colorHex) > 0.55 : false
  return (
    <div className="flex items-center gap-2 text-sm">
      <div className="flex-1 bg-surface-2 rounded-full h-6 overflow-hidden relative">
        <div
          className={`h-full rounded-full ${color ?? ''}`}
          style={{
            width: `${Math.max(width, 1)}%`,
            ...(colorHex ? { backgroundColor: colorHex } : {}),
          }}
        />
        <span
          className={`absolute inset-0 flex items-center px-3 text-xs font-medium capitalize truncate ${
            isLight ? 'text-gray-900 dark:text-gray-900' : 'text-text-primary'
          }`}
          style={{
            textShadow: isLight ? '0 0 4px rgba(255,255,255,0.8)' : '0 0 4px rgba(0,0,0,0.3)',
          }}
        >
          {label}
        </span>
      </div>
      <span className="w-8 text-right text-text-secondary font-medium shrink-0">{value}</span>
    </div>
  )
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="bg-surface-1 rounded-lg shadow p-6">
      <h2 className="text-lg font-bold text-text-primary mb-4">{title}</h2>
      {children}
    </section>
  )
}

function StatsContent({ stats }: { stats: StatsResponse }) {
  const gameMax = Math.max(...stats.runsByGame.map((g) => g.count), 0)
  const typeMax = Math.max(...stats.typeDistribution.map((t) => t.count), 0)

  return (
    <div className="space-y-6">
      {/* Run Overview */}
      <Section title="Run Overview">
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4">
          <StatCard label="Total Runs" value={stats.totalRuns} color="blue" />
          <StatCard label="Active" value={stats.activeRuns} color="green" />
          <StatCard label="Completed" value={stats.completedRuns} color="blue" />
          <StatCard label="Failed" value={stats.failedRuns} color="red" />
        </div>
        <div className="flex flex-wrap gap-x-6 gap-y-1 text-sm text-text-tertiary">
          <span>
            Win Rate: <strong className="text-text-primary">{pct(stats.winRate)}</strong>
          </span>
          <span>
            Avg Duration:{' '}
            <strong className="text-text-primary">{fmt(stats.avgDurationDays, ' days')}</strong>
          </span>
        </div>
      </Section>

      {/* Runs by Game */}
      {stats.runsByGame.length > 0 && (
        <Section title="Runs by Game">
          <div className="space-y-2">
            {stats.runsByGame.map((g) => (
              <HorizontalBar
                key={g.gameId}
                label={g.gameName}
                value={g.count}
                max={gameMax}
                {...(g.gameColor ? { colorHex: g.gameColor } : { color: 'bg-blue-500' })}
              />
            ))}
          </div>
        </Section>
      )}

      {/* Encounter Stats */}
      <Section title="Encounter Stats">
        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-4">
          <StatCard
            label="Caught"
            value={stats.caughtCount}
            total={stats.totalEncounters}
            color="green"
          />
          <StatCard
            label="Fainted"
            value={stats.faintedCount}
            total={stats.totalEncounters}
            color="red"
          />
          <StatCard
            label="Missed"
            value={stats.missedCount}
            total={stats.totalEncounters}
            color="gray"
          />
        </div>
        <div className="flex flex-wrap gap-x-6 gap-y-1 text-sm text-text-tertiary">
          <span>
            Catch Rate: <strong className="text-text-primary">{pct(stats.catchRate)}</strong>
          </span>
          <span>
            Avg per Run:{' '}
            <strong className="text-text-primary">{fmt(stats.avgEncountersPerRun)}</strong>
          </span>
        </div>
      </Section>

      {/* Pokemon Rankings */}
      <Section title="Pokemon Rankings">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <PokemonList title="Most Caught" pokemon={stats.topCaughtPokemon} />
          <PokemonList title="Most Encountered" pokemon={stats.topEncounteredPokemon} />
        </div>
      </Section>

      {/* Team & Deaths */}
      <Section title="Team & Deaths">
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4">
          <StatCard label="Total Deaths" value={stats.totalDeaths} color="red" />
          <div className="bg-surface-1 rounded-lg shadow p-4 border-l-4 border-amber-500">
            <div className="text-2xl font-bold text-text-primary">{pct(stats.mortalityRate)}</div>
            <div className="text-sm text-text-tertiary">Mortality Rate</div>
          </div>
          <div className="bg-surface-1 rounded-lg shadow p-4 border-l-4 border-blue-500">
            <div className="text-2xl font-bold text-text-primary">{fmt(stats.avgCatchLevel)}</div>
            <div className="text-sm text-text-tertiary">Avg Catch Lv.</div>
          </div>
          <div className="bg-surface-1 rounded-lg shadow p-4 border-l-4 border-purple-500">
            <div className="text-2xl font-bold text-text-primary">{fmt(stats.avgFaintLevel)}</div>
            <div className="text-sm text-text-tertiary">Avg Faint Lv.</div>
          </div>
        </div>

        {stats.topDeathCauses.length > 0 && (
          <div className="mt-4">
            <h3 className="text-sm font-semibold text-text-secondary mb-2">Top Death Causes</h3>
            <div className="space-y-1.5">
              {stats.topDeathCauses.map((d, i) => (
                <div key={d.cause} className="flex items-center gap-2 text-sm">
                  <span className="text-text-muted w-5 text-right">{i + 1}.</span>
                  <span className="text-text-primary">{d.cause}</span>
                  <span className="ml-auto text-text-tertiary font-medium">{d.count}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </Section>

      {/* Type Distribution */}
      {stats.typeDistribution.length > 0 && (
        <Section title="Type Distribution">
          <div className="space-y-2">
            {stats.typeDistribution.map((t) => (
              <HorizontalBar
                key={t.type}
                label={t.type}
                value={t.count}
                max={typeMax}
                color={typeBarColors[t.type] ?? 'bg-gray-500'}
              />
            ))}
          </div>
        </Section>
      )}
    </div>
  )
}

export function Stats() {
  const { data: stats, isLoading, error } = useStats()

  return (
    <div className="max-w-4xl mx-auto p-8">
      <h1 className="text-3xl font-bold text-text-primary mb-6">Stats</h1>

      {isLoading && (
        <div className="flex justify-center py-12">
          <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
        </div>
      )}

      {error && (
        <div className="rounded-lg bg-status-failed-bg p-4 text-status-failed">
          Failed to load stats: {error.message}
        </div>
      )}

      {stats && stats.totalRuns === 0 && (
        <div className="text-center py-12 text-text-tertiary">
          <p className="text-lg mb-2">No data yet</p>
          <p className="text-sm">Start a Nuzlocke run to see your stats here.</p>
        </div>
      )}

      {stats && stats.totalRuns > 0 && <StatsContent stats={stats} />}
    </div>
  )
}
