nuzlocke-tracker/frontend/src/pages/RunEncounters.tsx

import { useState, useMemo, useEffect, useCallback } from 'react'
import { useParams, Link } from 'react-router-dom'
import { useRun, useUpdateRun } from '../hooks/useRuns'
import { useGameRoutes } from '../hooks/useGames'
import { useCreateEncounter, useUpdateEncounter } from '../hooks/useEncounters'
import {
  EncounterModal,
  EncounterMethodBadge,
  StatCard,
  PokemonCard,
  StatusChangeModal,
  EndRunModal,
  RuleBadges,
} from '../components'
import type {
  Route,
  RouteWithChildren,
  RunStatus,
  EncounterDetail,
  EncounterStatus,
} from '../types'

const statusStyles: Record<RunStatus, string> = {
  active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
  completed:
    'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
  failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
}

function formatDuration(start: string, end: string) {
  const ms = new Date(end).getTime() - new Date(start).getTime()
  const days = Math.floor(ms / (1000 * 60 * 60 * 24))
  if (days === 0) return 'Less than a day'
  if (days === 1) return '1 day'
  return `${days} days`
}

type RouteStatus = 'caught' | 'fainted' | 'missed' | 'none'

function getRouteStatus(encounter?: EncounterDetail): RouteStatus {
  if (!encounter) return 'none'
  return encounter.status
}

const statusIndicator: Record<
  RouteStatus,
  { dot: string; label: string; bg: string }
> = {
  caught: {
    dot: 'bg-green-500',
    label: 'Caught',
    bg: 'bg-green-50 dark:bg-green-900/10',
  },
  fainted: {
    dot: 'bg-red-500',
    label: 'Fainted',
    bg: 'bg-red-50 dark:bg-red-900/10',
  },
  missed: {
    dot: 'bg-gray-400',
    label: 'Missed',
    bg: 'bg-gray-50 dark:bg-gray-900/10',
  },
  none: { dot: 'bg-gray-300 dark:bg-gray-600', label: '', bg: '' },
}

/**
 * Organize flat routes into hierarchical structure.
 * Routes with parentRouteId are grouped under their parent.
 */
function organizeRoutes(routes: Route[]): RouteWithChildren[] {
  const childrenByParent = new Map<number, Route[]>()
  const topLevel: Route[] = []

  for (const route of routes) {
    if (route.parentRouteId === null) {
      topLevel.push(route)
    } else {
      const children = childrenByParent.get(route.parentRouteId) ?? []
      children.push(route)
      childrenByParent.set(route.parentRouteId, children)
    }
  }

  return topLevel.map((route) => ({
    ...route,
    children: childrenByParent.get(route.id) ?? [],
  }))
}

/**
 * Check if any child route in a group has an encounter.
 * Returns the encounter if found, null otherwise.
 */
function getGroupEncounter(
  group: RouteWithChildren,
  encounterByRoute: Map<number, EncounterDetail>,
): EncounterDetail | null {
  for (const child of group.children) {
    const enc = encounterByRoute.get(child.id)
    if (enc) return enc
  }
  return null
}

interface RouteGroupProps {
  group: RouteWithChildren
  encounterByRoute: Map<number, EncounterDetail>
  isExpanded: boolean
  onToggleExpand: () => void
  onRouteClick: (route: Route) => void
  filter: 'all' | RouteStatus
}

