import { useEffect, useState, type CSSProperties } from 'react';
import { useT, t } from '../i18n';
import {
  formatOfflineLootLine,
  offlineLootLinesWithoutGold,
  type OfflineLootLine,
} from '../network/api';

interface OfflineReportProps {
  monstersKilled: number;
  xpGained: number;
  goldGained: number;
  levelsGained: number;
  deaths?: number;
  revives?: number;
  loot?: OfflineLootLine[];
  message?: string;
  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: 360,
  maxHeight: '80vh',
  overflowY: 'auto',
  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,
};

const lootListStyle: CSSProperties = {
  fontSize: 12,
  color: '#c8d0e8',
  textAlign: 'left',
  marginTop: 8,
  paddingLeft: 8,
  lineHeight: 1.6,
};

export function OfflineReport({
  monstersKilled,
  xpGained,
  goldGained,
  levelsGained,
  deaths = 0,
  revives = 0,
  loot = [],
  message,
  onDismiss,
}: OfflineReportProps) {
  const tr = useT();
  const [fading, setFading] = useState(false);
  const itemLoot = offlineLootLinesWithoutGold(loot);

  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>
          {message ? <div style={lineStyle}>{message}</div> : null}
          {monstersKilled > 0 ? (
            <div style={lineStyle}>{t(tr.killedMonsters, { count: monstersKilled })}</div>
          ) : null}
          {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>
          )}
          {deaths > 0 && (
            <div style={lineStyle}>{t(tr.offlineDeaths, { count: deaths })}</div>
          )}
          {revives > 0 && (
            <div style={lineStyle}>{t(tr.offlineRevives, { count: revives })}</div>
          )}
          {itemLoot.length > 0 && (
            <>
              <div style={{ ...lineStyle, marginTop: 10 }}>{tr.offlineLootFound}</div>
              <div style={lootListStyle}>
                {itemLoot.map((line, i) => (
                  <div key={i}>{formatOfflineLootLine(line)}</div>
                ))}
              </div>
            </>
          )}
          <div style={hintStyle}>{tr.tapToDismiss}</div>
        </div>
      </div>
    </>
  );
}
