nuzlocke-tracker/frontend/src/components/StatusChangeModal.tsx

import { useState, useMemo } from 'react'
import type { EncounterDetail, UpdateEncounterInput, CreateEncounterInput } from '../types'
import { useEvolutions, useForms } from '../hooks/useEncounters'
import { TypeBadge } from './TypeBadge'
import { formatEvolutionMethod } from '../utils/formatEvolution'

interface StatusChangeModalProps {
  encounter: EncounterDetail
  onUpdate: (data: { id: number; data: UpdateEncounterInput }) => void
  onClose: () => void
  isPending: boolean
  region?: string
  onCreateEncounter?: (data: CreateEncounterInput) => void
}

export function StatusChangeModal({
  encounter,
  onUpdate,
  onClose,
  isPending,
  region,
  onCreateEncounter,
}: StatusChangeModalProps) {
  const { pokemon, currentPokemon, route, nickname, catchLevel, faintLevel, deathCause } = encounter
  const isDead = faintLevel !== null
  const displayPokemon = currentPokemon ?? pokemon
  const [showConfirm, setShowConfirm] = useState(false)
  const [showEvolve, setShowEvolve] = useState(false)
  const [showFormChange, setShowFormChange] = useState(false)
  const [showShedConfirm, setShowShedConfirm] = useState(false)
  const [pendingEvolutionId, setPendingEvolutionId] = useState<number | null>(null)
  const [shedNickname, setShedNickname] = useState('')
  const [deathLevel, setDeathLevel] = useState('')
  const [cause, setCause] = useState('')

  const activePokemonId = currentPokemon?.id ?? pokemon.id
  const { data: evolutions, isLoading: evolutionsLoading } = useEvolutions(
    showEvolve || showShedConfirm ? activePokemonId : null,
    region
  )
  const { data: forms } = useForms(isDead ? null : activePokemonId)

  const { normalEvolutions, shedCompanion } = useMemo(() => {
    if (!evolutions) return { normalEvolutions: [], shedCompanion: null }
    return {
      normalEvolutions: evolutions.filter((e) => e.trigger !== 'shed'),
      shedCompanion: evolutions.find((e) => e.trigger === 'shed') ?? null,
    }
  }, [evolutions])

  const handleConfirmDeath = () => {
    onUpdate({
      id: encounter.id,
      data: {
        faintLevel: deathLevel ? Number(deathLevel) : undefined,
        deathCause: cause || undefined,
      },
    })
  }

  const handleEvolve = (toPokemonId: number) => {
    if (shedCompanion && onCreateEncounter) {
      setPendingEvolutionId(toPokemonId)
      setShowEvolve(false)
      setShowShedConfirm(true)
      return
    }
    onUpdate({
      id: encounter.id,
      data: { currentPokemonId: toPokemonId },
    })
  }

  const applyEvolution = (includeShed: boolean) => {
    if (pendingEvolutionId === null) return
    onUpdate({
      id: encounter.id,
      data: { currentPokemonId: pendingEvolutionId },
    })
    if (includeShed && shedCompanion && onCreateEncounter) {
      onCreateEncounter({
        routeId: encounter.routeId,
        pokemonId: shedCompanion.toPokemon.id,
        nickname: shedNickname || undefined,
        status: 'caught',
        origin: 'shed_evolution',
      })
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="fixed inset-0 bg-black/50" onClick={onClose} />
      <div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-sm w-full">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
            {isDead ? 'Death Details' : 'Pokemon Status'}
          </h2>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        <div className="px-6 py-4">
          {/* Pokemon info */}
          <div className="flex items-center gap-4 mb-4">
            {displayPokemon.spriteUrl ? (
              <img
                src={displayPokemon.spriteUrl}
                alt={displayPokemon.name}
                className={`w-16 h-16 ${isDead ? 'grayscale opacity-60' : ''}`}
              />
            ) : (
              <div className="w-16 h-16 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>
              <div className="font-semibold text-gray-900 dark:text-gray-100">
                {nickname || displayPokemon.name}
              </div>
              {nickname && (
                <div className="text-xs text-gray-500 dark:text-gray-400 capitalize">
                  {displayPokemon.name}
                </div>
              )}
              <div className="flex flex-col items-start 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. {catchLevel ?? '?'} &middot; {route.name}
              </div>
              {currentPokemon && (
                <div className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">
                  Originally: {pokemon.name}
                </div>
              )}
            </div>
          </div>

          {/* Dead pokemon: view-only details */}
          {isDead && (
            <div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-4 space-y-2">
              <div className="flex items-center gap-2 text-red-700 dark:text-red-400 font-medium text-sm">
                <span className="w-2 h-2 rounded-full bg-red-500" />
                Deceased
              </div>
              {faintLevel !== null && (
                <div className="text-sm text-gray-700 dark:text-gray-300">
                  <span className="text-gray-500 dark:text-gray-400">Level at death:</span>{' '}
                  {faintLevel}
                </div>
              )}
              {deathCause && (
                <div className="text-sm text-gray-700 dark:text-gray-300">
                  <span className="text-gray-500 dark:text-gray-400">Cause:</span> {deathCause}
                </div>
              )}
            </div>
          )}

          {/* Alive pokemon: actions */}
          {!isDead && !showConfirm && !showEvolve && !showFormChange && !showShedConfirm && (
            <div className="flex gap-3">
              <button
                type="button"
                onClick={() => setShowEvolve(true)}
                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
              >
                Evolve
              </button>
              {forms && forms.length > 0 && (
                <button
                  type="button"
                  onClick={() => setShowFormChange(true)}
                  className="flex-1 px-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition-colors"
                >
                  Change Form
                </button>
              )}
              <button
                type="button"
                onClick={() => setShowConfirm(true)}
                className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition-colors"
              >
                Mark as Dead
              </button>
            </div>
          )}

          {/* Evolution selection */}
          {!isDead && showEvolve && (
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Evolve into:
                </h3>
                <button
                  type="button"
                  onClick={() => setShowEvolve(false)}
                  className="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
                >
                  Back
                </button>
              </div>
              {evolutionsLoading && (
                <p className="text-sm text-gray-500 dark:text-gray-400">Loading evolutions...</p>
              )}
              {!evolutionsLoading && normalEvolutions.length === 0 && (
                <p className="text-sm text-gray-500 dark:text-gray-400">No evolutions available</p>
              )}
              {!evolutionsLoading && normalEvolutions.length > 0 && (
                <div className="space-y-2">
                  {normalEvolutions.map((evo) => (
                    <button
                      key={evo.id}
                      type="button"
                      disabled={isPending}
                      onClick={() => handleEvolve(evo.toPokemon.id)}
                      className="w-full flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:border-blue-300 dark:hover:border-blue-600 transition-colors disabled:opacity-50"
                    >
                      {evo.toPokemon.spriteUrl ? (
                        <img
                          src={evo.toPokemon.spriteUrl}
                          alt={evo.toPokemon.name}
                          className="w-10 h-10"
                        />
                      ) : (
                        <div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-sm font-bold text-gray-600 dark:text-gray-300">
                          {evo.toPokemon.name[0]?.toUpperCase()}
                        </div>
                      )}
                      <div className="text-left">
                        <div className="font-medium text-gray-900 dark:text-gray-100 text-sm">
                          {evo.toPokemon.name}
                        </div>
                        <div className="text-xs text-gray-500 dark:text-gray-400">
                          {formatEvolutionMethod(evo)}
                        </div>
                      </div>
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}

          {/* Shed evolution confirmation (Nincada → Ninjask + Shedinja) */}
          {!isDead && showShedConfirm && shedCompanion && (
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Shed Evolution
                </h3>
                <button
                  type="button"
                  onClick={() => {
                    setShowShedConfirm(false)
                    setPendingEvolutionId(null)
                    setShedNickname('')
                    setShowEvolve(true)
                  }}
                  className="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
                >
                  Back
                </button>
              </div>
              <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg p-3">
                <div className="flex items-center gap-3">
                  {shedCompanion.toPokemon.spriteUrl ? (
                    <img
                      src={shedCompanion.toPokemon.spriteUrl}
                      alt={shedCompanion.toPokemon.name}
                      className="w-12 h-12"
                    />
                  ) : (
                    <div className="w-12 h-12 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-sm font-bold text-gray-600 dark:text-gray-300">
                      {shedCompanion.toPokemon.name[0]?.toUpperCase()}
                    </div>
                  )}
                  <p className="text-sm text-amber-800 dark:text-amber-300">
                    {displayPokemon.name} shed its shell! Would you also like to add{' '}
                    <span className="font-semibold">{shedCompanion.toPokemon.name}</span>?
                  </p>
                </div>
              </div>
              <div>
                <label
                  htmlFor="shed-nickname"
                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
                >
                  Nickname <span className="font-normal text-gray-400">(optional)</span>
                </label>
                <input
                  id="shed-nickname"
                  type="text"
                  maxLength={30}
                  value={shedNickname}
                  onChange={(e) => setShedNickname(e.target.value)}
                  placeholder={shedCompanion.toPokemon.name}
                  className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-amber-500"
                />
              </div>
              <div className="flex gap-3 pt-1">
                <button
                  type="button"
                  disabled={isPending}
                  onClick={() => applyEvolution(false)}
                  className="flex-1 px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 transition-colors"
                >
                  Skip
                </button>
                <button
                  type="button"
                  disabled={isPending}
                  onClick={() => applyEvolution(true)}
                  className="flex-1 px-4 py-2 bg-amber-600 text-white rounded-lg font-medium hover:bg-amber-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  {isPending ? 'Saving...' : `Add ${shedCompanion.toPokemon.name}`}
                </button>
              </div>
            </div>
          )}

          {/* Form change selection */}
          {!isDead && showFormChange && (
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Change form to:
                </h3>
                <button
                  type="button"
                  onClick={() => setShowFormChange(false)}
                  className="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
                >
                  Back
                </button>
              </div>
              {forms && forms.length > 0 && (
                <div className="space-y-2">
                  {forms.map((form) => (
                    <button
                      key={form.id}
                      type="button"
                      disabled={isPending}
                      onClick={() => handleEvolve(form.id)}
                      className="w-full flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-purple-50 dark:hover:bg-purple-900/20 hover:border-purple-300 dark:hover:border-purple-600 transition-colors disabled:opacity-50"
                    >
                      {form.spriteUrl ? (
                        <img src={form.spriteUrl} alt={form.name} className="w-10 h-10" />
                      ) : (
                        <div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-sm font-bold text-gray-600 dark:text-gray-300">
                          {form.name[0]?.toUpperCase()}
                        </div>
                      )}
                      <div className="text-left">
                        <div className="font-medium text-gray-900 dark:text-gray-100 text-sm">
                          {form.name}
                        </div>
                        <div className="flex gap-1">
                          {form.types.map((type) => (
                            <TypeBadge key={type} type={type} />
                          ))}
                        </div>
                      </div>
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}

          {/* Confirmation form */}
          {!isDead && showConfirm && (
            <div className="space-y-3">
              <div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-3">
                <p className="text-sm text-red-700 dark:text-red-400 font-medium">
                  This cannot be undone (Nuzlocke rules).
                </p>
              </div>

              <div>
                <label
                  htmlFor="death-level"
                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
                >
                  Level at Death <span className="font-normal text-gray-400">(optional)</span>
                </label>
                <input
                  id="death-level"
                  type="number"
                  min={1}
                  max={100}
                  value={deathLevel}
                  onChange={(e) => setDeathLevel(e.target.value)}
                  placeholder="Level"
                  className="w-24 px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-red-500"
                />
              </div>

              <div>
                <label
                  htmlFor="death-cause"
                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
                >
                  Cause of Death <span className="font-normal text-gray-400">(optional)</span>
                </label>
                <input
                  id="death-cause"
                  type="text"
                  maxLength={100}
                  value={cause}
                  onChange={(e) => setCause(e.target.value)}
                  placeholder="e.g. Crit from rival's Charizard"
                  className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-red-500"
                />
              </div>

              <div className="flex gap-3 pt-1">
                <button
                  type="button"
                  onClick={() => setShowConfirm(false)}
                  className="flex-1 px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                >
                  Cancel
                </button>
                <button
                  type="button"
                  disabled={isPending}
                  onClick={handleConfirmDeath}
                  className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  {isPending ? 'Saving...' : 'Confirm Death'}
                </button>
              </div>
            </div>
          )}
        </div>

        {/* Footer for dead/no-confirm/no-evolve views */}
        {(isDead ||
          (!isDead && !showConfirm && !showEvolve && !showFormChange && !showShedConfirm)) && (
          <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
            >
              Close
            </button>
          </div>
        )}
      </div>
    </div>
  )
}