function RouteGroup({
  group,
  encounterByRoute,
  isExpanded,
  onToggleExpand,
  onRouteClick,
  filter,
}: RouteGroupProps) {
  const groupEncounter = getGroupEncounter(group, encounterByRoute)
  const groupStatus = groupEncounter ? groupEncounter.status : 'none'
  const si = statusIndicator[groupStatus]

  // For groups, check if it matches the filter
  if (filter !== 'all' && groupStatus !== filter) {
    return null
  }

  const hasGroupEncounter = groupEncounter !== null

  return (
    <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
      {/* Group header */}
      <button
        type="button"
        onClick={onToggleExpand}
        className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-gray-100 dark:hover:bg-gray-700/50 ${si.bg}`}
      >
        <span className={`w-2.5 h-2.5 rounded-full shrink-0 ${si.dot}`} />
        <div className="flex-1 min-w-0">
          <div className="text-sm font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2">
            {group.name}
            <span className="text-xs text-gray-400 dark:text-gray-500">
              ({group.children.length} areas)
            </span>
          </div>
          {groupEncounter && (
            <div className="flex items-center gap-2 mt-0.5">
              {groupEncounter.pokemon.spriteUrl && (
                <img
                  src={groupEncounter.pokemon.spriteUrl}
                  alt={groupEncounter.pokemon.name}
                  className="w-5 h-5"
                />
              )}
              <span className="text-xs text-gray-500 dark:text-gray-400 capitalize">
                {groupEncounter.nickname ?? groupEncounter.pokemon.name}
                {groupEncounter.status === 'caught' &&
                  groupEncounter.faintLevel !== null &&
                  (groupEncounter.deathCause
                    ? ` — ${groupEncounter.deathCause}`
                    : ' (dead)')}
              </span>
            </div>
          )}
        </div>
        <span className="text-xs text-gray-400 dark:text-gray-500 shrink-0">
          {si.label}
        </span>
        <svg
          className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M19 9l-7 7-7-7"
          />
        </svg>
      </button>

      {/* Expanded children */}
      {isExpanded && (
        <div className="border-t border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/50">
          {group.children.map((child) => {
            const childEncounter = encounterByRoute.get(child.id)
            const childStatus = getRouteStatus(childEncounter)
            const childSi = statusIndicator[childStatus]
            const isDisabled = hasGroupEncounter && !childEncounter

            return (
              <button
                key={child.id}
                type="button"
                onClick={() => !isDisabled && onRouteClick(child)}
                disabled={isDisabled}
                className={`w-full flex items-center gap-3 px-4 py-2 pl-8 text-left transition-colors ${
                  isDisabled
                    ? 'opacity-50 cursor-not-allowed'
                    : 'hover:bg-gray-100 dark:hover:bg-gray-700/50'
                } ${childSi.bg}`}
              >
                <span
                  className={`w-2 h-2 rounded-full shrink-0 ${childSi.dot}`}
                />
                <div className="flex-1 min-w-0">
                  <div className="text-sm text-gray-700 dark:text-gray-300">
                    {child.name}
                  </div>
                  {!childEncounter && child.encounterMethods.length > 0 && (
                    <div className="flex flex-wrap gap-1 mt-0.5">
                      {child.encounterMethods.map((m) => (
                        <EncounterMethodBadge key={m} method={m} size="xs" />
                      ))}
                    </div>
                  )}
                </div>
                {childEncounter && (
                  <span className="text-xs text-gray-400 dark:text-gray-500">
                    {childSi.label}
                  </span>
                )}
                {isDisabled && (
                  <span className="text-xs text-gray-400 dark:text-gray-500 italic">
                    (locked)
                  </span>
                )}
              </button>
            )
          })}
        </div>
      )}
    </div>
  )
}

export function RunEncounters() {
  const { runId } = useParams<{ runId: string }>()
  const runIdNum = Number(runId)
  const { data: run, isLoading, error } = useRun(runIdNum)
  const { data: routes, isLoading: loadingRoutes } = useGameRoutes(
    run?.gameId ?? null,
  )
  const createEncounter = useCreateEncounter(runIdNum)
  const updateEncounter = useUpdateEncounter(runIdNum)
  const updateRun = useUpdateRun(runIdNum)

  const [selectedRoute, setSelectedRoute] = useState<Route | null>(null)
  const [editingEncounter, setEditingEncounter] =
    useState<EncounterDetail | null>(null)
  const [selectedTeamEncounter, setSelectedTeamEncounter] =
    useState<EncounterDetail | null>(null)
  const [showEndRun, setShowEndRun] = useState(false)
  const [showTeam, setShowTeam] = useState(true)
  const [filter, setFilter] = useState<'all' | RouteStatus>('all')

  const storageKey = `expandedGroups-${runId}`
  const [expandedGroups, setExpandedGroups] = useState<Set<number>>(() => {
    try {
      const saved = localStorage.getItem(storageKey)
      if (saved) return new Set(JSON.parse(saved) as number[])
    } catch { /* ignore */ }
    return new Set<number>()
  })

  const updateExpandedGroups = useCallback(
    (updater: (prev: Set<number>) => Set<number>) => {
      setExpandedGroups((prev) => {
        const next = updater(prev)
        localStorage.setItem(storageKey, JSON.stringify([...next]))
        return next
      })
    },
    [storageKey],
  )

  // Organize routes into hierarchical structure
  const organizedRoutes = useMemo(() => {
    if (!routes) return []
    return organizeRoutes(routes)
  }, [routes])

  // Map routeId → encounter for quick lookup
  const encounterByRoute = useMemo(() => {
    const map = new Map<number, EncounterDetail>()
    if (run) {
      for (const enc of run.encounters) {
        map.set(enc.routeId, enc)
      }
    }
    return map
  }, [run])

  // Auto-expand the first unvisited group on initial load
  useEffect(() => {
    if (organizedRoutes.length === 0 || expandedGroups.size > 0) return
    const firstUnvisited = organizedRoutes.find(
      (r) =>
        r.children.length > 0 &&
        getGroupEncounter(r, encounterByRoute) === null,
    )
    if (firstUnvisited) {
      updateExpandedGroups(() => new Set([firstUnvisited.id]))
    }
  }, [organizedRoutes, encounterByRoute]) // eslint-disable-line react-hooks/exhaustive-deps

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

  if (error || !run) {
    return (
      <div className="max-w-4xl mx-auto p-8">
        <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-red-700 dark:text-red-400">
          Failed to load run.
        </div>
        <Link
          to="/runs"
          className="inline-block mt-4 text-blue-600 hover:underline"
        >
          Back to runs
        </Link>
      </div>
    )
  }

  // Count completed locations (groups count as 1, standalone routes count as 1)
  const completedCount = organizedRoutes.filter((r) => {
    if (r.children.length > 0) {
      // It's a group - check if any child has an encounter
      return getGroupEncounter(r, encounterByRoute) !== null
    }
    // Standalone route
    return encounterByRoute.has(r.id)
  }).length

  const totalLocations = organizedRoutes.length

  const isActive = run.status === 'active'
  const alive = run.encounters.filter(
    (e) => e.status === 'caught' && e.faintLevel === null,
  )
  const dead = run.encounters.filter(
    (e) => e.status === 'caught' && e.faintLevel !== null,
  )

  const toggleGroup = (groupId: number) => {
    updateExpandedGroups((prev) => {
      const next = new Set(prev)
      if (next.has(groupId)) {
        next.delete(groupId)
      } else {
        next.add(groupId)
      }
      return next
    })
  }

  const handleRouteClick = (route: Route) => {
    const existing = encounterByRoute.get(route.id)
    if (existing) {
      setEditingEncounter(existing)
    } else {
      setEditingEncounter(null)
    }
    setSelectedRoute(route)
  }

  const handleCreate = (data: {
    routeId: number
    pokemonId: number
    nickname?: string
    status: EncounterStatus
    catchLevel?: number
  }) => {
    createEncounter.mutate(data, {
      onSuccess: () => {
        setSelectedRoute(null)
        setEditingEncounter(null)
      },
    })
  }

  const handleUpdate = (data: {
    id: number
    data: {
      nickname?: string
      status?: EncounterStatus
      faintLevel?: number
      deathCause?: string
    }
  }) => {
    updateEncounter.mutate(data, {
      onSuccess: () => {
        setSelectedRoute(null)
        setEditingEncounter(null)
      },
    })
  }

  // Filter routes
  const filteredRoutes = organizedRoutes.filter((r) => {
    if (filter === 'all') return true

    if (r.children.length > 0) {
      // It's a group
      const groupEnc = getGroupEncounter(r, encounterByRoute)
      return getRouteStatus(groupEnc ?? undefined) === filter
    }

    // Standalone route
    const enc = encounterByRoute.get(r.id)
    return getRouteStatus(enc) === filter
  })

  return (
    <div className="max-w-4xl mx-auto p-8">
      {/* Header */}
      <div className="mb-6">
        <Link
          to="/runs"
          className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mb-2 inline-block"
        >
          &larr; All Runs
        </Link>
        <div className="flex items-start justify-between">
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
              {run.name}
            </h1>
            <p className="text-gray-600 dark:text-gray-400 mt-1">
              {run.game.name} &middot; {run.game.region} &middot; Started{' '}
              {new Date(run.startedAt).toLocaleDateString(undefined, {
                year: 'numeric',
                month: 'short',
                day: 'numeric',
              })}
            </p>
          </div>
          <div className="flex items-center gap-2">
            {isActive && (
              <button
                onClick={() => setShowEndRun(true)}
                className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded-full font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
              >
                End Run
              </button>
            )}
            <span
              className={`px-3 py-1 rounded-full text-sm font-medium capitalize ${statusStyles[run.status]}`}
            >
              {run.status}
            </span>
          </div>
        </div>
      </div>

      {/* Completion Banner */}
      {!isActive && (
        <div
          className={`rounded-lg p-4 mb-6 ${
            run.status === 'completed'
              ? 'bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800'
              : 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800'
          }`}
        >
          <div className="flex items-center gap-3">
            <span className="text-2xl">{run.status === 'completed' ? '\u{1f3c6}' : '\u{1faa6}'}</span>
            <div>
              <p
                className={`font-semibold ${
                  run.status === 'completed'
                    ? 'text-blue-800 dark:text-blue-200'
                    : 'text-red-800 dark:text-red-200'
                }`}
              >
                {run.status === 'completed' ? 'Victory!' : 'Defeat'}
              </p>
              <p
                className={`text-sm ${
                  run.status === 'completed'
                    ? 'text-blue-600 dark:text-blue-400'
                    : 'text-red-600 dark:text-red-400'
                }`}
              >
                {run.completedAt && (
                  <>
                    Ended{' '}
                    {new Date(run.completedAt).toLocaleDateString(undefined, {
                      year: 'numeric',
                      month: 'short',
                      day: 'numeric',
                    })}
                    {' \u00b7 '}
                    Duration: {formatDuration(run.startedAt, run.completedAt)}
                  </>
                )}
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        <StatCard
          label="Encounters"
          value={run.encounters.length}
          color="blue"
        />
        <StatCard label="Alive" value={alive.length} color="green" />
        <StatCard label="Deaths" value={dead.length} color="red" />
        <StatCard
          label="Routes"
          value={completedCount}
          total={totalLocations}
          color="purple"
        />
      </div>

      {/* Rules */}
      <div className="mb-6">
        <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
          Active Rules
        </h2>
        <RuleBadges rules={run.rules} />
      </div>

      {/* Team Section */}
      {(alive.length > 0 || dead.length > 0) && (
        <div className="mb-6">
          <button
            type="button"
            onClick={() => setShowTeam(!showTeam)}
            className="flex items-center gap-2 mb-3 group"
          >
            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
              {isActive ? 'Team' : 'Final Team'}
            </h2>
            <span className="text-xs text-gray-400 dark:text-gray-500">
              {alive.length} alive{dead.length > 0 ? `, ${dead.length} dead` : ''}
            </span>
            <svg
              className={`w-4 h-4 text-gray-400 transition-transform ${showTeam ? 'rotate-180' : ''}`}
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </button>
          {showTeam && (
            <>
              {alive.length > 0 && (
                <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2 mb-3">
                  {alive.map((enc) => (
                    <PokemonCard
                      key={enc.id}
                      encounter={enc}
                      onClick={isActive ? () => setSelectedTeamEncounter(enc) : undefined}
                    />
                  ))}
                </div>
              )}
              {dead.length > 0 && (
                <>
                  <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
                    Graveyard
                  </h3>
                  <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
                    {dead.map((enc) => (
                      <PokemonCard
                        key={enc.id}
                        encounter={enc}
                        showFaintLevel
                        onClick={isActive ? () => setSelectedTeamEncounter(enc) : undefined}
                      />
                    ))}
                  </div>
                </>
              )}
            </>
          )}
        </div>
      )}

      {/* Progress bar */}
      <div className="mb-4">
        <div className="flex items-center justify-between mb-1">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
            Encounters
          </h2>
          <span className="text-sm text-gray-500 dark:text-gray-400">
            {completedCount} / {totalLocations} locations
          </span>
        </div>
        <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <div
            className="h-full bg-blue-500 rounded-full transition-all"
            style={{
              width: `${totalLocations > 0 ? (completedCount / totalLocations) * 100 : 0}%`,
            }}
          />
        </div>
      </div>

      {/* Filter tabs */}
      <div className="flex gap-2 mb-4 flex-wrap">
        {(
          [
            { key: 'all', label: 'All' },
            { key: 'none', label: 'Unvisited' },
            { key: 'caught', label: 'Caught' },
            { key: 'fainted', label: 'Fainted' },
            { key: 'missed', label: 'Missed' },
          ] as const
        ).map(({ key, label }) => (
          <button
            key={key}
            onClick={() => setFilter(key)}
            className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
              filter === key
                ? 'bg-blue-600 text-white'
                : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
            }`}
          >
            {label}
          </button>
        ))}
      </div>

      {/* Route list */}
      <div className="space-y-1">
        {filteredRoutes.length === 0 && (
          <p className="text-gray-500 dark:text-gray-400 text-sm py-4 text-center">
            {filter === 'all'
              ? 'Click a route to log your first encounter'
              : 'No routes match this filter — try a different one'}
          </p>
        )}
        {filteredRoutes.map((route) => {
          // Render as group if it has children
          if (route.children.length > 0) {
            return (
              <RouteGroup
                key={route.id}
                group={route}
                encounterByRoute={encounterByRoute}
                isExpanded={expandedGroups.has(route.id)}
                onToggleExpand={() => toggleGroup(route.id)}
                onRouteClick={handleRouteClick}
                filter={filter}
              />
            )
          }

          // Standalone route (no children)
          const encounter = encounterByRoute.get(route.id)
          const rs = getRouteStatus(encounter)
          const si = statusIndicator[rs]

          return (
            <button
              key={route.id}
              type="button"
              onClick={() => handleRouteClick(route)}
              className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-colors hover:bg-gray-100 dark:hover:bg-gray-700/50 ${si.bg}`}
            >
              <span
                className={`w-2.5 h-2.5 rounded-full shrink-0 ${si.dot}`}
              />
              <div className="flex-1 min-w-0">
                <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
                  {route.name}
                </div>
                {encounter ? (
                  <div className="flex items-center gap-2 mt-0.5">
                    {encounter.pokemon.spriteUrl && (
                      <img
                        src={encounter.pokemon.spriteUrl}
                        alt={encounter.pokemon.name}
                        className="w-5 h-5"
                      />
                    )}
                    <span className="text-xs text-gray-500 dark:text-gray-400 capitalize">
                      {encounter.nickname ?? encounter.pokemon.name}
                      {encounter.status === 'caught' &&
                        encounter.faintLevel !== null &&
                        (encounter.deathCause
                          ? ` — ${encounter.deathCause}`
                          : ' (dead)')}
                    </span>
                  </div>
                ) : route.encounterMethods.length > 0 && (
                  <div className="flex flex-wrap gap-1 mt-0.5">
                    {route.encounterMethods.map((m) => (
                      <EncounterMethodBadge key={m} method={m} size="xs" />
                    ))}
                  </div>
                )}
              </div>
              <span className="text-xs text-gray-400 dark:text-gray-500 shrink-0">
                {si.label}
              </span>
            </button>
          )
        })}
      </div>

      {/* Encounter Modal */}
      {selectedRoute && (
        <EncounterModal
          route={selectedRoute}
          existing={editingEncounter ?? undefined}
          onSubmit={handleCreate}
          onUpdate={handleUpdate}
          onClose={() => {
            setSelectedRoute(null)
            setEditingEncounter(null)
          }}
          isPending={createEncounter.isPending || updateEncounter.isPending}
        />
      )}

      {/* Status Change Modal (team pokemon) */}
      {selectedTeamEncounter && (
        <StatusChangeModal
          encounter={selectedTeamEncounter}
          onUpdate={(data) => {
            updateEncounter.mutate(data, {
              onSuccess: () => setSelectedTeamEncounter(null),
            })
          }}
          onClose={() => setSelectedTeamEncounter(null)}
          isPending={updateEncounter.isPending}
        />
      )}

      {/* End Run Modal */}
      {showEndRun && (
        <EndRunModal
          onConfirm={(status) => {
            updateRun.mutate(
              { status },
              { onSuccess: () => setShowEndRun(false) },
            )
          }}
          onClose={() => setShowEndRun(false)}
          isPending={updateRun.isPending}
        />
      )}
    </div>
  )
}