import { useState } from 'react'
import type { EncounterDetail } from '../types'

interface StatusChangeModalProps {
  encounter: EncounterDetail
  onUpdate: (data: {
    id: number
    data: { faintLevel?: number; deathCause?: string }
  }) => void
  onClose: () => void
  isPending: boolean
}

const typeColors: 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',
}

export function StatusChangeModal({
  encounter,
  onUpdate,
  onClose,
  isPending,
}: StatusChangeModalProps) {
  const { pokemon, route, nickname, catchLevel, faintLevel, deathCause } =
    encounter
  const isDead = faintLevel !== null
  const [showConfirm, setShowConfirm] = useState(false)
  const [deathLevel, setDeathLevel] = useState('')
  const [cause, setCause] = useState('')

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

  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">
            {pokemon.spriteUrl ? (
              <img
                src={pokemon.spriteUrl}
                alt={pokemon.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">
                {pokemon.name[0].toUpperCase()}
              </div>
            )}
            <div>
              <div className="font-semibold text-gray-900 dark:text-gray-100">
                {nickname || pokemon.name}
              </div>
              {nickname && (
                <div className="text-xs text-gray-500 dark:text-gray-400 capitalize">
                  {pokemon.name}
                </div>
              )}
              <div className="flex gap-1 mt-1">
                {pokemon.types.map((type) => (
                  <span
                    key={type}
                    className={`px-1.5 py-0.5 rounded text-[10px] font-medium text-white ${typeColors[type] ?? 'bg-gray-500'}`}
                  >
                    {type}
                  </span>
                ))}
              </div>
              <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                Lv. {catchLevel ?? '?'} &middot; {route.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: mark as dead */}
          {!isDead && !showConfirm && (
            <button
              type="button"
              onClick={() => setShowConfirm(true)}
              className="w-full px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition-colors"
            >
              Mark as Dead
            </button>
          )}

          {/* 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 views */}
        {(isDead || (!isDead && !showConfirm)) && (
          <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>
  )
}