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

interface OfflineReportProps {
  monstersKilled: number;
  xpGained: number;
  goldGained: number;
  levelsGained: number;
  onDismiss: () => void;
}

const overlayStyle: CSSProperties = {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: 'rgba(0, 0, 0, 0.65)',
  zIndex: 400,
  cursor: 'pointer',
  pointerEvents: 'auto',
};

const cardStyle: CSSProperties = {
  backgroundColor: 'rgba(15, 15, 30, 0.95)',
  border: '1px solid rgba(100, 160, 255, 0.3)',
  borderRadius: 12,
  padding: '20px 28px',
  maxWidth: 320,
  width: 'calc(100vw - 48px)',
  textAlign: 'center',
  boxShadow: '0 0 30px rgba(50, 100, 200, 0.2)',
  animation: 'offline-report-in 0.4s ease-out',
};

const titleStyle: CSSProperties = {
  fontSize: 16,
  fontWeight: 700,
  color: '#b8d4ff',
  marginBottom: 12,
};

const lineStyle: CSSProperties = {
  fontSize: 14,
  color: '#ddd',
  lineHeight: 1.8,
};

const hintStyle: CSSProperties = {
  fontSize: 11,
  color: 'rgba(180, 190, 220, 0.5)',
  marginTop: 14,
};

export function OfflineReport({
  monstersKilled,
  xpGained,
  goldGained,
  levelsGained,
  onDismiss,
}: OfflineReportProps) {
  const tr = useT();
  const [fading, setFading] = useState(false);

  useEffect(() => {
    const fadeTimer = setTimeout(() => setFading(true), 4600);
    const doneTimer = setTimeout(onDismiss, 5000);
    return () => {
      clearTimeout(fadeTimer);
      clearTimeout(doneTimer);
    };
  }, [onDismiss]);

  return (
    <>
      <style>{`
        @keyframes offline-report-in {
          0% { transform: scale(0.9); opacity: 0; }
          100% { transform: scale(1); opacity: 1; }
        }
      `}</style>
      <div
        style={{
          ...overlayStyle,
          opacity: fading ? 0 : 1,
          transition: 'opacity 0.4s ease-in',
        }}
        onClick={onDismiss}
      >
        <div style={cardStyle} onClick={(e) => e.stopPropagation()}>
          <div style={titleStyle}>{tr.whileYouWereAway}</div>
          <div style={lineStyle}>
            {t(tr.killedMonsters, { count: monstersKilled })}
          </div>
          {xpGained > 0 && (
            <div style={lineStyle}>
              {t(tr.gainedXP, { xp: xpGained })}
            </div>
          )}
          {goldGained > 0 && (
            <div style={lineStyle}>
              {t(tr.gainedGold, { gold: goldGained })}
            </div>
          )}
          {levelsGained > 0 && (
            <div style={lineStyle}>
              {t(tr.gainedLevels, { levels: levelsGained })}
            </div>
          )}
          <div style={hintStyle}>{tr.tapToDismiss}</div>
        </div>
      </div>
    </>
  );
}
