import { Skull, Heart, AlertTriangle, Dices } from 'lucide-react';

interface DyingIndicatorProps {
  dyingValue: number;
  woundedValue: number;
  doomedValue: number;
  onRecoveryCheck?: () => void;
}

export function DyingIndicator({
  dyingValue,
  woundedValue,
  doomedValue,
  onRecoveryCheck,
}: DyingIndicatorProps) {
  const deathThreshold = 4 - doomedValue;
  const isDying = dyingValue > 0;
  const isNearDeath = dyingValue >= deathThreshold - 1;

  if (!isDying && woundedValue === 0 && doomedValue === 0) {
    return null;
  }

  return (
    <div className="space-y-3">
      {/* Dying Status */}
      {isDying && (
        <div
          className={`p-4 rounded-xl border-2 ${
            isNearDeath
              ? 'bg-red-500/20 border-red-500/50'
              : 'bg-orange-500/20 border-orange-500/50'
          }`}
        >
          {/* Header with skull and title */}
          <div className="flex items-center justify-center gap-3 mb-4">
            <Skull className={`h-8 w-8 ${isNearDeath ? 'text-red-400' : 'text-orange-400'}`} />
            <span className={`text-2xl font-bold ${isNearDeath ? 'text-red-400' : 'text-orange-400'}`}>
              Sterbend
            </span>
          </div>

          {/* Dying value indicators - larger */}
          <div className="flex items-center justify-center gap-2 mb-4">
            {Array.from({ length: deathThreshold }).map((_, i) => (
              <div
                key={i}
                className={`w-8 h-8 rounded-full border-2 flex items-center justify-center ${
                  i < dyingValue
                    ? 'bg-red-500 border-red-400'
                    : 'bg-transparent border-gray-500'
                }`}
              >
                {i < dyingValue && <Skull className="h-4 w-4 text-white" />}
              </div>
            ))}
          </div>

          {/* Info row */}
          <div className="flex items-center justify-between text-sm mb-4">
            <span className="text-text-secondary">
              Genesungswurf SG <span className="font-bold text-text-primary">{10 + dyingValue}</span>
            </span>
            <span className={isNearDeath ? 'text-red-400 font-semibold' : 'text-text-secondary'}>
              Tod bei {deathThreshold}
            </span>
          </div>

          {/* Recovery Check Button - Prominent */}
          {onRecoveryCheck && (
            <button
              onClick={onRecoveryCheck}
              className={`w-full py-4 px-4 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2 ${
                isNearDeath
                  ? 'bg-red-500/40 hover:bg-red-500/60 text-red-200 border border-red-500/50'
                  : 'bg-orange-500/40 hover:bg-orange-500/60 text-orange-200 border border-orange-500/50'
              }`}
            >
              <Dices className="h-6 w-6" />
              Genesungswurf
            </button>
          )}
        </div>
      )}

      {/* Wounded & Doomed Status Bar */}
      {(woundedValue > 0 || doomedValue > 0) && (
        <div className="flex gap-2 flex-wrap">
          {woundedValue > 0 && (
            <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-yellow-500/20 text-yellow-400 text-sm">
              <Heart className="h-4 w-4" />
              <span className="font-medium">Verwundet {woundedValue}</span>
            </div>
          )}
          {doomedValue > 0 && (
            <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-purple-500/20 text-purple-400 text-sm">
              <AlertTriangle className="h-4 w-4" />
              <span className="font-medium">Verdammt {doomedValue}</span>
            </div>
          )}
        </div>
      )}
    </div>
  );
}
