interface SimulationErrorModalProps {
  message: string;
  onClose: () => void;
}

const SimulationErrorModal = ({ message, onClose }: SimulationErrorModalProps) => {
  return (
    <div
      style={{
        position: 'absolute',
        inset: 0,
        zIndex: 50,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'rgba(10, 14, 26, 0.75)',
        backdropFilter: 'blur(4px)',
      }}
    >
      <div
        style={{
          width: 360,
          background: 'var(--bg-surface)',
          border: '1px solid rgba(239, 68, 68, 0.35)',
          borderRadius: 'var(--radius-md)',
          padding: '28px 24px',
          display: 'flex',
          flexDirection: 'column',
          gap: 16,
        }}
      >
        {/* 아이콘 + 제목 */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div
            style={{
              width: 36,
              height: 36,
              borderRadius: '50%',
              background: 'rgba(239, 68, 68, 0.12)',
              border: '1px solid rgba(239, 68, 68, 0.3)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
            }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <path
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
                fill="rgb(239, 68, 68)"
                opacity="0.9"
              />
            </svg>
          </div>
          <div>
            <div style={{ color: 'var(--fg-default)', fontSize: 14, fontWeight: 600 }}>
              확산 예측 실패
            </div>
            <div style={{ color: 'var(--fg-disabled)', fontSize: 12, marginTop: 2 }}>
              시뮬레이션 실행 중 오류가 발생했습니다
            </div>
          </div>
        </div>

        {/* 에러 메시지 */}
        <div
          style={{
            background: 'rgba(239, 68, 68, 0.06)',
            border: '1px solid rgba(239, 68, 68, 0.2)',
            borderRadius: 'var(--radius-sm)',
            padding: '10px 14px',
            color: 'rgb(252, 165, 165)',
            fontSize: 13,
            lineHeight: 1.6,
            wordBreak: 'break-word',
          }}
        >
          {message}
        </div>

        {/* 확인 버튼 */}
        <button
          onClick={onClose}
          style={{
            marginTop: 4,
            padding: '8px 0',
            background: 'rgba(239, 68, 68, 0.15)',
            border: '1px solid rgba(239, 68, 68, 0.35)',
            borderRadius: 'var(--radius-sm)',
            color: 'rgb(252, 165, 165)',
            fontSize: 13,
            fontWeight: 600,
            cursor: 'pointer',
            transition: 'background 0.15s',
          }}
          onMouseEnter={(e) => {
            (e.currentTarget as HTMLButtonElement).style.background = 'rgba(239, 68, 68, 0.25)';
          }}
          onMouseLeave={(e) => {
            (e.currentTarget as HTMLButtonElement).style.background = 'rgba(239, 68, 68, 0.15)';
          }}
        >
          확인
        </button>
      </div>
    </div>
  );
};

export default SimulationErrorModal;