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

export interface ChangelogModalProps {
  title: string;
  items: string[];
  serverVersion?: 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.72)',
  zIndex: 450,
  cursor: 'pointer',
  pointerEvents: 'auto',
};

const cardStyle: CSSProperties = {
  backgroundColor: 'rgba(15, 15, 30, 0.97)',
  border: '1px solid rgba(120, 200, 255, 0.35)',
  borderRadius: 12,
  padding: '20px 22px',
  maxWidth: 340,
  width: 'calc(100vw - 40px)',
  maxHeight: 'min(70vh, 420px)',
  overflowY: 'auto',
  boxShadow: '0 0 32px rgba(60, 120, 220, 0.25)',
  cursor: 'default',
};

const titleStyle: CSSProperties = {
  fontSize: 17,
  fontWeight: 700,
  color: '#e8f0ff',
  marginBottom: 6,
  textAlign: 'center',
};

const versionStyle: CSSProperties = {
  fontSize: 11,
  color: 'rgba(180, 200, 230, 0.75)',
  textAlign: 'center',
  marginBottom: 14,
};

const listStyle: CSSProperties = {
  margin: '0 0 16px 0',
  paddingLeft: 18,
  color: '#c8d8f0',
  fontSize: 13,
  lineHeight: 1.45,
};

const buttonStyle: CSSProperties = {
  display: 'block',
  width: '100%',
  padding: '10px 16px',
  borderRadius: 8,
  border: 'none',
  background: 'linear-gradient(180deg, #4a8cff 0%, #2d5eb8 100%)',
  color: '#fff',
  fontSize: 14,
  fontWeight: 600,
  cursor: 'pointer',
};

export function ChangelogModal({ title, items, serverVersion, onDismiss }: ChangelogModalProps) {
  const tr = useT();
  return (
    <div
      style={overlayStyle}
      role="dialog"
      aria-modal
      aria-labelledby="changelog-title"
      onClick={onDismiss}
    >
      <div style={cardStyle} onClick={(e) => e.stopPropagation()}>
        <div id="changelog-title" style={titleStyle}>
          {title}
        </div>
        {serverVersion ? (
          <div style={versionStyle}>{t(tr.changelogVersion, { version: serverVersion })}</div>
        ) : null}
        <ul style={listStyle}>
          {items.map((line, i) => (
            <li key={i}>{line}</li>
          ))}
        </ul>
        <button type="button" style={buttonStyle} onClick={onDismiss}>
          {tr.changelogOk}
        </button>
      </div>
    </div>
  );
}
