import { useEffect, useState, type CSSProperties } from 'react';
import { REVIVE_TIMER_SECONDS } from '../shared/constants';
import { useT, t } from '../i18n';

interface DeathScreenProps {
  visible: boolean;
  onRevive: () => void;
  /** Free revives left for non-subscribers; omit when subscribed / unlimited. */
  revivesRemaining?: number;
}

const overlayStyle: CSSProperties = {
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  backgroundColor: 'rgba(0, 0, 0, 0.7)',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  gap: 24,
  zIndex: 100,
  transition: 'opacity 0.5s ease',
};

const titleStyle: CSSProperties = {
  fontSize: 36,
  fontWeight: 900,
  color: '#cc3333',
  textShadow: '0 0 20px rgba(204, 51, 51, 0.5)',
  letterSpacing: 4,
};

const timerStyle: CSSProperties = {
  fontSize: 48,
  fontWeight: 700,
  color: '#ffffff',
  fontVariantNumeric: 'tabular-nums',
};

const buttonStyle: CSSProperties = {
  padding: '14px 40px',
  fontSize: 18,
  fontWeight: 700,
  color: '#fff',
  backgroundColor: '#cc3333',
  border: 'none',
  borderRadius: 8,
  cursor: 'pointer',
  transition: 'background-color 0.2s',
};

export function DeathScreen({ visible, onRevive, revivesRemaining }: DeathScreenProps) {
  const tr = useT();
  const [timer, setTimer] = useState(REVIVE_TIMER_SECONDS);
  const canRevive = revivesRemaining === undefined || revivesRemaining > 0;

  // Countdown timer
  useEffect(() => {
    if (!visible) {
      setTimer(REVIVE_TIMER_SECONDS);
      return;
    }

    const interval = setInterval(() => {
      setTimer((t) => {
        if (t <= 1) {
          clearInterval(interval);
          return 0;
        }
        return t - 1;
      });
    }, 1000);

    return () => clearInterval(interval);
  }, [visible]);

  // Auto-revive when timer hits 0 (only if server still allows free revives)
  useEffect(() => {
    if (visible && timer === 0 && canRevive) {
      onRevive();
    }
  }, [visible, timer, onRevive, canRevive]);

  if (!visible) return null;

  return (
    <div style={overlayStyle}>
      <div style={titleStyle}>{tr.youDied}</div>
      <div style={timerStyle}>{canRevive ? timer : '—'}</div>
      {revivesRemaining !== undefined && (
        <div style={{ color: '#aaa', fontSize: 14 }}>
          {t(tr.freeRevivesLeft, { count: Math.max(0, revivesRemaining) })}
        </div>
      )}
      <button
        style={{
          ...buttonStyle,
          opacity: canRevive ? 1 : 0.45,
          cursor: canRevive ? 'pointer' : 'not-allowed',
        }}
        disabled={!canRevive}
        onClick={onRevive}
        onMouseEnter={(e) => {
          if (!canRevive) return;
          e.currentTarget.style.backgroundColor = '#ee4444';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.backgroundColor = '#cc3333';
        }}
      >
        {tr.reviveNow}
      </button>
      <div style={{ color: '#888', fontSize: 13 }}>
        {canRevive ? t(tr.autoReviveIn, { timer }) : tr.noFreeRevives}
      </div>
    </div>
  );
}
