import React, { useEffect, useState, useRef } from 'react';

interface DeathAlert {
  character_name: string;
  vitae: number;
  timestamp: string;
}

interface Props {
  deathAlerts: DeathAlert[];
}

interface ActiveNotification {
  key: number;
  alert: DeathAlert;
  exiting: boolean;
}

let deathKey = 0;

export const DeathNotification: React.FC<Props> = ({ deathAlerts }) => {
  const [active, setActive] = useState<ActiveNotification[]>([]);
  const lastCount = useRef(0);

  useEffect(() => {
    if (deathAlerts.length > lastCount.current && lastCount.current > 0) {
      const newAlerts = deathAlerts.slice(lastCount.current);
      for (const alert of newAlerts) {
        const key = ++deathKey;
        setActive(prev => [...prev, { key, alert, exiting: false }]);
        // Sound
        try {
          const ctx = new AudioContext();
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.connect(gain); gain.connect(ctx.destination);
          osc.frequency.value = 440; osc.type = 'sawtooth'; gain.gain.value = 0.2;
          osc.start();
          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.8);
          osc.stop(ctx.currentTime + 0.8);
        } catch {}
        // Auto-dismiss after 8s
        setTimeout(() => {
          setActive(prev => prev.map(n => n.key === key ? { ...n, exiting: true } : n));
          setTimeout(() => setActive(prev => prev.filter(n => n.key !== key)), 500);
        }, 8000);
      }
    }
    lastCount.current = deathAlerts.length;
  }, [deathAlerts.length]); // eslint-disable-line react-hooks/exhaustive-deps

  if (active.length === 0) return null;

  return (
    <div style={{ position: 'fixed', top: 70, left: '50%', transform: 'translateX(-50%)', zIndex: 99999, display: 'flex', flexDirection: 'column', gap: 6, pointerEvents: 'none' }}>
      {active.map(n => (
        <div key={n.key} style={{
          background: 'linear-gradient(135deg, #2a0a0a, #1a0000)',
          border: '2px solid #cc4444',
          borderRadius: 8, padding: '12px 24px', textAlign: 'center',
          boxShadow: '0 0 30px rgba(204, 68, 68, 0.3)',
          animation: n.exiting ? 'ml-notif-out 0.5s ease-in forwards' : 'ml-notif-in 0.5s ease-out',
        }}>
          <div style={{ fontSize: '1.2rem', fontWeight: 800, color: '#ff4444' }}>☠️ CHARACTER DIED ☠️</div>
          <div style={{ fontSize: '1rem', fontWeight: 600, color: '#fff', marginTop: 2 }}>{n.alert.character_name}</div>
          <div style={{ fontSize: '0.8rem', color: '#c88', marginTop: 2 }}>Vitae: {n.alert.vitae}%</div>
        </div>
      ))}
    </div>
  );
};